JS事件处理程序的3中方式
2017-07-07 11:15
441 查看
事件(Event)是用户和浏览器交互时,产生的现象。
1、事件冒泡
事件冒泡即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的节点(文档)。拿上面的图来说明,就是当点击text部分时,先由text处的元素接收,然后逐级传播至window,即执行6-7-8-9-10的过程。
2、事件捕获
事件捕获即事件最早由不太具体的节点接收,而最具体的节点最后接收到事件。同理,在上面的模型中,就是点击text部分时,先由window接收,然后逐级传播至text元素,即执行1-2-3-4-5的过程。
事件冒泡和事件捕获的流程与区别
点击子元素的时候,执行的先后顺序是:父节点捕获--子节点捕获--子节点冒泡--父节点冒泡。DOM2级事件规定事件包括三个阶段:
1、事件捕获阶段;
2、处于目标阶段;
3、事件冒泡阶段。
现在有3种方式注册事件处理程序:
HTML事件处理程序
DOM0级事件处理程序
DOM2级事件处理程序
DOM2也是对特定的对象添加事件处理程序,但是主要涉及到两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和 removeEventListener()。它们都接收三个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值(是否在捕获阶段处理事件)。
参考:JavaScript事件触发列表 -- http://www.mahaixiang.cn/js/647.html JavaScript事件处理程序的3种方式 -- http://www.mahaixiang.cn/js/694.html
1、事件冒泡
事件冒泡即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的节点(文档)。拿上面的图来说明,就是当点击text部分时,先由text处的元素接收,然后逐级传播至window,即执行6-7-8-9-10的过程。
2、事件捕获
事件捕获即事件最早由不太具体的节点接收,而最具体的节点最后接收到事件。同理,在上面的模型中,就是点击text部分时,先由window接收,然后逐级传播至text元素,即执行1-2-3-4-5的过程。
事件冒泡和事件捕获的流程与区别
<!doctype html> <html lang="en"> <head> <meta charset="UTF-"> <title>Document</title> <style> #p { width: px; height: px; border: px solid black; } #c { width: px; height: px; border: px solid red; } </style> </head> <body> <div id="p"> i am www.mahaixiang.cn <div id="c">i like www.mahaixiang.cn</div> </div> <script> var p = document.getElementById('p'); var c = document.getElementById('c'); c.addEventListener('click', function() { alert('子节点捕获') }, true); c.addEventListener('click', function() { alert('子节点冒泡') }, false); p.addEventListener('click', function() { alert('父节点捕获') }, true); p.addEventListener('click', function() { alert('父节点冒泡') }, false); </script> </body> </html>
点击子元素的时候,执行的先后顺序是:父节点捕获--子节点捕获--子节点冒泡--父节点冒泡。DOM2级事件规定事件包括三个阶段:
1、事件捕获阶段;
2、处于目标阶段;
3、事件冒泡阶段。
现在有3种方式注册事件处理程序:
HTML事件处理程序
<input id="btn" value="按钮" type="button" onclick="showmsg();"> <script> function showmsg(){ alert("HTML添加事件处理"); } </script>html代码和js的耦合性太强,如果哪一天想要改变js中showmsg,那么不但要再js中修改,还需要到html中修改。
DOM0级事件处理程序
<input id="btn" value="按钮" type="button"><script> var btn= document.getElementById("btn"); btn.onclick=function(){ lert("DOM级添加事件处理"); } btn.onclick=null;//如果想要删除btn的点击事件,将其置为null即可 </script>相对于HTML事件处理程序,DOM0级事件,html代码和js代码的耦合性已经大大降低。
DOM2级事件处理程序
DOM2也是对特定的对象添加事件处理程序,但是主要涉及到两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和 removeEventListener()。它们都接收三个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值(是否在捕获阶段处理事件)。
<input id="btn" value="按钮" type="button"> <script> var btn=document.getElementById("btn"); btn.addEventListener("click",showmsg,false);//这里我们把最后一个值置为false,即不在捕获阶段处理,一般来说冒泡处 理在各浏览器中兼容性较好 function showmsg(){ alert("DOM级添加事件处理程序"); } btn.removeEventListener("click",showmsg,false);//如果想要把这个事件删除,只需要传入同样的参数即可 </script>
参考:JavaScript事件触发列表 -- http://www.mahaixiang.cn/js/647.html JavaScript事件处理程序的3种方式 -- http://www.mahaixiang.cn/js/694.html
相关文章推荐
- 对象事件与处理程序代码进行关联的几种方式
- 牛腩购物11:完善用户注册 onblur 失去焦点 jquery ajax post方式使用 一般处理程序 判断用户是否存在 前台js的应用
- js跨浏览器事件处理程序
- JS事件处理程序
- JavaScript事件处理程序的3种方式
- js使用函数绑定技术改变事件处理程序的作用域
- JS注册/移除事件处理程序(ExtJS应用程序设计实战)
- js事件处理的3种方式的分析
- 【js学习笔记-091】-----------注册事件处理程序
- 浅谈 Javascript 事件处理程序的几种方式
- 浅谈Javascript事件处理程序的几种方式
- js 事件处理程序
- 浅谈Javascript事件处理程序的几种方式
- js跨浏览器事件对象、事件处理程序
- 以编程方式向 ASP.NET 控件添加客户端事件处理程序--TextBox.Attributes.Add()
- 浅谈Javascript事件处理程序的几种方式
- 【js学习笔记-092】-----事件处理程序的调用
- js 事件处理程序
- JS笔记【归纳】:DOM中的事件处理程序
- js事件---事件处理程序