首页 > 代码库 > Dom0级事件
Dom0级事件
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type ="text/css"> div { border:1px solid #0094ff; width:50%; padding:50px; } </style> <script src="http://www.mamicode.com/Scripts/jquery-1.8.2.min.js"></script> <script type ="text/javascript"> $(function () { //1 DOM 0级事件特点 //1.1相同domu、元素的相同属性 只能注册一个方法，如果注册多个，则会被后面的覆盖 // 本质原因：onclick等0级事件，本质就是dom对象的一个属性（方法类型）如果多次赋值，则会覆盖前面的 document.getElementById("btnO").onclick = function () { alert("我是0级事件"); }; document.getElementById("btnO").onclick = function () { alert("111111111111"); }; //1.2 使用的是事件冒泡：由内往外 document.getElementById("divFather").onclick = function () { alert("divFather"); }; document.getElementById("divSon").onclick = function () { alert("divSon"); }; //2 dom2级事件特点： //2.1 注册的方式使用不一样 //2.2 注册事件方法时 可以选择 捕获阶段事件(true)，也可以选择冒泡阶段事件（false） 老式IE浏览器要加onclick document.getElementById("btn2").attachEvent("onclick", test2); document.getElementById("btn2").detachEvent(test2);//老式IE浏览器的移除方法IE7及IE7以下 document.getElementById("btn2").addEventListener("click", function () { alert("btn2"); }, true); document.getElementById("div1").addEventListener("click", function () { alert("div1"); }, true); document.getElementById("div2").addEventListener("click", function () { alert("div2"); }, true); //2.3 2 级dom事件相同元素的相同事件 可以注册多个方法，而且可以动态移除指定方法 document.getElementById("btn2").addEventListener("click", test2, false);//如果要移除方法，注册方法必须要以这种方式 //移除方法 document.getElementById("btn2").removeEventListener("click",test2); }); //JQ所有方法都是使用二级事件 function test2() { } </script></head><body> 0级事件 会将 方法直接设置给dom对象对应的事件属性（如 ：onclick） <div id="divFather" > <div id="divSon"> <input type ="button" value ="http://www.mamicode.com/Dom0级事件" id ="btnO"/> </div> </div> 2级事件 不会将方法设置给dom对象的事件属性，而是使用了另外一套机制来保存事件方法 <div id="div1" > <div id="div2"> <input type ="button" value ="http://www.mamicode.com/Dom0级事件" id ="btn2"/> </div> </div> </body></html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。