事件 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)

}

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1