762-768---DOM事件高级（注册事件，删除事件，DOM事件流，事件对象）

香甜的甲基橙

已于 2022-05-05 18:09:34 修改

阅读量436

点赞数 1

分类专栏： web前端基础学习笔记 JavaScript 文章标签： javascript 前端

于 2022-04-26 22:29:13 首次发布

本文链接：https://blog.csdn.net/weixin_51249285/article/details/124438984

版权

web前端基础学习笔记同时被 2 个专栏收录

68 篇文章 13 订阅

订阅专栏

JavaScript

41 篇文章 3 订阅

订阅专栏

文章目录

事件高级

事件高级

目标：

能够写出元素注册事件的两种方式
能够说出删除事件的两种方式
能够说出DOM事件流的三个阶段
能够利用事件对象完成跟随鼠标案例
能够封装阻止冒泡的兼容性函数
能够说出事件委托的原理
能够说出常用的鼠标和键盘事件

1 注册事件（绑定事件）

1.1 注册事件概述

给元素添加事件,称为注册事件或者绑定事件。
注册事件有两种方式 : 传统方式和方法监听注册方式

传统注册方式

利用on开头的事件onclick
< button οnclick=“ alert(‘hi~’)" > < /button>
btn.onclick = function() {}
特点 : 注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数 ,最后注册的处理函数将会覆盖前面注册的处理函数（为了解决这个问题，所以有了方法监听注册方式）

方法监听注册方式

w3c标准推荐方式
addEventListener()它是一一个方法
IE9之前的IE不支持此方法 , 可使用attachEvent()代替
特点 : 同一个元素同一个事件可以注册多个监听器
按注册顺序依次执行

1.2 addEventListener 事件监听方式

eventTarget.addEventListener (type, listener[ , useCapture])

eventTarget.addEventListener ()方法将指定的监听器注册到eventTarget (目标对象)上,当该对象触发指定的事件时 , 就会执行事件处理函数。
该方法接收三个参数 :

type : 事件类型字符串, 比如click、 mouseover ,注意这里不要带on
listener : 事件处理函数, 事件发生时, 会调用该监听函数
useCapture : 可选参数, 是一个布尔值,默认是false。学完DOM事件流后 , 再进一步学习

addEventListener 存在兼容性问题，IE9之前的IE不支持此方法 , 可使用attachEvent()代替

1.3 attachEvent 事件监听方式（了解）

⚠非标准
该特性是非标准的，请尽量不要在生产环境中使用它!

eventTarget.attachEvent (eventNameWithon,callback)

eventTarget.attachEvent ()方法将指定的监听器注册到 eventTarget (目标对象)上,当该对象触发指定的事件时 , 指定的回调函数就会被执行。
该方法接收两个参数 :

eventNameWithOn : 事件类型字符串,比如onclick、onmouseover ,这里要带on
callback : 事件处理函数,当目标触发事件时回调函数被调用

eg 注册事件两种方式.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button>传统注册事件</button>
  <button>方法监听注册事件</button>
  <button>ie9 attachEvent</button>

  <script>
    var btns = document.querySelectorAll('button'); // 获取所有的按钮
    // 1 传统方式注册事件
    btns[0].onclick = function() {   // 点击第一个按钮  btn[0]
      alert('hi');  // 点击第一个按钮，弹出框hi
    }
    btns[0].onclick = function() {
      alert('hao a u');  // 点击第一个按钮，弹出框hao a u
    }
    // 上面有两个弹出事件，同一个对象，同一个元素，添加到同一个事件（都是点击）两个处理函数。根据唯一性，最后注册的处理函数将会覆盖前面注册的处理函数，所以只会弹出 hao a u

    // 2 事件监听注册事件 addEventListener  
    // （1）第一个参数 里面的事件类型是字符串 必定加引号  而且不带on  第二个参数：事件监听函数
    // （2） 同一个元素 同一个事件 可以添加多个侦听器（事件处理程序）
    btns[1].addEventListener('click',function() {  
      alert(22);    
    })  
    btns[1].addEventListener('click',function() {  
      alert(33);    // 上面的22弹出后，点确定，之后接着弹出33
    })    
    
    // 3 attachEvent  ie9以前的版本支持
    btns[2].attachEvent('onclick', function() {
      alert('11');  // 在谷歌浏览器没有反应， 在ie9以前的版本支持
    })
  </script>
