19 事件高级

技术交流QQ群:1027579432，欢迎你的加入！

欢迎关注我的微信公众号：CurryCoder的程序人生

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

  • 注册事件概述：给元素添加事件,称为注册事件或绑定事件。
  • 注册事件有两种方法：
    • 传统方式
    • 方法监听注册方式
  • 传统方式：利用on开头的事件onclick，如下例所示：
    • 特点：注册事件的唯一性；
    • 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数；
    <button>传统注册事件方式</button>
<button>方法监听注册事件</button>
<script>
    var btns = document.querySelectorAll('button');
    btns[0].onclick = function() {
        alert('hi~');
    }     
    btns[0].onclick = function() {
        alert('hi old are you?');
    } 
</script>
  • 方法监听注册方式：w3c标准推荐方式；addEventListener()它是一个方法；IE9之前的IE不支持此方法，可使用attachEvent()代替。
    • 特点：同一个元素同一个事件可以注册多个监听器；
    • 按注册顺序依次执行。
    • addEventListener()事件监听方式： 
      eventTarget.addEventListener(type, listener[, useCapture])
      • eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，就会执行事件处理函数。该方法接收三个参数：
        • type: 事件类型字符串，如click、mouseover、注意这里不要带on；
        • listener: 事件处理函数，事件发生时，会调用该监听函数；
        • useCapture: 可选参数，是一个布尔值，默认为false，学完DOM事件流后再进一步学习。
      <button>传统注册事件方式</button>
<button>方法监听注册事件</button>
<script>
    // 事件监听方式注册事件
    btns[1].addEventListener('click', function() {
        alert('22');
    })
    btns[1].addEventListener('click', function() {
        alert('666');
    })
</script>
    • attachEvent()事件监听方式：该方法了解即可！注意：IE8及早期版本支持。 
      eventTarget.attachEvent(eventNameWithOn, callback)
      • eventTarget.attachEvent()方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，指定的回调函数就会被执行。该方法接收两个参数：
        • eventNameWithOn：事件类型字符串，如onclick、onmouseover,这里要带on；
        • callback：事件处理函数，当目标触发事件时回调函数被调用； 
          <button>传统注册事件方式</button>
<button>方法监听注册事件</button>
<button>IE9 attachEvent</button>
<script>
// attachEvent IE9以前的版本支持
btns[2].attachEvent('onclick', function(){
    alert('IE9');
})
</script>
  • 注册事件兼容性解决方案：处理兼容性的原则是先照顾大多数浏览器，再处理特殊浏览器。 
    function addEventListener(element, eventName, fn) {
    // 判断当前浏览器是否支持addEventListener方法
    if(element.addEventListener){
        element.addEventListener(eventName, fn);
    }else if(element.attachEvent){
        element.attachEvent('on' + eventName, fn);
    }else {
        // 相当于element.onclick = fn;
        element['on' + eventName] = fn;
    }
}

2.删除事件(解绑事件)

  • 删除事件的方式：
    • 传统注册方式：eventTarget.onclick = null; 
      <div>1</div>
<div>2</div>
<div>3</div>
<script>
    var divs = document.querySelectorAll('div');
    divs[0].onclick = function() {
        alert('11');
        // 传统方式删除事件
        divs[0].onclick = null;
    }
</script>
    • 方法监听注册方式：eventTarget.removeEventListener(type, listener[, useCapture])与eventTarget.detachEvent(eventNameWithOn, callback); 
      <div>1</div>
<div>2</div>
<div>3</div>
<script>
    // 方法监听注册方式删除事件
    divs[1].addEventListener('click', fn); // 里面的fn不需要调用加小括号
    function fn() {
        alert('666');
        divs[1].removeEventListener('click', fn);
    }

    divs[2].attachEvent('onclick', fn1);
    function fn1() {
        alert('888');
        divs[2].detachEvent('onclick', fn1);
    }
</script>
    • 删除事件兼容性解决方案： 
      function removeEventListener(element, eventName, fn){
    // 判断当前浏览器是否支持removeEventListener方法
    if(element.removeEventListener){
        element.removeEventListener(eventName, fn);
    }else if(element.detachEvent){
        element.detachEvent('on' + eventName, fn);
    }else{
        element['on' + eventName] = null;
    }
}

3.DOM事件流

  • 事件流描述的是从页面中接收事件的顺序。
  • 事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。例如，给一个div注册了一个点击事件：
    DOM事件流.png
  • DOM事件流分为三个阶段：
    • 1.捕获阶段(事件捕获)：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程。
    • 2.当前目标阶段
    • 3.冒泡阶段(事件冒泡):IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程。
  • DOM事件流形象化理解：向水里扔一块石头，首先它会有一个下降的过程，这个过程可以理解为从最顶层向事件发生的最具体元素(目标点)的捕获过程；之后会产生泡泡，会在最低点(最具体元素)之后漂浮到水面上，这个过程相当于事件冒泡。
    DOM事件流.png
  • 注意：
    • js代码中只能执行捕获或者冒泡其中的一个阶段；
    • onclick和attachEvent只能得到冒泡阶段；
    • addEventListener(type, listener[, useCapture])第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果false(默认值)，表示在事件冒泡阶段调用事件处理程序。
    • 实际开发中我们很少使用时间捕获，更关注事件冒泡。
    • 有些事件是没有冒泡的，如onblur、onfocus、onmouseenter、onmouseleave等
    • 事件冒泡有时候会带来麻烦，有时候又会帮助我们很巧妙的做某些事件，后面会介绍。

