开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 762---DOM事件高级（注册事件，删除事件，DOM事件流，事件对象） -> 正文阅读

[JavaScript知识库]762---DOM事件高级（注册事件，删除事件，DOM事件流，事件对象）

文章目录

事件高级

事件高级

目标：

能够写出元素注册事件的两种方式
能够说出删除事件的两种方式
能够说出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()	阻止冒泡标准