</body>
</html>

有没有兼容性方法，让各个浏览器都支持？

做一个兼容性函数，把他们都封装起来

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;
  }

兼容性处理的原则 : 首先照顾大多数浏览器,再处理特殊浏览器

兼容性现在不是很大的问题，现在市场很少去调兼容性ie6,ie7那些了，一般用正常的就可以，这个了解就行

以后开发，一般都用addEventListener，其次使用传统的方式

2 删除事件（解绑事件）

2.1 删除事件的方式

点击事件中，eg 点击按钮就弹出方框，关掉后，再次点击，还是可以弹出方框，如果想弹出一次后，之后再点击不会出现弹框（解绑）

1 传统注册方式

eventTarget.onclick = null ;

2 方法监听注册方式

（1）eventTarget.removeEventListener (type, listener[，useCapture]) ;

（2）eventTarget.detachEvent (eventNameWithOn, callback)

eg 删除事件.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>

  <script>
    // 获取div
    var divs = document.querySelectorAll('div');
    // 给第一个div绑定事件
    divs[0].onclick = function() {
      alert(11);  
      // 1 传统方式删除事件
      divs[0].onclick = null;   
    }
    // 2 removeEventListener 删除事件
    divs[1].addEventListener('click',fn) // fn 不需要调用加小括号
    function fn() {
      alert(22);
      divs[1].removeEventListener('click',fn);
    }
    // 3 
    div[2].attachEvent('onclick',fn1);
    function fn1() {
      alert(33);
      divs[2].detachEvent('onclick',fn1);
    }
 
  </script>
</body>
</html>

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

