㈠事件流
▶事件：是文档和浏览器窗口中发生的，特定的交互瞬间。
▶事件流：描述的是从页面中接受事件的顺序
⑴DOM事件冒泡
定义：事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接受，然后逐级向上传播至最不具体的那个节点（文档）。
具体讲解：
代码：
<html> <head> <title>事件流<title> <meta charset="utf-8"></head> <body> <div id="box"> <input type="button" value="按钮" id="btn"> </div> </body> </html>
说明：点击按钮，浏览器就会认为：你点按钮的同时，也点击了包含这个按钮的这个容器（“div”），那么你点了这个div以后，它又认为你点了整个HTML了，那么你点了整个HTML，它又认为你点了整个document。也就是说：click事件在input上触发，那么它会一级一级往上冒，最后直到冒到document。
⑵DOM事件捕获
定义：不太具体的节点应该更早接受到事件，而最具体的节点最后接受到事件。
具体讲解：
代码：
<html> <head> <title>事件流<title> <meta charset="utf-8"></head> <body> <div id="box"> <input type="button" value="按钮" id="btn"> </div> </body> </html>
说明：用事件捕获的思想：它认为最先把事件用document接收了，然后让HTML接收了，然后又让body接收，然后又让div接收了，最后才被input接收了。
㈡事件处理程序
⑴ HTML事件处理程序
含义：你的事件直接加在HTML结构里
具体解释：
代码：
<html> <head> <title>事件流<title> <meta charset="utf-8"></head> <body> <div id="box"> <input type="button" value="按钮" id="btn" onclick="alert('hello')"> </div> </body> </html>
说明：直接将onclick事件加在input标签上，而且是在HTML结构里
注：并不是所有要执行的JS代码都应该写在这个地方，也可以把它封装在这个函数内
代码：
<html> <head> <title>事件流<title> <meta charset="utf-8"></head> <body> <div id="box"> <input type="button" value="按钮" id="btn" onclick="showMessage()"> </div> <script> function showMessage(){ alert('hello world!'); } </script> </body> </html>
HTML事件的缺点：HTML和JS代码紧密的耦合在一起
具体解释：如果要更换事件处理程序，就要修改两个地方：HTML代码和JS函数
⑵ DOM0级事件处理程序
这种方法是一种较为传统的方式：把一个函数赋值给一个事件的处理程序属性
这是用的比较多的方法，原因是简单，跨浏览器的优势
代码示例：
<html> <head> <title>事件流<title> <meta charset="utf-8"></head> <body> <div id="box"> <input type="button" value="按钮" id="btn" onclick="showMes()"> <input type="button" value="按钮2" id="btn2" > </div> <script> function showMes(){ alert('hello world!'); } var btn2=document.getElementById('btn2'); //取得btn2按钮对象 btn2.onclick=function(){ //给btn2添加onclick属性 alert('这是通过DOM0级添加的事件！')； } btn2.onclick=null; //删除onclick属性 </script> </body> </html>
优点：1）没有HTML事件的缺点
2）可以给一个元素上添加多个事件处理程序，这些事件处理程序会按顺序执行。
⑶ DOM2级事件处理程序
①DOM2级事件定义了两个方法：
用于处理指定和删除事件处理程序的操作
addEventListener() 和 removeEventListener()。
②接收三个参数：
1) 要处理的事件名
2) 作为事件处理程序的函数
3) 布尔值(true表示在捕获阶段调用事件处理程序;false表示在冒泡阶段调用事件处理程序)
③代码示例:
<html> <head> <title>事件流<title> <meta charset="utf-8"></head> <body> <div id="box"> <input type="button" value="按钮" id="btn" onclick="showMes()"> <input type="button" value="按钮2" id="btn2" > <input type="button" value="按钮3" id="btn3" > </div> <script> function showMes(){ alert('hello world!'); } var btn2=document.getElementById('btn2'); var btn3=document.getElementById('btn3'); btn2.onclick=function(){ alert('这是通过DOM0级添加的事件！')； } btn2.onclick=null; //DOM2级事件 btn3.addEventListener('onclick',showMes,false); //给btn3添加一个事件监听程序 兼容各种浏览器 //删除事件 btn3.removeEventListener('onclick',showMes,false); </script> </body> </html>
④优点：可以给一个元素上添加多个事件处理程序，这些事件处理程序会按顺序执行。
代码示例：
<html> <head> <title>事件流<title> <meta charset="utf-8"></head> <body> <div id="box"> <input type="button" value="按钮" id="btn" onclick="showMes()"> <input type="button" value="按钮2" id="btn2" > <input type="button" value="按钮3" id="btn3" > </div> <script> function showMes(){ alert('hello world!'); } var btn2=document.getElementById('btn2'); var btn3=document.getElementById('btn3'); btn2.onclick=function(){ alert('这是通过DOM0级添加的事件！')； } btn2.onclick=null; //DOM2级事件 btn3.addEventListener('onclick',showMes,false); btn3.addEventListener('onclick',function(){ alert(this.value);引用被触发的元素 },false); </script> </body> </html>
注意：在IE浏览器中不起作用。
⑷IE事件处理程序
attachEvent()添加事件
detachEvent()删除事件
②接收相同的两个参数：
事件处理程序的名称和事件处理程序的函数
③不使用第三个参数的原因：IE8及以更早的浏览器版本只支持事件冒泡！
代码示例：
<html> <head> <title>事件流<title> <meta charset="utf-8"></head> <body> <div id="box"> <input type="button" value="按钮" id="btn" onclick="showMes()"> <input type="button" value="按钮2" id="btn2" > <input type="button" value="按钮3" id="btn3" > </div> <script> function showMes(){ alert('hello world!'); } var btn2=document.getElementById('btn2'); var btn3=document.getElementById('btn3'); btn2.onclick=function(){ alert('这是通过DOM0级添加的事件！')； } btn2.onclick=null; //IE事件处理程序 btn3.attachEvent('onclick',showMes); btn3.detachEvent('onclick',showMes); </script> </body> </html>
注意：只在IE浏览器和Opera浏览器中使用
⑸跨浏览器的事件处理程序
①方法：恰当的使用能力检测
②问题：如何实现跨浏览器解决事件处理程序？
通过将增加和删除封装在一个对象里面，封装了两个方法，每个方法都进行了能力检测，你支持这个方法，就用这个方法，不支持这个方法，就用所支持的方法。
③代码示例：
<html> <head> <title>事件流<title> <meta charset="utf-8"></head> <body> <div id="box"> <input type="button" value="按钮" id="btn" onclick="showMes()"> <input type="button" value="按钮2" id="btn2" > <input type="button" value="按钮3" id="btn3" > </div> <script> function showMes(){ alert('hello world!'); } var btn2=document.getElementById('btn2'); var btn3=document.getElementById('btn3'); btn2.onclick=function(){ alert('这是通过DOM0级添加的事件！')； } btn2.onclick=null; //跨浏览器事件处理程序 vareventUtil={ //添加句柄 addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.attachEvent){ element.attachEvent('on'+type,handler); }else{ element['on'+type]=handler; } }, //删除句柄 removeHandler:function(element,type,handler){ if(element.removeEventListener){ element.removeEventListener(type,handler,false); }else if(element.detachEvent){ element.detachEvent('on'+type,handler); }else{ element['on'+type]=null; } } } eventUtil.addHandler(btn3,'click',showMes); eventUtil.removeHandler(btn3,'click',showMes); </script> </body> </html>