JS高级事件委托
事件委托:
如果子元素身上绑定大量相同的事件,我们尽量采用事件委托,所有子元素把自己的事件委托给父级了
原理:采用事件冒泡机制完成
为什么使用事件委托呢?
传统的for循环绑定事件,会增加大量的DOM操作事件,影响页面的性能,采用事件委托就是把所有的事件给予一个元素身上
事件委托和传统的事件把规定的优势:
传统时间绑定对新增的元素不起作用,事件委托就起作用
传统的事件绑定,有多少元素JS就需要绑定多少事件,事件委托只需要一个事件。
并不是所有的事件都存在事件冒泡机制:
onmouseenter onmouseleave 就没有事件冒泡机制
所以我们做跟随鼠标的时候尽量用这两个事件,不要onmouseover onmouseout
Dom0级事件帮动多个click最后只执行最后一个click
DOM2级事件元素绑定多个click,都要执行
注意当绑定的多个事件名,函数名,事件发生阶段三者完全一样时,才执行最后一个。
div.addEventListener("click",fn1,false)
div.addEventListener("click",fn1,false)
第二参数尽量不要使用匿名函数:
区别:
1.DOM0级绑定多个相同的时间,后者会覆盖前者,DOM2级不会
2.DOM0级只适合普通事件,DOM2级西药使用removeElementListener()
div.onclick=function(){
console.log(123)
}
div.onclick=null; DOM0级取消事件
div.addEventListener("click",fn1,false)
function fn1(){
console.log(123)
}
div.removeEventListener("click",fn1,false) DOM2级取消事件
键盘事件 :
onkeydown onkeyup
键盘事件触发时,浏览器天生给方法一个叫keyboardEvent的对象,所有键盘的信息都在这个对象上。
我们发现ev有个属性keyCode键盘编码
document.onkeydown=function(ev){
var ev=ev||window.event
console.log(ev.keyCode)
}
右击事件 oncontextmenu鼠标右击事件