DOM事件探秘（能力检测：通过代码检测浏览器能支持哪一种就用对应的哪一种）
事件流分为两种：事件冒泡、事件捕获。
事件冒泡：事件最开始由最具体的元素接收（文档中嵌套最深的节点），逐级向上传送到最不具体的节点（文档）。
事件捕获：事件最开始由不太具体的节点接收（文档），逐级向内直到最具体的节点接收时间。
1、HTML事件处理程序：在HTML代码中嵌套CSS、JS代码。
缺点：HTML与JS耦合度比较高，不容易修改，及后期维护。
2、DOM0级事件处理事件 DOM2级事件处理事件
优点：DOM 0与DOM 2 是可以给元素节点添加多可事件。
事件处理程序
注意：通过DOM 0级添加的事件用null清楚。
通过DOM 2级添加的事件（addEventLIstener（））只能通过removeEventListener（）事件删除。
IE事件处理程序及跨浏览器解决
IE事件处理程序及跨浏览器解决
本节相关代码：
<body> <div> <input type="button" id="btn1" value="按钮1" onclick="aa1()"> <input type="button" id="btn2" value="按钮2" > <input type="button" id="btn3" value="按钮3" > <input type="button" id="btn4" value="按钮4" > </div> <script type="text/javascript"> function aa1() { alert('Hello World!'); } var btn2=document.getElementById("btn2"); var btn3=document.getElementById("btn3"); var btn4=document.getElementById("btn4");// btn2.onclick=function () {// alert('这是通过DOM 0级事件添加的事件！');// };// //btn2.onclick=null;//删除事件！// //DOM 2级事件处理程序// btn3.addEventListener('click',aa1,false);// //btn3.removeEventListener('click',aa1,false);// btn4.attachEvent('onclick',aa1);// btn4.detachEvent('onclick',aa1); //添加时间 var eventUnit={ addEvent:function (elemnt,type,handler) { if (elemnt.addEventListener){ elemnt.addEventListener(type,handler,false); }else if (elemnt.attachEvent){ elemnt.attachEvent('on'+type,handler); }else{ elemnt['on'+type]=handler;//element.onclick==element['onclick'] } }, //删除句柄 removeEvent:function (elemnt,type,handler) { if (elemnt.removeEvent){ elemnt.removeEventListener(type,handler,false); }else if (elemnt.detachEvent){ elemnt.detachEvent('on'+type,handler); }else{ elemnt['on'+type]=null;//element.onclick==element['onclick'] } } } eventUnit.addEvent(btn3,'click',aa1); </script></body>
网友评论