JavaScript - DOM -事件

3 事件

3.1 事件监听

① 给元素监听事件的三种方式

第一种: 把事件作为HTML标签的属性

<button onclick="code..."></button>

第二种: 把事件作为元素对象的方法

元素对象.onclick = function() {
  	code ...  
};

第三种:使用 addEventListener 方法

元素对象.addEventListener('click', function() {
   	code ... 
});

addEventListener 方式具有如下特点:

  1. 可以给同一个元素的同一个事件绑定多个回调函数,触发事件多个回调函数会按照监听顺序执行
  2. 该方法的第三个参数可以设置事件在捕获阶段还是冒泡阶段触发
② 解除事件的监听

如果是第一种方式和第二种方式监听的事件:

元素对象.on事件名 = null;

如果是第三种方式监听的事件:

元素对象.removeEventListener('事件名', 函数名)

3.2 事件流

一个完整的事件触发流程会经历三个阶段:

捕获阶段: 从 window 到 document 到 html 一直到目标元素。(目标元素: 具体的发生了事件动作且不可再分的元素)

目标阶段: 找到了目标与元素,标记着捕获阶段的结束,冒泡阶段的开始。

冒泡阶段: 从目标元素开始层层向上冒泡,冒到 body、html、document、window。

事件的回调函数在哪个阶段被执行?

事件的回调函数在冒泡阶段被执行,我们会说事件默认在冒泡阶段触发。

如何设置事件在哪个阶段触发?

addEventListener 第三个参数设置为 true 表示事件在捕获阶段触发,false 表示在冒泡阶段触发,默认值 false。

如果是第一种和第二种方式监听的事件,在冒泡阶段触发且无法修改。

3.3 事件回调函数中 this 的指向

  1. 使用第二种方式和第三种监听事件,事件回调函数中 this 的值是触发事件的元素。

  2. 使用第一种方式监听事件,属性值里面可以直接使用 this ,值是该元素

    <button onclick="console.log(this)">
    
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值