js事件处理、事件对象

事件类型分类：

1 添加在html结构中的事件

<div id="div1" onclick="alert('append click event in html')"> </div>

点击div1之后弹出 append click event in html；其实在html结构中添加的事件也属于dom0级事件。

2 dom0级事件处理

<div id="div1"> </div>
<script>
    var dom1 = document.getElementById('div1');
    dom1.onclick = function(){alert(' first dom0 ')};
    dom1.onclick = function(){alert(' second dom0 ')};
</script>

点击div1之后只弹出 second dom0；说明dom0级事件后面赋值的事件会覆盖掉前面的

如果在div中在加 onclick="alert('append click event in html'), 代码如下：

<div id="div1" onclick="alert('append click event in html')"> </div>
<script>
    var dom1 = document.getElementById('div1');
    dom1.onclick = function(){alert(' first dom0 ')};
    dom1.onclick = function(){alert(' second dom0 ')};
</script>

点击div后 仍然只弹出second dom0， 说明在html中添加的点击事件处理程序也被覆盖。

实际上 dom1.onclick 等价于html结构中div标签中的onclick=""; 可以把onclick看成dom元素对象的一个属性 dom1{ id："1", onclick：function(){ ... } }

3 dom2级事件处理

dom.addEventListener（“事件名”，“事件处理程序”，“布尔值”）

布尔值表示该事件的响应顺序,默认值为false。

true：事件捕获：表示在捕获阶段调用事件处理程序。

false：事件冒泡：表示在冒泡阶段调用事件处理程序。
事件传递有两种方式：冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。

 

关于事件冒泡和捕获在后面再举出实例代码。

使用addEventListener添加事件不会被覆盖也不会覆盖dom0级事件，如下：

<div id="div1" onclick="alert('append click event in html')"> </div>
<script>
    var dom1 = document.getElementById('div1');
    var handle = function () {
        alert('dom2 event handle');
    };
    dom1.onclick = function(){alert(' first dom0 ')};
    dom1.onclick = function(){alert(' second dom0 ')};
    dom1.addEventListener("click", function(){alert(' first dom2 ')}, false);
    dom1.addEventListener("click", handle, false);
</script>

点击div1时弹出 second dom0、first dom2 、dom2 event handle ，dom0级绑定的最后一个事件覆盖了前面所有的dom0级事件，而绑定的两个dom2级事件都存在,并且先执行dom0级事件在执行dom2级事件。

 

使用removeEventListener移除事件，传入的参数与添加处理程序时addEventListener使用的参数相同。

这也意味着事件处理程序为匿名函数的无法移除，如下所示：

<div> </div>
<script>
    var dom1 = document.getElementById('div1');
    var handle = function () {
        alert('event handle');
    };
    dom1.addEventListener("click", function(){alert(' first dom2 ')}, false);
    dom1.addEventListener("click", function(){alert(' second dom2 ')}, false);
    dom1.addEventListener("click", handle, false);
    dom1.removeEventListener("click", handle, false);
    dom1.removeEventListener("click", function(){alert(' second dom2 ')}, false);
</script>

点击div1依次弹出 first dom2 、second dom2

关于事件冒泡和捕获的代码实例：

<div id="div1"><div id="div2"><div id="div3"><div id="div4"></div></div></div></div>
<script>
    var html = document.getElementsByTagName('html')[0];
    var body = document.getElementsByTagName('body')[0];
    var dom1 = document.getElementById('div1');
    var dom2 = document.getElementById('div2');
    var dom3 = document.getElementById('div3');
    var dom4 = document.getElementById('div4');
    window.addEventListener("click", function(){alert('window')}, false);
    document.addEventListener("click", function(){alert('document')}, true);
    html.addEventListener("click", function(){alert('html')}, false);
    body.addEventListener("click", function(){alert('body')}, true);
    dom1.addEventListener("click", function(){alert('div1')}, false);
    dom2.addEventListener("click", function(){alert('div2')}, true);
    dom3.addEventListener("click", function(){alert('div3')}, false);
    dom4.addEventListener("click", function(){alert('div4')}, false);
    // addEventListen 添加的第三个参数true则是事件捕获,不添加或false则为事件冒泡， 由事件源dom4元素 --> 父元素dom3 --> 爷爷元素dom2 --> ... --> body --> html --> document --> window  执行事件处理程序
    // 若从事件源dom4元素到window 有存在事件捕获的绑定事件 ，则事件从window到事件源dom4 依次执行完设置为true的捕获事件 在从事件源dom到window执行完其他未设置为true的冒泡事件。
    //如上述代码 依次弹出 document body div2 div4 div3 div1 html window
</script>

注意：IE8及更早IE版本，Opera7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。

对于这类浏览器版本可以使用 attachEvent() 方法来添加事件，detachEvent() 方法来移除事件句柄

 

事件对象：在触发dom事件的时候都会产生一个事件对象

 

事件对象event：

1） type：获取事件类型

2） target：获取事件目标

3） stopPropagation（）：阻止事件冒泡

4） preventDefault（）：阻止事件默认行为

<div id="div1"> </div>
<script>
    var dom1 = document.getElementById('div1');
    dom1.addEventListener("click",function(event){console.log(event.type);console.log(event.target)})
</script>

 console.log 输出： click , <div id="div1"> </div>

<div><a></a></div>
<script>
    dom_div.addEventListener("click",fun_div)
    dom_a.addEventListener("click",fun_a)
</script>

点击a时触发fun_a 由于事件冒泡再触发fun_div  

在fun_a的末尾添加event.stopPropagation（）：阻止事件冒泡 则div中的click事件fun_div无效

 

<a href="http://www.baidu.com"></a>

dom_1.addEventListener("click",function(event){}) 点击之后a会跳转到百度 在回调函数function中添加event.preventDefault（）;阻止事件默认行为 点击之后不会跳转