天天看点

JavaScript权威设计--事件冒泡,捕获,事件句柄,事件源,事件对象(简要学习笔记十八)

1.事件冒泡与事件捕获

2.事件与事件句柄

3.事件委托:利用事件的冒泡技术。子元素的事件最终会冒泡到父元素直到跟节点。事件监听会分析从子元素冒泡上来的事件。

事件委托的好处:

    1.每个函数都是对象,都会占用内存,内存中对象越多,性能越差。

    2.必须事先指定所有事件处理程序而导致的dom访问次数,会延迟整个页面的交互就绪时间。

怎样处理由于事件较多引起的性能差:

1.采用事件委托技术,限制简历的连接数量

2.在不需要的时候移除事件处理程序

例子:

html:

js:

注意:通过设置innerhtml可以把按钮移走,但是事件处理程序依旧与按钮保持着事件处理程序的引用都保存在内存中。

    所以最好手动移除:

4.事件对象与事件源

5.取消事件默认行为

JavaScript权威设计--事件冒泡,捕获,事件句柄,事件源,事件对象(简要学习笔记十八)
JavaScript权威设计--事件冒泡,捕获,事件句柄,事件源,事件对象(简要学习笔记十八)

6.阻止事件冒泡

JavaScript权威设计--事件冒泡,捕获,事件句柄,事件源,事件对象(简要学习笔记十八)
JavaScript权威设计--事件冒泡,捕获,事件句柄,事件源,事件对象(简要学习笔记十八)

7.event与target

event:代表了包含了事件的所有状态。

target:触发事件的元素。

currenttarget:事件绑定的元素。

注意着两者的区别。

JavaScript权威设计--事件冒泡,捕获,事件句柄,事件源,事件对象(简要学习笔记十八)
JavaScript权威设计--事件冒泡,捕获,事件句柄,事件源,事件对象(简要学习笔记十八)

 转载:http://www.cnblogs.com/zqzjs/p/4878785.html

继续阅读