注册事件处理程序-事件传递过程-阻止事件

---

前言

今天的内容有点多所以我给分成了两部分,这是上半部分,主要是关于事件的善后和处理。OK~我们开始

---

一、注册事件的处理程序

事件处理程序的作用

通过常规的方式去注册绑定相同类型的事件时会出现事件覆盖的现象

//获取box元素
var box = document.getElementsByClassName('box');
//给box绑定事件

//第一个绑定的事件会被第二个覆盖掉,因为这种绑定的方式是通过赋值的方式进行的
box.onclick = function(){
	console.log('a');
}
//最后会执行这个事件
box.onclick = function(){
	console.log('b');
}

由案例可知,相同类型的事件同时绑定时只会执行一个 , 这个问题可以通过事件处理程序进行解决

事件处理程序应用

事件源.addEventListener(“事件类型”,function(){},false)

//还是要先获取元素
var box = document.getElementById('box');
//我觉得获取完元素之后要养成验证是否获取的习惯,否则写一大堆代码都不知道错在哪
//验证是否获取成功
console.log(box);
//通过事件处理程序绑定事件
box.addEventListener("click",function(){
	console.log('a');
})
box.addEventListener("click",function(){
	console.log('b');
})

注意 : 首先事件的类型一定不能带on 一定不能带on 一定不能带on , 我说了三遍都懂什么意思吧 。然后就是第三个参数true/false可以省略且默认值为false , 具体是什么意思下面事件传递过程时解释

二、事件传递过程

事件从触发到完成总共分为3个阶段分别是 : 捕获阶段 , 目标阶段 , 和冒泡阶段。

由图可见 一个完整的事件执行过程是从window开始最后到window结束的
事件的执行过程分为三个阶段 1~5 为捕获过程 5~6为目标阶段 6~10为冒泡阶段

//父亲元素
var div = document.getElementsByTagName("div");
//儿子元素
var btn = document.getElementsByTagName("button")[0];
//给儿子绑定点击事件
btn.onclick = function(){
     alert("点击事件被触发了1");   		
}
//给父亲绑定点击事件
div[0].onclick = function(){
      alert("div接受到了btn传递上来的事件了1");
}
//给根元素绑定点击事件
window.onclick = function(){
      alert("window");
}

执行上面的代码会发现当你点击子盒子时div[0]和window的点击事件也会触发 。这是因为浏览器默认监听执行冒泡阶段 , 冒泡阶段是从事件源返回window所以会先打印btn的绑定事件其次是div[0]最后为window

这时候事件处理程序的第三个参数就可以讲了 当第三个参数为true时将监听阶段改为捕获阶段否则则还是冒泡阶段

三、阻止事件

有些时候我们并不想让冒泡事件或者捕获事件出现这时候就要有阻止的勇士来拦住这些事件

阻止事件传播

使用事件对象的 stopPropageation() 方法停止事件传播

阻止默认事件

有的时候有些默认事件真的很烦人比如a标签的刷新页面 , oncontextmenu事件触发的时候会触发浏览器自己的右击菜单,这时候就需要阻止默认事件

阻止默认事件的方法

1. preventDefault()方法 添加给要阻止的对象
2. return false

单词总结

add		加,增加		event	事件		list	列表
stop	停止		propageation 传播	prevent 预防,阻止
default 违约,系统默认值

总结

今天的总结就到此为止,主要学习了一个新的绑定事件的方法,了解了事件的执行流程,并且知道了如何阻止默认事件的发生,还有阻止事件的方法.今天的总结就到此为止 拜~~