事件绑定与解绑:
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添加多个事件监听,多个事件监听按顺序执行)
欢迎关注、点赞