Dom事件类

一、基本概念：Dom事件的级别

• DOM0 --- element.onclick = function() {}
• DOM2 --- element.addEventListener('click', function() {}, 'false') --- true 表示事件捕获 ，false 表示事件冒泡
• DOM3 --- element.addEventListener('keyup', function() {}, 'false') --- DOM3其实是在DOM2的基础上增加了一些事件，比如键盘事件，鼠标事件等等，其用法和DOM2相同

二、Dom事件模型

★ 捕获 --- 从window元素开始发生，一直到目标元素

     冒泡 --- 从目前元素开始发生，一直到window元素

三、Dom事件流

• 什么是事件流：大白话的说就比如我在页面上点击鼠标右键，这个右键如何反应到页面上，这就是一个事件流的过程
• 如何响应的：
  • 一个完整的事件流分为三个阶段：
    • 第一阶段：捕获
    • 第二阶段：目标阶段（点击鼠标）--- 事件通过捕获到达目标元素的过程
    • 第三阶段：冒泡

四、描述Dom事件捕获的具体流程

• 捕获 --- window --> document --> html --> body --> ... --> 目标元素
• 冒泡 --- 目标元素 ... --> body --> html --> document --> window
• 补充扩展：
  • 扩展一个可能会遇到的小问题：就是如何获取html标签
    • 通过document.documentElement来获取

<div id="ev">
        目标元素
    </div>
    <script type="text/javascript">
        var ev=document.getElementById('ev')
        window.addEventListener('click',function (){
            console.log("window")
        },true)
        document.addEventListener('click',function (){
            console.log("document")
        },true)
        document.documentElement.addEventListener('click',function (){
            console.log("html")
        },true)
        document.body.addEventListener('click',function () {
            console.log("body")
        },true)
        ev.addEventListener('click',function (){
            console.log('ev')
        },true)
    </script>
    //window ->document ->html ->body ->body -->ev 

五、event事件的常见应用

1、event.preventDefault():

event.preventDefault() 方法阻止元素发生默认的行为。

$("a").click(function(event){
    event.preventDefault();
});
//不会被执行

2、event.stopPropagation()

event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。

3、event.stopImmediatePropagation():

event.stopImmediatePropagation() 方法阻止剩下的事件处理程序被执行。

阻止事件冒泡并且阻止相同事件的其他侦听器被调用

$(document).ready(function(){
	$("div").click(function(event){
		alert("事件句柄 1 被执行");
		event.stopImmediatePropagation();
	});
	$("div").click(function(event){
		alert("事件句柄 2 被执行");
	});
	$("div").click(function(event){
		alert("事件句柄 3 被执行");
	});
});

4、event.currentTarget:

event.currentTarget 属性是在事件冒泡阶段内的当前 DOM 元素，通常等于this。

5、event.target

event.target 属性返回哪个 DOM 元素触发了事件。

六、自定义事件

var eve=new Event('test')
ev.addEventListener('test',function (){
   // 绑定事件名称
   console.log('我是自定义事件')
})
ev.dispatchEvent(eve) //通过dispatchEvent 来触发事件