Javascript事件冒泡、事件捕获及事件相关-蒲公英云

####javascript中三种事件方式:

1. onXXX方式

该方式为最简单直接使用事件的方式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>onXXX方式</title>
</head>
<body>
        <input type="button" value="按钮" id="btn" />
    <script> var btn = document.getElementById("btn"); btn.onclick = function(){ console.log("触发单击事件"); } </script>
</body>
</html>

该方式创建事件有一个弊端，就是一次只能挂载一个事件。如果多个事件挂载在相同的事件下，后挂载的事件会覆盖前挂载的事件。

2. addEventListener

谷歌、火狐支持该方式使用事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>addEventListener</title>
</head>
<body>
        <input type="button" value="按钮" id="btn" />
    <script> var btn = document.getElementById("btn"); btn.addEventListener('click', function(){ console.log("触发单击事件"); }, false); </script>
</body>
</html>

该方式有三个参数，第一个为事件类型(不是on开头的), 第二个是事件处理函数，第三个是表示该事件是冒泡还是捕获。

第三个参数可选值有两个: true和false，true值表示事件捕获，false表示事件冒泡。如果不写则表示默认使用冒泡方式处理事件传播。

该方式的优势在与可同时使用多个事件处理函数处理相同的事件。缺点在与该事件只支持火狐和谷歌，要想用IE则需要使用兼容方法attachEvent

3. attachEvent

该事件方式只支持IE浏览器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>attachEvent</title>
</head>
<body>
        <input type="button" value="按钮" id="btn" />
    <script> var btn = document.getElementById("btn"); btn.attachEvent('onclick', function(){ console.log("触发单击事件"); }); </script>
</body>
</html>

该方式有两个参数: 事件类型和事件处理函数。注意: 事件类型以on开头，且没有第三个参数，也就是说该方式不支持事件捕获

该方式只支持IE8及以下浏览器，所以一般用以兼容IE浏览器

事件三阶段

事件捕获 > 目标执行 > 事件冒泡

三个阶段分别用数字表示:

捕获为1
执行为2
冒泡为3

var eventNum = event.eventPhase; // 事件三个阶段的编码可以通过事件对象event的eventPhase属性获得

事件三阶段

事件委托

