DOM：事件高级-注册事件、删除事件、事件流、事件对象、事件委托

曹莓奶昔

已于 2022-05-10 09:00:17 修改

阅读量593

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端 vscode

于 2022-05-10 00:12:00 首次发布

本文链接：https://blog.csdn.net/weixin_49555741/article/details/124659126

版权

JavaScript 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

1. 注册事件（绑定事件）

1.1 概述

1.2 addEventListener 事件监听方式

1.3 attchEvent事件监听（兼顾ie9以下浏览器）

5.1 stopPropagation()

5.2 e.canvelBubble

5.2.1 e.canvelBubble兼容问题解决

6. 事件委托（代理、委派）

7. 常用的鼠标事件

7.1 禁止鼠标右键菜单和禁止鼠标选中（selectstart）

1. 注册事件（绑定事件）

1.1 概述

给元素添加事件称，注册事件

注册事件有两种方法：传统方式和方法监听注册方法

传统注册方式

利用on开头
<button οnclick="alert(hi~) > </button>
btn.οnclick=function(){}
特点：注册事件的唯一性
同一元素同一事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数

方法监听注册方法

w3c的标准推荐方法
addEventListener（）是一个方法
ie9 前不兼容，可用attachEvent（）代替

1.2 addEventListener 事件监听方式

该方法将指定监听器注册到目标对象上，当事件触发指定的事件时，就会执行事件处理函数

evenTarget.addEventListener(type,lisstener[,useCapure])

该方法接收三个参数：

type：事件类型字符串，click、mouseover，注意不用on
listen：事件处理函数，事件发生时，会调用这个函数
useCapture：可选参数，是一个布尔值默认false
同一个元素，同一个事件可以添加多个监听器（事件处理程序）

1.3 attchEvent事件监听（兼顾ie9以下浏览器）

evenTarget.attchEvent(eventNameWithon，callback)

eventNameWithon：事件类型字符串，onclick，onmouseover，带on
callback：事件处理函数，当目标触发事件时回调函数被调用

1.4 注册事件兼容性解决方案

兼容处理的原则：兼顾大多数的浏览器

function addEventListener(element, eventName, fn) {
// 判断当前浏览器是否支持 addEventListener 方法
if (element.addEventListener) {
element.addEventListener(eventName, fn); //第三个参数默认为false
} else if (element.attachEvent) {
element.attachEvent("on" + eventName, fn);
} else {
// 相当于element.onclick = fn;
element["on" + eventName] = fn;
}
}

2. 删除事件（解绑事件）

2.1 删除事件两方式

1.传统删除方式

eventTarget.οnclick=null;

2. 方法监听删除方式

evenTarget.removeEventListener(type,lisstener[,useCapure])
evenTarget.detachEvent(eventNameWithon，callback)

2.2 删除事件兼容性解决方案

function removeEventListener(element, eventName, fn) {
  if (element.removeEventListener) {
    element.removeEventListener(eventName, fn);
  } else if (element.detachEvent) {
    element.detachEvent('on' + eventName, fn);
  } else {
    element['on' + eventName] = null;
  }
}

3. DOM 事件流

3.1 概述

事件流是从页面中接收事件的顺序

事件发生时在元素节点按照特定的顺序传播，这个传播过程叫DOM事件流

DOM 事件流分三个阶段：捕获阶段、当前目标阶段、冒泡阶段

事件冒泡：ie最早提出，事件开始由具体元素接收，逐级向上级传播到DOM最顶层节点的过程
事件捕获：网景最早提出，DOM最顶层节点开始，逐级向下传播到元素接收的过程

3.2 事件流代码验证

js只能执行捕获盒子冒泡其中一个阶段
onclick和attacEvent 只能得到冒泡阶段
evenTarget.removeEventListener(type,lisstener[,useCapure]) 第三个参数为true，表示捕获阶段调用事件处理程序；为false（非默认）表示冒泡阶段调用事件处理程序

在实际开发中，很少用捕获阶段，更常用事件冒泡

有些事件是没有冒泡的：onblu、onfocus、onmouseenter、onmouseleave

4. 事件对象（重点）

event对象代表事件的状态，如键盘状态、鼠标状态、鼠标按键状态等
event是一个事件对象，写到侦听函数的（）里面，当做形参来看
事件对象只有事件才存在，是系统自动创建，不需要传递参数
事件对象是我们一系列数据的集合，如鼠标事件，键盘事件
这个时间对象可以自己命名，如event、evt、e
有兼容问题，ie678通过 window.event

4.1 事件对象常见的属性和方法

事件对象属性方法	说明
e.target	返回触发事件的对象标准
e.scrElement	返回触发事件的对象非标准，ie6-8使用
e.type	返回事件类型如 click 不带on
e.canvelBubble	阻止冒泡非标准，ie6-8使用，如不让链接跳转
e. returnVlue	阻止默认事件（默认行为）非标准，如不让链接跳转
e. prevenDefault()	阻止默认事件（默认行为）标准，如不让链接跳转
e. stopPropagation()	阻止冒泡标准

阻止默认行为可以用在事件里面 return false，无兼容问题；但是后面的代码无法执行

target 和 this 返回的区别：

target返回触发事件的对象（点击对象）
this返回绑定事件的对象（绑定对象）
与this 相似属性：currentTarget，ie678不兼容

5. 阻止事件冒泡（面试常问）

事件冒泡：开始时由具体元素接收，逐渐向上传播到DOM的最顶层节点

5.1 stopPropagation()

是标准，有兼容性问题

5.2 e.canvelBubble

兼顾ie6-8

5.2.1 e.canvelBubble兼容问题解决

if (e && e.stopPropagation) {
                e.stopPropagation(); //ie678 不适用
            } else {
                window.event.cancelBubble = true; // 适用于 ie 678 
            }

6. 事件委托（代理、委派）

事件委托称事件代理，在 jQuery里称事件委派

事件委托原理（面试常问）：

不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响每个子节点

事件委托作用：只操作了一次DOM，提高了程序的性能

7. 常用的鼠标事件

7.1 禁止鼠标右键菜单和禁止鼠标选中（selectstart）

contextmenu 主要控制何时显示上下文菜单，主要是用于开发者取消默认的上下文菜单

        document.addEventListener('contextmenu',function(e){
            e.preventDefault();
        })

        p.addEventListener('selectstart', function (e) {
            e.preventDefault();
        })

7.2 鼠标事件对象

event对象代表的是事件的状态，鼠标事件对象mouseEvent和键盘事件对象 keyboardEvent

获得鼠标在页面中的坐标：

在可视区的坐标：e.clientY；e.clientX 属性

在页面文档的坐标：e.pageX；e.pageY 属性（ie9以上支持），用的较多