事件 9-14钟诚

事件

onclick 单击事件

xxx.onclick = function(){

}

多个事件使用 同一个函数

function show（）{

​ xxxxxx

}

d1.onclick = show

d2.onclick=show d1 d2都可调用show 函数

缺点：一个元素的一个事件属性只能绑定一个处理函数

监听事件

元素 addEventListener("事件名，事件处理函数")

d1.addEventListner("click",function(){

​ xxxxxx

})

优点：可以绑定多个事件

移除 removeListener("事件名，事件处理函数")

冒泡事件

子类会冒泡传到父类

div>body>html>document>windows

从dom树底层传递到上层

取消冒泡

e. stopPropagation(); 事件源在哪里产生 就在哪里阻止

​ 注意
​ e.stopPropagation() 只阻止外层事件的执行，不阻止当前元素自己事件的执行。所以，在当前元素处理函数中，e.stopPropagation() 写前写后无所谓。对当前元素的事件执行都没有影响

利用冒泡/事件委托

原理：事件冒泡 给父类注册事件

xx.onclick = function(e){ e 事件参数 形参事件发生时可以获取相关数据

​ console.log(e.target) e.target 是真的触发事件

}

​ 事件问题
​ 因为浏览器触发事件，采用的是遍历所有事件监听对象的方式，所以，监听对象越多，遍历越慢，事件响应速度越慢。反之，监听对象少，遍历快，事件响应的速度就快
​ 优化

    1. 尽量减少事件对象的个数
    2. 使用事件委托
                如果多个平级子元素绑定相同的事件监听，则只需在父元素绑定一次，所有子元素共用
使用事件委托
            为父元素绑定监听，通过 e.target 获取发生事件的子元素
                ul.onclick=function(e){  
 console.log(e.target)

}
e.target
指向发生点击事件的元素
e.currentTarget
指向监听器绑定的元素
问题
1. 如何获得目标元素
错误
使用this，事件委托中不要用this获得当前元素对象，因为此时的this不再指向子元素，而是父元素
正确
使用 e.target，e.target，是事件对象中自带的，永久保存最初的目标元素的属性。不随冒泡而改变
问题：也可能点在父元素上或其它不想要的子元素上，也会出发事件
解决：事件委托中，都要先验证目标元素e.target 的特征是否符合要求。只有符合要求的子元素，才能继续执行处理函数。如果发现，e.target是不符合要求的元素，就什么都不干
2.

优点
    提高JavaScript性能。事件委托可以显著的提高事件的处理速度，减少内存的占用

页面滚动监听

window.onscroll

ex： window.onscroll = function(e){

​ console.log(document.documentElement.scrollTop)

}