DOM事件

时间 2019-11-05

标签 dom 事件栏目 HTML 繁體版

原文原文链接

DOM事件级别：有 DOM0级，DOM2级和DOM3级三种；

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

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

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

DOM0级事件

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

DOM0事件定义须要两步，先找到DOM节点，而后把处理函数赋值给该节点对象的事件属性。若是想解除事件，那么只要把null赋值给事件属性便可。DOM0级事件没法给一个事件添加多个处理函数。
java

DOM2级事件

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

DOM2级事件使用addEventListener，里面有三个参数，第一个参数是事件名，就是事件属性去掉on，第二个参数是事件处理函数，第三个参数是一个布尔值（true表示在捕获阶段触发、false表示在冒泡阶段触发）。使用DOM2事件能够随意添加多个处理函数，移除DOM2事件要用removeEventListener，传入的三个参数与添加事件彻底相同。特别的旧版本IE浏览器（IE8及一下），须要使用attachEvent和detachEvent来添加和移除事件。
浏览器

DOM3级事件

DOM3级事件就是在DOM2基础上增长了更多的事件类型，咱们能够从（鼠标事件、键盘事件，HTML事件，表单事件）bash

事件模型：事件捕获，事件冒泡函数

有如下HTML结构
ui

<html>
	<body>
		<div>
			<span>
				我是目标区域
			</span>
		</div>
	</body>
</html>复制代码

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

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>事件捕获和事件冒泡</title>
  </head>
  <body>
        <div>
		span>
		    我是目标区域
		</span>
	</div>
    <script type="text/javascript">
      window.addEventListener('click',function(){
        console.log('window被点击');
      },true);
      document.documentElement.addEventListener('click',function(){
        console.log('document被点击');
      },true);
      document.querySelector('html').addEventListener('click',function(){
        console.log('html被点击');
      },true);
      document.querySelector('body').addEventListener('click',function(){
        console.log('body被点击');
      },true);
      document.querySelector('div').addEventListener('click',function(){
        console.log('document被点击');
      },true);
      document.querySelector('span').addEventListener('click',function(){
        console.log('span被点击');
      },true);
    </script>
  </body>
</html>复制代码

上面的触发span点击事件后，打印结果以下：code

上面的代码是捕获阶段触发，顺序能够打乱，打印结果是一致的。cdn

自定义事件

除了系统内置的事件外，咱们还能够自定义事件

var ev = new Event('defineEvent');
document.addEventListener('defineEvent',function(){
	//添加本身想要的逻辑
	console.log('打印XXX')
},false);
document.dispatchEvent(ev) 
复制代码

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