function removeEventListener (element, eventName, fn) {
  //判断当前浏览器是否支持removeEventListener方法
  if (element. removeEventListener) {
    element . removeEventListener (eventName, fn); // 第三个参数默认是false
  } else if (element . detachEvent) {
    element. detachEvent( 'on' + eventName, fn) ;
  } else{
    element['on' + eventName] = null;

3 DOM事件流

事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播 , 这个传播过程即DOM事件流。

比如我们给一个div 注册了点击事件:

DOM事件流分为3个阶段:

捕获阶段
当前目标阶段
冒泡阶段

在这里插入图片描述

事件冒泡 : IE 最早提出,事件开始时由最具体的元素接收,然后逐级向上传播到到DOM最顶层节点的过程。
事件捕获 : 网景最早提出,由DOM最顶层节点开始,然后逐级向下传播到到最具体的元素接收的过程。

我们向水里面扔一块石头 , 首先它会有一个下降的过程 , 这个过程就可以理解为从最顶层向事件发生的最具体元素(目标点)的捕获过程 ; 之后会产生泡泡 , 会在最低点(最具体元素)之后漂浮到水面上 , 这个过程相当于事件冒泡。

在这里插入图片描述

注意

JS代码中只能执行捕获或者冒泡其中的一个阶段。
onclick和attachEvent 只能得到冒泡阶段。
addEventListener (type, listener[, useCapture] )第三个参数如果是true , 表示在事件捕
获阶段调用事件处理程序 ; 如果是false (不写默认就是false ) , 表示在事件冒泡阶段调用事件处理程序。
实际开发中我们很少使用事件捕获,我们更关注事件冒泡。
有些事件是没有冒泡的,比如onblur、onfocus、 onmouseenter、 onmouseleave
事件冒泡有时候会带来麻烦,有时候又会帮助很巧妙的做某些事件, 后面学习。

eg DOM 事件流三个阶段.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 200px;
      height: 200px;
      background-color: green;
    }
    .son {
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son">son盒子</div>
  </div>

  <script>
    // // 1 JS代码中只能执行捕获或者冒泡其中的一个阶段。
    // // 2 onclick和attachEvent 只能得到冒泡阶段。
    // // 2 捕获阶段 如果addEventListener 第三个参数 true 那么则处于捕获阶段  document -> html -> body -> father -> son 
    // var son = document.querySelector('.son');
    // son.addEventListener('click',function(){
    //   alert('son');
    // },true);
    // var father = document.querySelector('.father');
    // father.addEventListener('click',function(){
    //   alert('father');   // 点击son先弹出father，再弹出son
    // },true)

    // 4 冒泡阶段 如果addEventListener 第三个参数是 false 或者省略  那么则处于冒泡     son -> father -> body -> html -> document
    var son = document.querySelector('.son');
    son.addEventListener('click',function(){
      alert('son');
    }, false);
    var father = document.querySelector('.father');
    father.addEventListener('click', function(){
      alert('father');   
    }, false)
    document.addEventListener('click', function() {
      alert('document');  // 点击son 先弹出 son 再 father 最后 documnet
    })
  </script>
</body>
</html>

4 事件对象

4.1 什么是事件对象

eventTarget.onclick = function (event) { }
eventTarget.addEventListener('click'，function(event) {})
//这个event就是事件对象，我们还喜欢的写成 e 或者 evt

官方解释 : event 对象代表事件的状态 , 比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。
简单理解 : 事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面 , 这个对象就是事件对象event , 它有很多属性和方法。

比如 :

谁绑定了这个事件。
鼠标触发事件的话,会得到鼠标的相关信息,如鼠标位置。
键盘触发事件的话,会得到键盘的相关信息,如按了哪个键。

4.2 事件对象的使用语法

eventTarget.onclick = function (event) {
	//这个event就是事件对象，我们还喜欢的写成e或者evt
eventTarget.addEventListener ('click'，function (event) {
	//这个event就是事件对象，我们还喜欢的写成 e 或者 evt
})

这个 event 是个形参 , 系统帮我们设定为事件对象 , 不需要传递实参过去。
当我们注册事件时 , event对象就会被系统自动创建 , 并依次传递给事件监听器 ( 事件处理函数 ) 。

4.3 事件对象的兼容性方案（了解）

事件对象本身的获取存在兼容问题:

标准浏览器中是浏览器给方法传递的参数,只需要定义形参e就可以获取到。
在IE6~8中,浏览器不会给方法传递参数,如果需要的话,需要到window.event中获取查找。

eg 事件对象.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div>123</div>
  <script>
    // 事件对象
    var div = document.querySelector('div');  // 获取div
    // div.onclick = function(event) {
    //   console.log(event);
    // }
    div.addEventListener('click',function(e) {
      // 好东西就总是会有兼容性问题
      // console.log(e);
      // console.log(window.event);
      // e = e || window.event;
      console.log(e);
    })
    // 1 event 就是一个事件对象 写在我们的侦听函数的 小括号里面 当形参来看
    // 2 事件对象只有有了事件才会存在 它是系统给我们自动创建的  不需要我们传递参数
    // 3 事件对象是 我们事件的一系列相关数据的集合 跟事件相关 比如鼠标点击里面就包含了鼠标的相关信息 鼠标坐标啊  如果是键盘事件就包含的键盘事件的信息 比如判断用户按下了哪个键
    // 4 这个事件对象我们可以自己命名  比如 event 、evt 、 e
    // 5 事件对象也有兼容性问题  ie678 通过window.event 兼容性的写法

  </script>
</body>
</html>

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

事件对象属性方法	说明
e.target	返回触发事件的对象标准
e.srcElement	返回触发事件的对象非标准 ie6-8使用
e.type	返回事件的类型比如click mouseover 不带on
e.cancelBubble	该属性阻止冒泡非标准 ie6-8使用
e.returnValue	该属性阻止默认事件(默认行为) 非标准 ie6-8使用比如不让链接跳转
e.preventDefault()	该方法阻止默认事件(默认行为) 标准比如不让链接跳转
e.stopPropagation()	阻止冒泡标准

香甜的甲基橙

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
762-768---DOM事件高级（注册事件，删除事件，DOM事件流，事件对象）

文章目录事件高级1 注册事件（绑定事件）1.1 注册事件概述1.2 addEventListener 事件监听方式1.3 attachEvent 事件监听方式（了解）1.4 注册事件兼容性解决方案（了解）2 删除事件（解绑事件）2.1 删除事件的方式2.2 删除事件兼容性解决方案（了解）3 DOM事件流4 事件对象4.1 什么是事件对象4.2 事件对象的使用语法4.3 事件对象的兼容性方案（了解）4.4 事件对象的常见属性和方法事件高级目标：能够写出元素注册事件的两种方式能够说出删除事件的两种方
复制链接

扫一扫