1、事件传播机制、阻止传播、取消默认事件、事件代理
(1)事件传播机制
当事件发生在某个文档节点上时(即事件目标),目标的事件处理程序就会被触发。此外目标的每个祖先节点也有机会处理该事件。
- 2级DOM的事件传播包含三个阶段:
捕捉阶段(capturing),事件从顶级文档树节点一级一级向下遍历,直到到达该事件的目标节点。
到达事件的目标节点,执行目标节点的时间处理程序。
事件起泡(bubbling),事件从目标节点一级一级向上上溯,直到顶级文档树节点。 - 相应的,2级DOM通过下面的两个函数给节点对象添加和删除事件处理函数。
addEventListener(eventType, handler, propagate);
removeEventListener(eventType, handler, propagate);
三个参数意思分别如下:
eventType: 即事件类型(不加on)。比如:"click"。
handler: 事件处理函数。传入参数即为事件对象event。
propagate: 是否只执行捕获和目标节点两个阶段。true的话,只执行1,2两个阶段;false的话,只指向2,3两个阶段。 - IE的事件传播只包含上边的2和3两个阶段
相应的,IE通过下面两个函数给节点对象添加和删除事件处理函数。
attachEvent(eventType, handler);
detachEvent(eventType, handler);
参数意思同2级DOM对应的函数参数
(2)阻止传播,取消默认事件
- DOM浏览器
阻止冒泡e.stopPropagation();
阻止默认事件event.preventDefault() - IE浏览器
阻止冒泡e.cancelBubble = true;
阻止默认事件event.returnValue = false; - 使用 onmouseenter、onmouseleave等事件默认阻止冒泡
(3)事件代理
- 事件代理就是:当网页中需要触发事件的对象比较多的时候,为了避免内存泄漏,我们把事件委托到其父对象上,借助事件冒泡机制,可以将事件委托到body,document等元素上,这样等于一个页面就只有一个事件触发,避免直接把事件添加到多个对象上。
- 事件代理是利用事件的冒泡原理来实现的,就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一个节点树,div>ul>li>a;比如给最里面的a加一个click点击事件,那么这个事件就会一层一层的往外执行,执行顺序a>li>ul>div,有这样一个机制,那么我们给最外面的div加点击事件,那么里面的ul,li,a做点击事件的时候,都会冒泡到最外层的div上,所以都会触发,这就是事件代理,委托它们父级代为执行事件。
2、演示事件传播的过程,演示阻止传播的效果
- IE事件传播,即事件冒泡,由内而外依次传播
如下图点击' .child '时输出的结果
在' .patent '上添加阻止冒泡,结果如下:
测试02.png代码:http://js.jirengu.com/kikec/2/edit?html,js,console,output
- DOM2事件传播,即事件先捕获、再冒泡
如下图点击' .child '时输出的结果
在' .patent '上添加阻止冒泡,结果如下:
测试04.png在' .patent '上添加阻止捕获,结果如下:
测试05.png代码:http://js.jirengu.com/bimat/1/edit?html,js,console,output
3、实现如下页面:http://book.jirengu.com/fe/code/projects/HungoouRadio/login.html
1.不用事件代理实现的,代码比较多:http://js.jirengu.com/kotep
2.抽空再用事件代理做一遍:
网友评论