[toc] ## js事件详解 >#### 事件流 1. 事件流: 描述的是在页面中接受事件的顺序 2. 事件冒泡: 由最具体的元素接收, 然后逐级向上传播至最不具体的元素的节点(文档) 3. 事件捕获 最不具体的节点先接收事件，而最具体的节点应该是最后接收事件 >#### 事件处理 1. HTML事件处理: 直接添加到HTML结构中 ``` <button id="btn" onclick="demo()">按钮</button> <script> function demo(){ alert("html事件处理"); } </script> ``` 2. DOM0级事件处理 把一个函数赋值给一个事件处理程序属性 ``` <button id="btn">按钮</button> <script> var btn = document.getElementById("btn"); btn.onclick = function(){alert("DOM事件0级处理程序")}; // btn.onclick = null; 清除事件 </script> ``` 3. DOM2级事件处理 addEventListener("事件名", "事件处理函数", "布尔值"); true: 事件捕获 false: 事件冒泡 removeEventListener(); ``` <button id="btn">按钮</button> <script> var btn = document.getElementById("btn"); btn.addEventListener("click", demo1); btn.addEventListener("click", demo2); //移除: btn.removeEventListener("click", demo1); function demo1(){alert("DOM2级事件处理程序1")} function demo2(){alert("DOM2级事件处理程序2")} </script> ``` 4. IE事件处理程序 attachEvent detachEvent ``` <script> var btn = document.getElementById("btn"); if(btn.addEventListener){ btn.addEventListener("click", demo); }else if(btn.attachEvent){ btn.attachEvent("onclick", demoie); }else{ btn.onclick = demoother(); } function demo(){alert("DOM2级事件处理");} function demoie(){alert("DOM2级事件处理IE9以下");} function demoother(){alert("DOM基本事件处理");} </script> ``` >#### 事件对象 1. 事件对象: 在触发DOM事件的时候都会产生一个对象 2. 事件对象event: 1): type: 获取事件类型 ``` <button id="btn">按钮</button> <script> var btn = document.getElementById("btn").addEventListener("click", showType); function showType(event){ alert(event.type); } </script> ``` 2): target: 获取事件目标 3): stopPropagation(): 阻止事件冒泡 ``` <div id="div"><button id="btn">按钮</button></div> <script> document.getElementById("div").addEventListener("click", show); document.getElementById("btn").addEventListener("click", show); function show(){ alert("事件冒泡"); event.stopPropagation(); //阻止事件冒泡 } </script> ``` 4): 阻止事件默认行为, 如a标签的链接 * preventDefault()方法，但要给事件函数添加event参数 * return false(); * 给href加上`javascript:void(0)`