事件 - 码农教程

事件

JavaScript和HTML的交互是通过事件实现的。JavaScript采用异步事件驱动编程模型，当文档、浏览器、元素或与之相关对象发生特定事情时，浏览器会产生事件。如果JavaScript关注特定类型事件，那么它可以注册当这类事件发生时要调用的句柄。事件是某个行为或者触发，比如点击、鼠标移动.....

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当用户触发按键时...

事件流

事件流描述的是从页面中接收事件的顺序，比如有两个嵌套的div，点击了内层的div，这时候是内层的div先触发click事件还是外层先触发？目前主要有三种模型:

事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素
事件捕获：不太具体的节点更早接收事件，而最具体的元素最后接收事件，和事件冒泡相反
DOM事件流：DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段

image.png

事件处理程序

我们也称之为事件侦听器（listener），事件就是用户或浏览器自身执行的某种动作。比如click、load、mouseover等，都是事件类型（俗称事件名称），而响应某个事件的方法就叫做事件处理程序或者事件监听器。

也就是我们需要提前定义好某些事件发生了该怎么处理，这个过程叫做绑定事件处理程序。

给元素添加事件处理程序

方法一：HTML内联方式

元素支持的每个事件都可以使用一个相应事件处理程序同名的HTML属性指定。这个属性的值应该是可以执行的JavaScript代码，我们可以为一个button添加click事件处理程序

<input type="button" value="Click Here" onclick="alert('Clicked!');" />

在HTML事件处理程序中可以包含要执行的具体动作，也可以调用在页面其它地方定义的脚本,刚才的例子可以写成这样

<input type="button" value="Click Here" onclick="showMessage();" />

在HTML中指定事件处理程序书写很方便，但是有两个缺点：

存在加载顺序问题，如果事件处理程序在html代码之后加载，用户可能在事件处理程序还未加载完成时就点击按钮之类的触发事件，存在时间差问题
这样书写html代码和JavaScript代码紧密耦合，维护不方便

方法二：JavaScript指定事件处理程序

通过JavaScript指定事件处理程序就是把一个方法赋值给一个元素的事件处理程序属性。

每个元素都有自己的事件处理程序属性，这些属性名称通常为小写，如onclick等，将这些属性的值设置为一个函数，就可以指定事件处理程序，如下

<input id="btnClick" type="button" value="Click Here" />

<script type="text/javascript">
    var btnClick = document.getElementById('btnClick');
    btnClick.onclick = function showMessage() {
        alert(this.id);
    };
</script>

这样处理，事件处理程序被认为是元素的方法，事件处理程序在元素的作用域下运行，this就是当前元素，所以点击button结果是：btnClick

这样还有一个好处，我们可以删除事件处理程序，只需把元素的onclick属性赋为null即可。

事件对象

在触发DOM上的某个事件的时候会产生一个事件对象event，这个对象包含着所有与事件有关的信息，包括产生事件的元素、事件类型等相关信息。所有浏览器都支持event对象，但支持方式不同。

DOM中的事件对象

兼容DOM的浏览器会产生一个event对象传入事件处理程序中。event对象包含与创建它的特定事件有关的属性和方法，触发事件的类型不同，可用的属性和方法也不同，但是所有事件都会包含

image.png

在事件处理程序内部，this始终等同于currentTarget，而target是事件的实际目标。

要阻止事件的默认行为，可以使用preventDefault()方法，前提是cancelable值为true，比如我们可以阻止链接导航这一默认行为

document.querySelector('#btn').onclick = function (e) {
    e.preventDefault();
}

stopPropagation()方法可以停止事件在DOM层次的传播，即取消进一步的事件捕获或冒泡。我们可以在button的事件处理程序中调用stopPropagation()从而避免注册在body上的事件发生

var handler = function (e) {
    alert(e.type);
    e.stopPropagation();
}

addEvent(document.body, 'click', function () { alert('Clicked body')});
var btnClick = document.getElementById('btnClick');
addEvent(btnClick, 'click', handler);

若是注释掉e.stopPropagation(); 在点击button的时候，由于事件冒泡，body的click事件也会触发，但是调用这句后，事件会停止传播

IE中的事件对象

访问IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。直接为DOM元素添加事件处理程序时，event对象作为window对象的一个属性存在

var handler = function () {
    var e = window.event;
    alert(e.type);
}
var btnClick = document.getElementById('btnClick');
btnClick.onclick = handler;

我们通过window.event取得了event对象，并检测到了其类型，可是如果事件处理程序是通过attachEvent添加的，那么就会有一个event对象被传入事件处理程序中

var handler = function (e) {
    alert(e.type);
}
var btnClick = document.getElementById('btnClick');
attachEvent(btnClick, handler);

当然这时候也可以通过window对象访问event，方便起见，我们一般会传入event对象，IE中所有的事件都包含以下属性方法

image.png

跨浏览器的事件对象

