陪你一块儿学习之javascript事件

背景

现在的前端圈堪比是娱乐圈，虽然火热程度不及当年，可是活跃程度仍是很厉害的，各类技术使人眼花缭乱。从小程序到各类混合开发的解决方案，从vue，react到angular，从canvas到three.js甚至webgl，从cmd到nodejs，从gulp到webpack，各类技术让人眼花缭乱，感受学不过来了有没有。其实这些技术咱们只要朝着一个方向努力慢慢积累，总结就会慢慢成长的，无需跳过心急。

见解

本身平时老是把精力放在node，webpack之类的东西上，可是不少东西都须要查，其实后来才发现基础才是最重要的。我一直很看重基础的学习，虽然我js基础我非常不满意，哈哈，可是我会像你们同样一块儿学习，总结的，你们一块儿加油。最近在听 喜马拉雅app里面的 《陪你读书javacript》，不知道有没有一块儿，若是恰好有喜马拉雅，我推荐你们听一下，直接搜就行，老师比较系统的讲js，三个特别来形容吧，特别基础，特别深奥，特备有趣

注：我不是打广告的啊，我真的是听了他的课，来总结的只是点的，哈哈；

事件流

• 冒泡
• 捕获

事件级别

• dom0 HTML
• dom2 属性事件
• dom3 事件监听

dom0事件(html事件)

<div onclick="alert（'1'）"></div>

复制代码

dom2事件（属性事件）

let dom = document.querySelector(".dom");
dom.onclick = function(){
    //执行代码
}

复制代码

dom3事件（事件监听）

let dom = document.querySelector(".dom");
    dom.addEventListener('click', function(){
        // 处理函数
    }, true);

复制代码

addEventListender接受三个参数，第一个参数为 事件名称，如（click、mousedown），第二个为 事件对应的处理函数，第三个是 是否为事件捕获经常使用的是传一个 Boolean值（true表示在事件捕获阶段触发，false表示在事件冒泡阶段触发），也能够传一个对象，下面会详细讲解。

其实这些东西，js稍微有点基础的同窗们，都应该常常用这些东西，我总结一下方便你们记得更深入，哈哈。下面主要讲一下 addEventListener的几个参数。

先给一下基础的html结构：

<div class="box">
	<div class="child"></div>
</div>
复制代码

下面是javascript代码:

let dom = document.querySelector(".dom");
    dom.addEventListener('click', function(){
        // 处理函数
    }, true);

    let box = document.querySelector('.box');
    let child = document.querySelector('.child');
    let boxEvent = function(){
    	console.log('box');
    }
    let childEvent = function(){
    	console.log('child');
    }
    
    box.addEventListener('click', boxEvent, true);
    child.addEventListener('click', childEvent, true);

复制代码

这你们确定都很了解，我就简单总结一下：

代码如上，咱们点击了child。

• 若是第三个参数为false（事件在冒泡阶段触发），那么控制台打印的顺序为child，box
• 若是第三个参数为true（事件在捕获阶段触发），那么控制台打印的顺序为box，child
• 注意:无论css怎么设置都不会影响事件的执行，好比 child经过css定位特别大，彻底盖住了这个box，依然不会影响事件执行书序。

若是咱们要取消事件监听把上面的addEventListener替换为removeEventListener便可，可是须要注意如下几点

• 若是事件的处理函数用的不是函数名，而是匿名函数，则不管如何都没法取消这个事件，由于咱们没法找这个函数的引用。
• 事件的参数要对应，好比监听的是捕获时的事件（第三个参数为true）时，咱们取消时也须要设置一样的值，反之亦然。

上面提到addEventListener第三个参数也能够是个对象，咱们平时通常不多会用到（至少我是不多用），下面就给你们仔细介绍下以便一块儿记忆,看下面的代码:

el.addEventListener(eventType, optionFunction, {
    capture: false, // 和直接把第三个参数填写布尔值同样，表明是否为捕获时触发事件
    once: false, // 默认fasle，是否只执行一次
    passive: false //默认为false，表明是否承诺浏览器不会调用e.preventDefault()来阻止默认行为
    })

复制代码

对于addEventListener第三个参数里的passive，在多讲几句吧，以下：

• 背景：对于一个事件监听，浏览器是不知道他会不会执行默认行为（好比滚动条等），因此浏览器只能等事件结束了才会执行默认行为，而不少状况下，咱们是不会禁止行为的，可是没办法，咱们没有给浏览器承诺，因此浏览器每次都须要等你执行完事件函数的东西才能知道你没有调用e.preventDefault()，而后才执行默认行为，这就形成了资源郎芬
• 优势：对于一些咱们不会阻止默认行为的状况，咱们在监听函数的时候，设置了passive：true，浏览器就会提早知道你并不会使用e.preventDefault(),浏览器就会本身进行优化无需等事件处理函数执行完就能够执行默认行为，这样在有些极端状况下（好比处理特别频繁的事件中好比，touchmove，scroll）会提升不少的性能
• 表现： 若是设置了passive：true，可是咱们又设置了e.preventDefault()呢，亲测chrome浏览器下会报错，Unable to preventDefault inside passive event listener invocation.

关于event

event.target和event.currentTarg区别

• event.target: 返回触发事件的元素（在事件委托中用的就是target）
• event.currentTarget: 返回绑定事件的元素

下面是我本身实现小型jq中的on方法（ dom绑定事件）

通常状况下

on(evtName, evtFunc, isCatch = true) {

        document.addEventListener(evtName, (e) => {
            this.domList.forEach(dom => {
                if (e.target == dom) {
                    evtFunc.call(e.target);
                }
            })
        }, isCatch);
    }
    

     $(".lala").on('click',function(){
      console.log(this);// 打印当前触发事件的元素
    })

复制代码

若是上面的evtFunc.call(e.target);为 evtFunc.call(e.currentTarget);

on(evtName, evtFunc, isCatch = true) {

        document.addEventListener(evtName, (e) => {
            this.domList.forEach(dom => {
                if (e.target == dom) {
                    evtFunc.call(e.currentTarget);
                }
            })
        }, isCatch);
    }
    

     $(".lala").on('click',function(){
      console.log(this);// 这里无论点击谁都打印  document了，由于是document绑定的事件
    })

复制代码

总结

以上是我对js事件的一些总结，全部的代码都算是我直接在有道云敲的，没有用ide，入股哪里有写错的，还请你们给以友善的提醒，或者有些的不合适甚至错的地方，你们一块儿来纠正学习。

写这些只是一个开始，我一会会按期更新基础知识点的，但愿你们一块儿来总结学习，有没有发现不少知识，废了很久的劲儿学会了，可是长久不用又忘了，这就须要咱们学习的时候 即便总结下来，咱们才会记得久一点。 若是想和我一块儿学习的，欢迎加个人学习群前端杂货铺(小游戏/Vue)啦啦啦，群聊号码：677482875，你们一块儿交流，嘻嘻哒。

from：爱你的蜗牛。