原生js之DOM事件相关

时间 2019-11-09

原文原文链接

前端学习的东西有不少，现代前端开发，前端工程化的东西要懂，基础的原生js也要懂，毕竟，框架都是有生命周期的，更替很是快，然而却有这么一个框架，它是最轻量的前端框架，每一个浏览器都内置，它叫vanilla.js。好吧，其实vanilla.js就是原生js，不过是网上的一个玩笑而已，可是却能说明一个很重要的问题，就是原生js很重要，因此这部分文章是关于前端开发中原生js的一系列问题的，这篇谈一谈DOM事件。javascript

DOM事件级别

DOM分四个级别，一级，二级，三级，没有零级可是一般把DOM1规范造成以前的称为DOM0。而因为1级DOM标准中并无定义事件相关的内容，因此DOM事件级别只包括DOM0级，DOM2级和DOM3级三种。html

首先来看不须要操控DOM的事件前端

<button type="button" onclick="log()"></button>
<script>
    function log() {
        console.log('Hello World');
    }
</script>

这段代码你们确定都见过，不须要控制DOM，事件处理时间的函数直接写在html属性中。固然实际开发中应该没有人这样写了，理由也很简单，html和js强耦合，不管是编写仍是维护都没有任何好处，因而就有了DOM事件处理。java

DOM0级事件

一样以上面的程序为例，使用DOM0事件处理就是下面的样子git

<button id="btn" type="button"></button>
<script>
    var btn = document.getElementById('btn');
    btn.onclick = function() {
        console.log('Hello World');
    }
</script>

一样很简单，前端开发者必定都不陌生，DOM0事件定义须要两部，先找到DOM节点，而后把处理函数赋值给该节点对象的事件属性。若是想解除事件，那么只要把null赋值给事件属性便可。DOM0级事件没法给一个事件添加多个处理函数，github

DOM2级事件

上面的程序使用DOM2级事件处理就是这样的前端工程化

<button id="btn" type="button"></button>
<script>
    var btn = document.getElementById('btn');
    function log() {
        console.log('Hello World');
    }
    btn.addEventListener('click', log, false);
</script>

DOM2级事件使用addEventListener，里面有三个参数，第一个参数是事件名，就是事件属性去掉on，第二个参数是事件处理函数，第三个参数是是否在事件捕获阶段执行（关于事件冒泡和事件捕获下面会介绍）。使用DOM2事件能够随意添加多个处理函数，移除DOM2事件要用removeEventListener，传入的三个参数与添加事件彻底相同。特别的旧版本IE浏览器（IE8及一下），须要使用attachEvent和detachEvent来添加和移除事件,传入两个参数第一个是事件属性（包含on），第二个是处理函数，不支持事件捕获因此没有第三个参数。浏览器

DOM3级事件

DOM3级事件就是在DOM2基础上增长了更多的事件类型前端框架

UI事件，当用户与页面上的元素交互时触发，如：load、scroll
焦点事件，当元素得到或失去焦点时触发，如：blur、focus
鼠标事件，当用户经过鼠标在页面执行操做时触发如：dbclick、mouseup
滚轮事件，当使用鼠标滚轮或相似设备时触发，如：mousewheel
文本事件，当在文档中输入文本时触发，如：textInput
键盘事件，当用户经过键盘在页面上执行操做时触发，如：keydown、keypress
合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart
变更事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified

DOM事件级别的发展使得事件处理更加完整丰富，而下一个问题就是以前提到的事件冒泡和事件捕获。框架

事件冒泡和事件捕获

有如下HTML结构

<html>
    <body>
        <div>
            <span>
                我是目标内容
            </span>
        </div>
    </body>
</html>

如今给最里面的目标内容绑定事件，就会有一个从事件源和目标之间的事件流，此例中，事件流的方向为window -> document -> html -> body -> div -> span -> 目标 -> span -> div -> body -> html -> document -> window ,整个事件流分为两个部分，以事件目标为界限，从window到目标这个过程为事件捕获，从目标回到window的过程叫事件冒泡。如图所示：

事件默认的处理阶段为冒泡阶段，能够把addEventListener第三个参数设置为true来让时间在捕获阶段被处理，不过一般不建议这样作。实际开发中，常常会利用到事件冒泡，也常常须要阻止事件冒泡，这就涉及到事件对象event的相关内置方法和属性了。

event对象

事件处理函数会回调一个参数event，表明当前事件对象，event中有不少经常使用的方法和属性

preventDefault 阻止默认行为，好比当点击submit按钮时候，能够采用此方法阻止表单提交。
stopPropagation 中止事件冒泡，须要防止事件冒泡带来的负面影响的时候就要使用该方法。
stopImmediatePropagation 阻止后续事件，该方法除了阻止事件冒泡外在当前事件被绑定多个处理程序的时候，后续的处理程序也会被阻止。
currentTarget 此属性返回当前事件所绑定的对象。
target 此属性返回当前触发事件的对象，注意target是触发事件的对象，是真正的事件源，一样以上面的HTML为例，给div绑定一个事件，点击带文字的span后，target是span，而currentTarget是div。

事件冒泡和target属性能作不少事情，好比考虑下面的结构

<ul id="click">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>

若是想要实现点击每一个li标签就能打印出文本内容，咱们能够不用给每一个li绑定事件，只须要利用事件冒泡便可

var click = document.getElementById('click');
  click.addEventListener('click', log, false);
  function log(e) {
    console.log(e.target.innerText);
  }

自定义事件

除了系统内置的事件外，咱们还能够自定义事件，因为平时使用的很少可能感受会很高端，其实自定义事件并不复杂

var myEvent = new Event('myEvent');
  document.addEventListener('myEvent', log, false);
  function log() {
    console.log('hello event');
  }
  document.dispatchEvent(myEvent);

经过建立Event对象来建立事件，经过dispatchEvent函数派发事件。自定义事件能够绑定到任意DOM元素上，此处选择document只是为了演示方便。

以上就是关于DOM事件的相关内容总结，接下来后面还会有其余技术的相关文章。
欢迎关注https://fx109138.github.io/