虽然DOM和IE的event对象不同，但基于它们的相似性，我们还是可以写出跨浏览器的事件对象方案

function getEvent(e) {
    return e || window.event;
}

function getTarget(e) {
    return e.target || e.scrElement;
}

function preventDefault(e) {
    if (e.preventDefault)
        e.preventDefault();
    else
        e.returnValue = false;
}

function stopPropagation(e) {
    if (e.stopPropagation)
        e.stopPropagation();
    else
        e.cancelBubble = true;
}

1： DOM0 事件和DOM2级在事件监听使用方式上有什么区别？

在W3C对DOM事件进行规范化之前的事件处理，一般称为DOM0级事件处理程序。W3C在DOM2级文档规范中，包含了DOM 事件（DOM Events）规范，也就是我们通常所说的DOM2级事件处理程序。

DOM0级事件处理方式：

Dom0级事件处理程序是将一个函数赋值给一个事件处理程序属性，而通过将事件处理程序设置为null删除绑定在元素上的事件处理程序。这种方法无法给一个事件添加多个事件处理程序,一个事件只能绑定一次，后面的程序会覆盖前面的程序。

// 添加事件处理程序
var btn=document.querySelector("#btn");
btn.onclick=function () {
    alert(this.id);
}
// 删除事件处理程序
btn.onclick=null;

优点：简单，兼容性好。缺点：一个事件处理程序只能对应一个处理函数，设置第二个事件时候，因为是赋值，所以第二个事件会覆盖第一个事件。

DOM2级事件处理方式:

DOM2级事件处理方式指定了，添加事件处理程序和删除事件处理程序的方法。DOM2级定义了addEventListener()和removeEventListener()用于处理指定和删除事件处理程序。所有Dom节点都包含这两个方法，并且它们都接受3个参数，要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

  addEventListener(eventName,func,isPuhuo);     //添加事件
  removeEventListener(eventName,func,isPuhuo);  //删除事件
/*参数分别是，事件处理属性名称，处理函数，是否在捕获时执行事件处理函数，
默认是false，即在冒泡阶段执行
*/

应用举例

  var btn = document.getElementById("btn");
  var cancel = document.getElementById("cancel")
  function fn(){
    console.log("I am clicked 123");
  }
  btn.addEventListener("click",fn)  //点击btn事件，执行函数fn
  cancel.addEventListener("click",function(){
    btn.removeEventListener("click",fn)
  })  //点击cancel事件，执行删除btn的绑定事件

通过removeEventListener()函数来移除事件处理程序时，移除时的参数必须与添加处理程序时使用的参数相同，这也意味着通过addEventListener()添加的匿名函数将无法移除。如：

var btn=document.querySelector("#btn");
// 指定事件处理程序
btn.addEventListener("click",function(){
    alert(this.id);
},false);
// 删除事件处理程序,不会生效
btn.removeEventListener("click",function(){
    alert(this.id);
},false);

注：

(a) eventName的值均不含on,例如注册鼠标点击事件eventName为“click”

(b) 处理函数中的this依然指的是指当前dom元素

二者区别：使用Dom2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序，而Dom0级为一个事件添加多个事件处理程序时，后面的程序会覆盖前面的。

2： attachEvent与addEventListener的区别？

参数个数不相同，这个最直观，addEventListener有三个参数，attachEvent只有两个，attachEvent添加的事件处理程序只能发生在冒泡阶段，addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理（我们一般为了浏览器兼容性都设置为冒泡阶段）
第一个参数意义不同，addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）
事件处理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window，所以刚才例子才会返回undefined，而不是元素id
为一个事件添加多个事件处理程序时，执行顺序不同，addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)，所以添加多个的时候，不依赖执行顺序的还好，若是依赖于函数执行顺序，最好自己处理，不要指望浏览器。

3：解释IE事件冒泡和DOM2事件传播机制？

IE事件冒泡：

事件从目标元素向父级元素传递，直到传递到 window ( document) 停止。

image.png

DOM2级事件传播：有3个阶段：

捕获阶段：事件从document向子元素一层层传递，直到目标元素
处于目标阶段：此时事件发生在目标元素上，被看做冒泡的一部分
冒泡阶段：和IE冒泡一样，从目标元素向父级元素传递，直到document停止。

image.png

4：如何阻止事件冒泡？如何阻止默认事件？

兼容DOM的浏览器：

阻止默认事件：e.preventDefault();

event.preventDefault()：如果事件可取消，则取消该事件，而不停止事件的进一步传播。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>event.preventDefault()</title>
</head>
<body>
    <p>请点击复选框控件</p>
    <form>
        <label for="id-checkbox">Checkbox</label>
        <input type="checkbox" id="id-checkbox" name="checkbox" />
    </form>
    <script>
        document.querySelector("#id-checkbox").addEventListener("click", function(event){
            alert("preventDefault会阻止该复选框被勾选.")
            event.preventDefault();
            //阻止该复选框被勾选
        }, false);
    </script>
