DOM EventListener

向元素添加事件句柄的语法：element.addEventListener(event, function, useCapture);

第一个参数是事件的类型，如click或者mousedown，注意前面都没有on

第二个是事件触发后调用的函数

第三个参数为布尔值，可选，默认值为false，即冒泡传递

例如

<button id="myBtn">点我</button>
<script>
    document.getElementById("myBtn").addEventListener("click", function(){alert("Hello World!");});
</script>

<button id="myBtn">点我</button>
<script>
    document.getElementById("myBtn").addEventListener("click", myFunction);
    function myFunction() {alert ("Hello World!");}
</script>

上述第一种情况时直接写明函数与内容，第二种情况是通过函数名调用函数，这两种情况是等价的，并且与直接给元素添加事件是等价的。

注意，直接给元素添加事件时，是通过'函数名()'指明事件的，函数名后面有括号，并且整体通过''引用，而添加事件句柄时，直接通过函数名引用，没有括号也没有引号。

<button id="myBtn" onclick='myFunction()'>点我</button>
<script>
    function myFunction() {alert ("Hello World!");}
</script>

 

移除事件句柄：element.removeEventListener(event, function);

<p style='background:pink' id='p'>段落</p>
<button onclick='myClick()'>点我移除生成随机数的事件句柄</button>
<script>
    document.getElementById("p").addEventListener('mousemove',myFunction)
    function myFunction(){document.getElementById("p").innerHTML=Math.random();}
    function myClick(){document.getElementById("p").removeEventListener('mousemove',myFunction);}
</script>

如下，当鼠标在粉色段落框内移动时，段落内容随着鼠标移动而变成随机数，点击按钮后再在段落内移动，段落内容保持最后的不变。

 

可以向一个元素添加多个不同的事件句柄，也可以是两个同类型的事件例如两个click事件，后添加的事件句柄不会覆盖之前的事件句柄。

 

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果<p>元素包含在<div>元素中，并且这两个元素都有一个click事件句柄，当用户点击<p>元素时，哪个元素的 "click" 事件先被触发呢？

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即<p>元素的点击事件先触发，然后再触发<div>元素的点击事件。

在捕获中，外部元素的事件会先被触发，然后再触发内部元素，即<div>元素的点击事件先触发 ，然后再触发<p>元素的点击事件。

addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型，默认值为false即冒泡传递，当值为 true 时事件使用捕获传递。

 例如，如下

<div class="outer">
    I'm outer
    <p class="inner">I'm inner</p>
</div>
<script>
    var ele1=document.getElementsByClassName('outer')[0];
    var ele2=document.getElementsByClassName('inner')[0];
    ele1.onclick=function(){alert('I\'m outer')}
    ele2.onclick=function(){alert('I\'m inner')}
</script>

在点击inner框时，会先弹出I'm inner再弹出I'm outer。如果想只执行本元素事件而不触发父元素事件，可向子元素的事件函数传递参数e，并通过e.stopPropagation()阻止事件传递。

ele2.onclick=function(e){
    alert('I\'m inner');
    e.stopPropagation()}