js事件处理事件对象

Posted 2020-08-20 peakleo

事件类型分类：

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级事件都存在。

 

使用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

 

注意： 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（）;阻止事件默认行为 点击之后不会跳转