</body>
</html>

阻止事件冒泡： e.stopPropagation();

event.stopPropagation(): 阻止捕获和冒泡阶段中当前事件的进一步传播。

<!DOCTYPE html>
<html>
<head>
<title>Event Propagation</title>

<style type="text/css">
 #t-daddy { border: 1px solid red }
 #c1 { background-color: pink; }
</style>

<script type="text/javascript">

function stopEvent(ev) {
  c2 = document.getElementById("c2");
  c2.innerHTML = "hello";

  // this ought to keep t-daddy from getting the click.
  ev.stopPropagation();
  alert("event propagation halted.");
}

function load() {
  elem = document.getElementById("tbl1");
  elem.addEventListener("click", stopEvent, false);
}
</script>
</head>

<body onload="load();">

<table id="t-daddy" onclick="alert('hi');">
 <tr id="tbl1">
  <td id="c1">one</td>
 </tr>
 <tr>
  <td id="c2">two</td>
 </tr>
</table>

</body>
</html>

IE9 之前的IE浏览器:

阻止默认冒泡：e.cancelBubble = true；
阻止默认事件：event.returnValue = false;

5：有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容

<ul class="ct">
    <li>这里是</li>
    <li>秦皇岛</li>
    <li>东北大学秦皇岛分校</li>
</ul>
<script>
//todo ...
</script>
----------------------------------------------------------
<ul class="ct">
    <li>这里是</li>
    <li>秦皇岛</li>
    <li>东北大学秦皇岛分校</li>
</ul>
<script>
var ct = document.querySelector('.ct');
ct.addEventListener('click',function(e){
      console.log(e.target.innerText)
});
</script>

6：补全代码要求：（1）当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串；（2）当点击每一个元素li时控制台展示该元素的文本内容。

<ul class="ct">
    <li>这里是</li>
    <li>秦皇岛</li>
    <li>东北大学秦皇岛分校</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
//你的代码
</script>
---------------------------------------------------------------------
<ul class="ct">
    <li>这里是</li>
    <li>秦皇岛</li>
    <li>东北大学秦皇岛分校</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
var ct = document.querySelector('.ct'),
      ipt = document.querySelector('.ipt-add-content'),
      addStart = document.querySelector('#btn-add-start'),
      addEnd = document.querySelector('#btn-add-end');
  

ct.addEventListener('click',function(e)){
    if(e.target.tagName.toLowerCase() === 'li'){
        console.log(e.target.innerText);
    }
});

addStart.addEventListener('click',function(){
    var li = document.createElement('li');
    li.innerText = ipt.value;
    if (li.innerText === "") {
            alert("please input content");
        } else {
            ct.inserBefore(li,ct.firstChild);
        }
});

addEnd.addEventListener('click',function(){
    var li = document.createElement('li');
    li.innerText = ipt.value;
    if (li.innerText === "") {
            alert("please input content")
        } else {
            ct.appendChild(li);
        }
})
</script>

7：补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。

<ul class="ct">
    <li data-img="1.png">鼠标放置查看图片1</li>
    <li data-img="2.png">鼠标放置查看图片2</li>
    <li data-img="3.png">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
//你的代码
</script>
-------------------------------------------------------------
<body>
    <ul class="ct">
        <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">鼠标放置查看图片1</li>
        <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">鼠标放置查看图片2</li>
        <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">鼠标放置查看图片3</li>
    </ul>
    <div class="img-preview"></div>

    <script>
        function $(id) {
            return document.querySelector(id);
        }

        function $$(cls) {
            return document.querySelectorAll(cls);
        }

        var ct = $('.ct')
        var childs = $$('li')
        var preview = $('.img-preview')

//直接在每一个元素上监听
        for (var i = 0; i < childs.length; i++) {
            childs[i].addEventListener('mouseenter', function () {
                var dataImg = this.getAttribute('data-img');
                preview.innerHTML = '![](' + dataImg + ')'
            })
        }

//监听父元素
        ct.addEventListener('mouseover', function (e) {
            if (e.target.tagName.toLowerCase() === 'li') {
                var img = document.createElement('img');
                img.src = e.target.getAttribute('data-img');
                preview.appendChild(img);
            }
        })

        ct.addEventListener('mouseout', function (e) {
            if (e.target.tagName.toLowerCase() === 'li') {
                preview.innerHTML = '';
            }
        });
      
    </script>
</body>

事件

事件

事件流

事件处理程序

给元素添加事件处理程序

事件对象

1： DOM0 事件和DOM2级在事件监听使用方式上有什么区别？

2： attachEvent与addEventListener的区别？

3： 解释IE事件冒泡和DOM2事件传播机制？

4：如何阻止事件冒泡？ 如何阻止默认事件？

5：有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容

7： 补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。

3：解释IE事件冒泡和DOM2事件传播机制？

4：如何阻止事件冒泡？如何阻止默认事件？

7：补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。