事件定义方式与区别
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>document</title> <style> .contianer{ width: 600px; background-color: blueviolet; } .box1{ height: 300px; width: 500px; background-color: royalblue; } .box2{ height: 100px; width: 300px; background-color: yellowgreen; } </style></head><body id="body"> <div id="contianer" class="contianer"> <div id="box1" class="box1"> <button onclick="btnClick(this)">html事件</button> <button id="btn0">DOM0事件</button> <button id="btn2">DOM2事件</button> <button id="btn3">双击事件</button> <a id="a" href="https://baidu.com">a标签</a> </div> <div id="box2" class="box2"> <span>box2</span> </div> </div> <script> // html事件，缺点：js和html不分开，不推荐这种用法 function btnClick(e){ e.innerHTML = "点击了html事件"; console.log("html事件"); var event = window.event || arguments.callee.caller.arguments[0]; event.stopPropagation(); }; // dom0事件，优点：写起来方便，缺点：事件会被覆盖 var btn0 = document.getElementById("btn0"); btn0.onclick=function(e){ e.target.innerHTML = "点击了dom0事件"; console.log("dom0事件"); e.stopPropagation(); }; btn0.onclick=function(e){ e.target.innerHTML = "点击了dom0事件"; console.log("dom0事件被覆盖了"); e.stopPropagation(); }; // dom2事件，优点：事件不是被覆盖，缺点：写起来麻烦 var btn2 = document.getElementById("btn2"); btn2.addEventListener( 'click',function(e){ e.target.innerHTML = "点击了dom2事件"; console.log("dom2事件1"); e.stopPropagation(); } ); btn2.addEventListener( 'click',function(e){ e.target.innerHTML = "点击了dom2事件"; console.log("dom2事件2"); e.stopPropagation(); } ); //双击事件 var btn3 = document.getElementById("btn3"); btn3.ondblclick = function(e){ e.target.innerHTML = "双击了"; console.log("双击事件"); e.stopPropagation(); }; // 阻止标签默认行为事件 var a = document.getElementById("a"); a.onclick = function(e){ e.target.innerHTML = "点击了a标签"; console.log("a标签事件"); //阻止a标签的默认跳转 e.preventDefault(); e.stopPropagation(); } // 阻止事件冒泡 var contianer = document.getElementById("contianer"); var box1 = document.getElementById("box1"); var box2 = document.getElementById("box2"); contianer.onclick = function(e){ console.log("点击了contianer"); }; box1.onclick = function(e){ console.log("点击了box1"); //阻止事件冒泡，不阻止的话点击box1默认会同时触发contianer的点击事件 e.stopPropagation(); }; box2.onclick = function(e){ console.log("点击了box2"); e.stopPropagation(); }; </script></body></html>
事件委托(代理)
由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听数统一处理多个子元素的事件。这种方法也叫事件委托(代理，delegation)：
<body id="body"> <ul id="ul"> <li>a</li> <li>b</li> <li>c</li> </ul> <script> var ul = document.getElementById("ul"); ul.onclick = function(e){ if(e.target.tagName === "LI"){ console.log(e.target.innerHTML); } }; </script></body>
1、HTML DOM 事件
DOM： 指明使用的 DOM 属性级别。
2、鼠标事件
3、键盘事件
4、框架/对象（Frame/Object）事件
5、表单事件