由于太多的元素需要绑定事件时，在性能上和代码可维护度上会存在一定的问题。因此我们可以通过js的事件委托来简化代码和提高代码的执行效率:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>节点操作</title>
</head>
<body>
    <ul id="ulNode">
        <li>li-1</li>
        <li>li-2</li>
        <li>li-3</li>
        <li>li-4</li>
        <li>li-5</li>
        <li>li-6</li>
    </ul>
    <script> var ulNode = document.getElementById("ulNode"); ulNode.onclick = function(e){ var e = window.event || e; // 事件对象的获取(兼容IE浏览器) var targetNode = e.target; // target返回父盒子中指定的子元素节点对象 console.log(targetNode.innerText); } </script>
</body>
</html>

给父元素绑定事件后，通过事件对象的target属性获取所对应的元素来进行事件委托。

事件冒泡

通常，浏览器在执行事件时会以从内向外的依次执行有相同事件类型的事件，即子盒子触发事件后，如果父盒子拥有相同事件类型的事件，则会再执行完子盒子的事件后父盒子也会随后执行。

事件冒泡的前提条件: 父级嵌套的盒子必须拥有相同事件类型的事件。
注意: 并不是子盒子和父盒子必须要同时拥有相同的事件绑定。例如单击子盒子时，此时子盒子没有单击事件，但父盒子有，则父盒子的单击事件仍旧会在子盒子被点击时被冒泡执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件冒泡</title>
</head>
<body>
        <div id="outer">
        <div id="inner">
      </div>  
      </div>
    <script> var outer = document.getElementById("outer"); var inner = document.getElementById("inner"); outer.onclick = function(){ console.log("外头的的盒子"); } inner.onclick = function(){ console.log("内部盒子"); } /** 如果单击后inner的单击事件后，此时因为outer同样有单击事件，所以执行完inner的单击事件后，随后就会执行outer的单击事件 */ </script>
</body>
</html>

阻止事件冒泡

有时候我们不需要事件冒泡，此时处理的方式如下代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>阻止事件冒泡</title>
</head>
<body>
        <div id="outer">
        <div id="inner">
      </div>  
      </div>
    <script> var outer = document.getElementById("outer"); var inner = document.getElementById("inner"); outer.onclick = function(){ console.log("外头的的盒子"); } inner.onclick = function(e){ var e = window.event || e; // 兼容写法，因为IE浏览器不支持直接获取事件对象，需要使用window.event获取 e.stopPropagration(); // 阻止事件冒泡(webKit内核、Molliza内核浏览器) window.event.cancelBubble = true; // 阻止事件冒泡(IE浏览器) console.log("内部盒子"); } /** 如果单击后inner的单击事件后，此时outer也有单击事件，但是此时因为inner的处理函数中阻止了事件冒泡，所以outer的单击事件不会再被执行 */ </script>
</body>
</html>

事件捕获

事件捕获与事件冒泡刚好相反，事件捕获是从外向内传递事件。即当外层事件触发后，嵌套内的事件也随后会触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件捕获</title>
</head>
<body>
        <div id="outer">
        <div id="inner">
      </div>  
      </div>
    <script> var outer = document.getElementById("outer"); var inner = document.getElementById("inner"); outer.addEventListener('click', function(){ console.log("外头的的盒子"); }, true); inner.addEventListener('click', function(e){ var e = window.event || e; // 兼容写法，因为IE浏览器不支持直接获取事件对象，需要使用window.event获取 e.stopPropagration(); // 阻止事件冒泡 console.log("内部盒子"); }, true); /** 将addEventListener的第三个参数改为true后，此时事件传播方式更改为事件捕获。当outer的单击事件触发后，随后即会触发inner事件。由于addEventListener仅支持火狐和谷歌家族的浏览器，而attachEvent中并未有第三个参数用于处理事件传播，所以在IE8及以下的旧版本浏览器中无法更改事件传播方式，也即无法使用事件捕获。 */ </script>
</body>
</html>

事件解绑

有时候，我们绑定事件并处理完相关事件后需要解绑相关的事件，三种事件方式的解绑方法如下:

onXXX的事件解绑方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>onXXX的事件解绑方式</title>
</head>
<body>
        <input type="button" value="按钮" id="btn"/>
    <script> var btn = document.getElementById("btn"); var flag = true; btn.onclick = function(){ if(!flag == false){ btn.onclick = null; // 解绑on开头的绑定事件 } } </script>
</body>
</html>

addEventListener解绑方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>addEventListener解绑方式</title>
</head>
<body>
        <input type="button" value="按钮" id="btn"/>
    <script> var btn = document.getElementById("btn"); var flag = true; var clickEvent = function(){ if(!flag == false){ btn.onclick = null; // 解绑on开头的绑定事件 } } btn.addEventListner('click',clickEvent, false); // 绑定单击事件 btn.removeEventListener('click', clickEvent, false); // 解绑对应的单击事件 </script>
</body>
</html>

由于相关对应的事件需要有相同的事件处理函数才能进行解绑，所以此处需要使用命名函数进行事件挂载，如果使用匿名处理函数就会导致事件解绑失败。

attachEvent解绑方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>节点操作</title>
</head>
<body>
        <input type="button" value="按钮" id="btn"/>
    <script> var btn = document.getElementById("btn"); var flag = true; var clickEvent = function(){ if(!flag == false){ btn.onclick = null; // 解绑on开头的绑定事件 } } btn.attachEvent('onclick',clickEvent); // 绑定单击事件 btn.detachEvent('onclick', clickEvent); // 解绑对应的单击事件 </script>
</body>
</html>

attachEvent的事件解绑方式与addEventListener的事件解绑方式相同，注意的时候事件类型需要on开头。

常用的事件

事件名称	事件解释
click	单击事件
dblclick	双击事件
mouseover	鼠标移上去事件
mouserout	鼠标移开事件
mousemove	鼠标移动事件
focus	获得焦点时事件
blur	失去焦点时事件
scroll	拖动元素内滚动条或在元素内滚动鼠标滚轮时事件
keydown	键盘按下还未抬起事件
keypress	键盘抬起后事件
keyup	键盘按下并抬起后事件