js 事件（绑定、解绑、三个阶段、相关方法）

事件绑定与解绑：

DOM0级事件(这类事件可以使用 return false来阻止事件往下执行，包含默认事件)

绑定：

html内<input οnclick=''>
js中el.οnclick=''

解绑： el.onclick = null

DOM2级事件（三个参数：事件名称，要分配的函数和处理函数是用于冒泡阶段(false)还是捕获阶段(true)，默认为冒泡阶段false；这类事件可以使用 event.preventDefault()来阻止默认事件）

绑定：el.addEventListener('', func, bool)

解绑：el.removeEventListener( '', func, bool )

（如果使用addEventListener()将事件处理函数加入到捕获阶段，则必须在removeEventListener()中指明是捕获阶段，才能正确地将这个事件处理函数删除）

触发：el.dispatchEvent(event)

DOM3级事件，在DOM2级事件的基础上添加了更多的事件类型，全部类型如下：

UI事件，当用户与页面上的元素交互时触发，如：load、scroll

焦点事件，当元素获得或失去焦点时触发，如：blur、focus

鼠标事件，当用户通过鼠标在页面执行操作时触发如：dbclick、mouseup

滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel

文本事件，当在文档中输入文本时触发，如：textInput

键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress

合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart

变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified

同时DOM3级事件也允许使用者自定义一些事件。

三个阶段（这里是冒泡型事件，同时也是浏览器默认的事件处理方式）

当鼠标点击所看到的的按钮时，其实发生了一系列的事件传递，可以想象一下，button实际上是被body“包裹”起来的，body是被html“包裹”起来的，html是被document“包裹”起来的，document是被window“包裹”起来的。所以，在你的鼠标点下去的时候，最先获得这个点击的是最外面的window，然后经过一系列传递才会传到最后的目标button，当传到button的时候，这个事件又会像水底的泡泡一样慢慢往外层穿出，直到window结束。

综上，一个事件的传递过程包含三个阶段，分别称为：

捕获阶段，目标阶段，冒泡阶段

目标指的就是包裹得最深的那个元素。

冒泡型事件只会发生在事件冒泡阶段，同理捕获型事件只会发生在事件捕获阶段

相关方法：

event.preventDefault() ：

通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作)，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作

event.stopPropagation() ：

既可阻止冒泡也可阻止捕获

event.stopImmediatePropagation() ：

既可阻止冒泡也可阻止捕获，同时还能阻止该元素的后续相同事件的发生(addEventListener添加多个事件监听，多个事件监听按顺序执行)

欢迎关注、点赞

js 事件（绑定、解绑、三个阶段、相关方法）相关推荐

jquery事件绑定解绑机制源码分析
引子为什么Jquery能实现不传回调函数也能解绑事件?如下: $("p").on("click",function(){alert("The par ...
JQuery事件绑定解绑方法小结
常用的方法绑定:bind().delegate().on() 解绑:unbind().undelegate().off() 此外还有live() 不过JQuery1.9及其以上版本删除了此方法推荐 ...
Vue-组件自定义事件(绑定和解绑)
组件自定义事件(绑定) 像click,change这些都是js的内置事件,我们可以直接使用,本次我们学习自己根据需求打造全新的事件,但是js内置的是给html元素用的,本次的自定义事件是给组件用的注 ...
11-jQuery的事件绑定和解绑
[转]11-jQuery的事件绑定和解绑 1.绑定事件语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type ( ...
原生JS事件绑定的三种方式
JavaScript绑定事件的方法要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定"事件处理函数".所谓事件处理函数,就是处理用户操作的函数,不同的 ...
uniapp 账号登陆，账号绑定/解绑流程，躺坑
第一次开发uniapp微信小程序,记录一下开发中遇到的流程以及坑账号登陆 1.uni.login 获取code,在调用接口传入code获取uKey 绑定账号/解绑 1.uni.login获取code ...
jQuery的事件绑定和解绑
1.绑定事件语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type (String) : 事件类型 data ( ...
jQuery事件绑定和解绑
jQuert事件 1.1. jQuery 事件注册 jQuery 为我们提供了方便的事件注册机制,是开发人员抑郁操作优缺点如下: 优点: 操作简单,且不用担心事件覆盖等问题. 缺点: 普通的事件注 ...
03-jQuery事件绑定和解绑
文章目录一.绑定事件二.解绑和触发一.绑定事件 on().one().hover().常用事件函数 on(): 1.基础绑定事件语法:元素集合.on('事件类型',事件处理函数) $('div ...
linux 网卡绑定解绑,网卡绑定开机绑定，关机解绑
Linux下实现双网卡负载均衡系统环境:RHEL5根据甘肃兰州实际情况的双网卡绑定方案, 方案思路:开机绑定,关机解绑一.建立虚拟网络接口ifcfg-bond0文件[root@yangwenjun ...

js 事件（绑定、解绑、三个阶段、相关方法）

js 事件（绑定、解绑、三个阶段、相关方法）相关推荐

最新文章

热门文章