事件

事件

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

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

事件流

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

  1. 事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素

  2. 事件捕获：不太具体的节点更早接收事件，而最具体的元素最后接收事件，和事件冒泡相反

  3. 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中指定事件处理程序书写很方便，但是有两个缺点：

  1. 存在加载顺序问题，如果事件处理程序在html代码之后加载，用户可能在事件处理程序还未加载完成时就点击按钮之类的触发事件，存在时间差问题

  2. 这样书写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元素

(c) 通过addEventListener添加的事件处理程序，只能通过removeEventListener来删除，也就是说通过addEventListener添加的匿名函数将无法被删除。

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

2： attachEvent与addEventListener的区别？

  1. 参数个数不相同，这个最直观，addEventListener有三个参数，attachEvent只有两个，attachEvent添加的事件处理程序只能发生在冒泡阶段，addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理（我们一般为了浏览器兼容性都设置为冒泡阶段）

  2. 第一个参数意义不同，addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）

  3. 事件处理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window，所以刚才例子才会返回undefined，而不是元素id

  4. 为一个事件添加多个事件处理程序时，执行顺序不同，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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,080评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,422评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,630评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,554评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,662评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,856评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,014评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,752评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,212评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,347评论 4赞 331
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,973评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2赞 349

推荐阅读更多精彩内容

  • 《JavaScript 闯关记》之事件
    JavaScript 程序采用了异步事件驱动编程模型。在这种程序设计风格下，当文档、浏览器、元素或与之相关的对象发...
    劼哥stone阅读 1,252评论 3赞 11
  • JS中DOM0,DOM2,DOM3级事件模型解析
    声明：本文来源于http://www.webzsky.com/?p=731我只是在这里作为自己的学习笔记整理一下（...
    angryyan阅读 6,972评论 1赞 6
  • Dom、事件
    一、问答 1. dom对象的innerText和innerHTML有什么区别？ innerHTML： 也就是从对象...
    饥人谷_罗伟恩阅读 592评论 0赞 2
  • 事件相关
    如何批量操作 css 如何获取 DOM 计算后的样式 使用getComputedStyle获取元素计算后的样式 实...
    _Dot912阅读 553评论 1赞 3
  • JavaScript中的事件处理机制
    以下文章为转载，对理解JavaScript中的事件处理机制很有帮助，浅显易懂，特分享于此。 什么是事件？ 事件(E...
    jxyjxy阅读 3,030评论 1赞 10