JavaScript-关于事件、事件流（捕获、冒泡）、事件源、常用事件

1.如何注册事件(如何绑定事件)

​ 何为注册事件，就是给元素添加事件，其方式有传统注册事件、方法监听注册事件。

• 0、1级事件（传统注册事件）不允许多个响应程序

  我们在元素内或js内使用on的方式就是传统注册事件，这种形式添加的事件叫DOM 0级事件（DOM L0 事件），如onclick、onblur等

  <div id="box" onclick="fn()"></div>
  <script>
  // js里面也可以注册事件
      let box = document.getElementById("box")
  	box.onclick = function (){
      	console.log("注册click事件成功1")
  }
  	box.onclick = function (){
      	console.log("注册click事件成功2")
  }
  
  //这里只会打印"注册click事件成功2" ，因为不允许多个响应程序，后面会覆盖前面的事件
  </script>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13

• 2级事件（方法监听注册事件）允许多个响应程序，事件触发时依次调用

• 方法1：元素.addEventListener：

  // IE9之前的IE不支持此方法
  元素.addEventListener('事件名', 事件响应程序（函数）callback,useCapture)
  // useCapture：可选参数，是一个布尔值，默认是 false
  // true 是捕获阶段 false是冒泡阶段 事件触发会依据事件流的顺序调用
  // 例如以下 
  box.addEventListener('click', function () {
      // 给box添加点击事件
  })
  // 允许多个响应程序，事件触发时依次调用
  box.addEventListener('click', function () {
      console.log('1')
  })
  box.addEventListener('click', function () {
      console.log('2')
  })
  
  //这里会依次打印1、2
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17

• 方法2：元素.attachEvent( on事件名, 响应程序 )

  // IE9之前的浏览器支持
  元素.attachEvent( on事件名, 事件响应程序（函数）callback )
  box.attachEvent('onclick', function () {})
  1
  2
  3

2.如何删除事件(如何解除绑定事件)

用哪种方式添加的事件，我们只能用对应方式来删除，无法混用，而且要注意是否注册的是匿名函数，这种事件无法删除。

• 0、1级事件的删除方法：

  元素.on事件名 = null  或者 = undefined
  box.onclick = null  或者  box.onclick = undefined
  1
  2

• 2级事件的删除方法：

  addEventListener的删除：

  元素.removeEventListener('事件名', 函数名)
  // 匿名函数例子
  box.addEventListener('click', function () {
      console.log('1')
  })
  // 非匿名
  function fn(){}
  box.addEventListener('click', fn)
  // 删除例子
  box.removeEventListener('click',fn)
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10

  attachEvent的删除

  元素.detachEvent('on事件名', 函数名)
  1

3.什么是DOM事件流

• 事件流：当一个事件触发后，它其实经历了从上（捕获阶段)到下(事件目标)，又从下(事件目标)到上(冒泡阶段)的流动过程，这就称之为事件流

  • 事件冒泡默认存在的，事件捕获要写特殊代码才能看到，如下。

    • 例如：addEventListener的第三个参数写为true就是事件捕获，所以前面写的addEventListener里面提到的就是这里

  • 不管是捕获、冒泡，都会触发同名事件

  • 事件流如果不写特殊代码，会经历完整的事件流。

    <div id="div1" style="background: blue;width: 100px; height: 100px;">
    	<div id="div2" style="background: red;width: 70px; height: 70px;">
    		<div id="div3" style="background: yellow;width: 50px; height: 50px;"></div>
    	</div>
    </div>
    <script type="text/javascript">
        var oDiv1 = document.getElementById('div1'),
            oDiv2 = document.getElementById('div2'),
            oDiv3 = document.getElementById('div3');
    
    oDiv1.addEventListener('click', showBlue, true);
    oDiv2.addEventListener('click', showRed, false);
    oDiv3.addEventListener('click', showYellow, true);
    function showBlue(){ //蓝 alert("blue");}
    function showRed(){ //红 alert("red"); }
    function showYellow(){//黄 alert("yellow");}
        
    // 结果“blue”，“yellow”，“red”
    // true 是捕获阶段，依据事件流是先执行，所以先出蓝 黄，false是冒泡阶段，所以最后出红
    </script>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20

4.什么是事件对象

​ 事件对象也是一个对象，里面保存了事件触发时的相关信息，event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。

比如：键盘触发的事件，会得到键盘相关信息，如enter键

• 怎么获取事件对象？

  • 如事件绑定的函数里写一个形参event/e、或者写window.event

• 事件对象的兼容性方案（IE6~8 和IE8之后都可以使用）？

  • e = e || window.event

  eventTarget.onclick = function(event) {
  // 这个 event 就是事件对象}
  eventTarget.addEventListener('click', function(event) {
  }）
  // 形参是可变的，随便起名字，但一般用event、e、ev
  1
  2
  3
  4
  5

• 怎么获取事件源？

  • 事件对象.target || e.target是我们事件触发的元素，比如我点body就是body，我点div就点的那个div；
  • this 当前事件调用函数的绑定元素，this是注册当前事件的父元素；

5.阻止事件冒泡、事件捕获（阻止事件流）

• e.stopPropagation() （IE9后支持）
  • 可以阻止冒泡、捕获阶段
• e.cancelBubble = true（IE9前支持）
  • IE9之前没有事件捕获（因为IE9之前无法用addEventListener）

// 兼容性解决方案
 box.addEventListener('click', function(e) {
      alert('box');
// 兼容性写法
if (e && e.stopPropagation) {
    e.stopPropagation(); //适用于ie9后
} else {
    window.event.cancelBubble = true; // 适用于ie678 
}
}, false);
1
2
3
4
5
6
7
8
9
10

工作实际案例场景：
	1、登录页面，登录弹出框与后面父元素背景的点击事件冲突时；
	2、移动端，某个弹出框，不希望点击到阴影部分的功能；
	3、拓扑页面存在点击事件，需要在上层弹出某个弹框，可以拖拽改变页面大小； 
1
2
3
4

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

​ 把给每个子元素单独设置事件监听器的需求，改成事件监听器设置在其父元素上，利用冒泡原理代理到子元素上。

• 好处：减少绑定事件的次数，提高性能(只操作了一次 DOM ，提高了程序的性能)，减少代码冗余，即使新增的子元素也享有事件监听器；

• 需求：给li添加点击事件，并且获得里面的key值

  解决办法1：给每个li添加点击事件，这种方法代码太过冗余

  优化解决办法：把事件委托给ul元素，给它添加点击事件方法，利用事件冒泡

• <ul>
     <li key="1">点我点我宝贝</li>
     <li key="2">点我点我宝贝</li>
     <li key="3">点我点我宝贝</li>
     <li key="4">点我点我宝贝</li>
     <li key="5">点我点我宝贝</li>
       <span key="6">不是li</span>
       <span key="7">不是li</span>
  </ul>
  <script>
    let ul = document.querySelector('ul');
    ul.addEventListener('click',function(e){
    if(e.target.tagName === 'LI'){ // 判断是不是li标签
      return e.target.getAttribute('key')
    }})
  </script>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16

7.常用的事件

①鼠标事件

②键盘事件

使用addEventListener 不需要加 on