4.事件对象

  • 官方解释：event对象代表事件的状态，如键盘按键的状态、鼠标的位置、鼠标按钮的状态等。
  • 简单理解：事件发生后，与事件相关的一系列信息数据的集合都放到这个对象中，这个对象就是事件对象event，它有很多属性和方法。
  • 比如：
    • 谁绑定了这个事件；
    • 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
    • 键盘触发事件的话，会得到键盘的相关信息，如按下了哪个键。
    <script>
    // 事件对象
    var div = document.querySelector('div');
    div.onclick = function(e) {
        console.log(e);
    //    兼容性处理方法
        e = e || window.event;
        console.log(e);
    }

    div.addEventListener('click', function(e){
        console.log(e);
    })
    // 1.event就是一个事件对象，写到我们监听函数的小括号中，当形参来看
    // 2.事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
    // 3.事件对象是我们事件的一系列相关数据的集合，根事件相关的，比如鼠标点击里面就包含了鼠标的相关信息，如鼠标坐标等信息。如果是键盘事件里面就包含了键盘事件的信息，如判断用户按下了哪个键
    // 4.这个事件对象我们可以自己命名，如event、evt、e
    // 5.事件对象也有兼容性问题，ie8以下浏览器通过window.event
</script>
  • 事件对象的使用方法：
    • 这个event是一个形参，系统帮我们设定为事件对象，不需要传递实参过去。
    • 当我们注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器(事件处理函数)
    eventTarget.onclick = function(event){
    // 这个event就是事件对象，还可以写成evt或e
}
eventTarget.addEventListener('click', function(event){
    // 这个event就是事件对象，还可以写成evt或e
})
  • 事件对象的兼容性方案：
    • 事件对象本身的获取存在兼容性问题：
      • 标准浏览器中是浏览器给方法传递的参数，只需要定义形参e就可以获取到。
      • 在IE6~8中，浏览器不会给方法传递参数，如果需要的话，需要到window.event中获取查找。
    • 解决方法：e = e || window.event;
  • 事件对象的常见属性和方法：
    事件对象的常见属性和方法.png

5.阻止事件冒泡

  • 事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点。
  • 事件冒泡本身的特性，会带来坏处，也会带来好处，需要我们灵活掌握。
  • 阻止事件冒泡的两种方法：
    • 标准写法：利用事件对象中的stopPropagation()方法；具有兼容性问题。
    • 非标准写法：IE6~8利用事件对象的cancelBubble属性；
  • 阻止事件冒泡的兼容性解决方案(了解)： 
    if(e && e.stopPropagation){
    e.stopPropagation();
}else{
    window.event.cancelBubble = true;
}

6.事件委托(代理、委派)

  • 事件冒泡本身的特性，会带来坏处，也会带来好处，需要我们灵活掌握。(好处是类似于生活中帮别人代拿快递) 
    <ul>
    <li>知否知否应是绿肥红瘦</li>
    <li>知否知否应是绿肥红瘦</li>
    <li>知否知否应是绿肥红瘦</li>
    <li>知否知否应是绿肥红瘦</li>
    <li>知否知否应是绿肥红瘦</li>
</ul>
  • 点击每个li都会弹出对话框，以前需要给每个li注册事件，是非常麻烦的。而且访问DOM次数越多，就会延长整个页面的交互就绪时间。
  • 事件委托：也称为事件代理，在jQuery中称为事件委派。
  • 事件委托的原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用事件冒泡原理影响设置每个子节点。
  • 以上案例的解决方法：给ul注册点击事件，然后利用事件对象的target来找到当前点击的li。因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器。
  • 事件委托的作用：只操作了一次DOM，提高了程序的性能。

7.常见的鼠标事件

常见的鼠标事件.png

%7CimageView2/2/w/1240)

  • 禁止鼠标右键菜单：contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单。 
    document.addEventListener('contextmenu', function(e){
    e.preventDefault();
});
  • 禁止鼠标选中(selectstart开始选中)： 
    document.addEventListener('selectstart', function(e){
    e.preventDefault();
});
  • event对象代表事件的状态，根事件相关的一系列信息的集合。目前，我们主要是用鼠标事件对象MouseEvent和键盘事件对象keyboardEvent。
  • 鼠标事件对象MouseEvent
    鼠标事件对象.png

8.常见的键盘事件

  • 事件除了使用鼠标触发，还可以使用键盘触发。


    常见的键盘事件.png
  • 注意：
    • 如果使用addEventListener不需要加on；
    • onkeypress和前面2个的区别是，它不能识别功能键，如左右箭头、shift、ctrl键；
    • 三个事件的执行顺序是：keydown --> keypress --> keyup
  • 键盘事件对象keyboardEvent
    keyCode属性.png
  • 注意:
    • onkeydown和onkeyup不区分字母大小写，onkeypress区分字母大小写；
    • 在实际开发中，更多使用的是keydown和keyup，它能识别所有的键(包括功能键)；

9.资料下载

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