DOM事件类详解,有这一篇就够了
程序员文章站
2022-06-15 13:56:01
...
DOM事件的级别
- DOM0 element.onclick = function(){}
- DOM2 element.addEventListener(‘click’, funttion(){}, false)
- DOM3 element.addEventListener(‘keyup’, funttion(){}, false)
DOM3 较 DOM2 多了很多事件类型
DOM事件流
概念: 完成的时间流分三个阶段,捕获、目标阶段、冒泡;
事件通过捕获到达目标元素,再从目标元素冒泡至window对象的过程就是事件流。
捕获:是由上至下的过程,那么事件流最先接触哪个对象呢?
答案是window对象,其次是document>>html标签>> body>>…… >>目标元素
冒泡则相反
Event 对象的常见应用
- event.preventDefault()
阻止默认事件,比如阻止a标签跳转
- event.stopPropagation()
阻止冒泡行为
- event.stoplmmediatePropagation()
若一个dom元素绑定了两个点击事件a、b,若点击该元素,只想执行其中一个事件a,而阻止事件b,在a中的函数添加该行代码即可,属于事件响应的优先级
- event.target
当5个子元素 都要绑定一个行为,为了优化我们利用事件委托,可以在其父元素上绑定该行为,并通过event.target寻找触发事件的父元素的子元素
- event.currentTarget
仍是4的例子,可以找到当前绑定事件的对象,就是4步骤的父元素,而非子元素
自定义事件
var eve = new Event('custome')
element(dom节点).addEventListen('custome', function(){})
element(dom节点).dispatchEvent(eve)
**注意** Event 可以替换为 CustomEvent,区别在于CustomEvent可以接受一个对象参数
另外为了提高大家对捕获过程的理解:请观察如下代码就很明白了从上至下的捕获过程,冒泡反之
var ele = document.getElementById('id')
window.addEventListen('click',function(){console.log('触发了window层')}, true) //第三个参数默认为false,执行冒泡机制,true为捕获阶段
document.addEventListen('click',function(){console.log('触发了document层')}, true)
document.documentElement.addEventListen('click',function(){console.log('触发了html层')}, true)
document.body.addEventListen('click',function(){console.log('触发了boy层')}, true)
document.body.addEventListen('click',function(){console.log('触发了boy层')}, true)
ele.addEventListen('click',function(){console.log('触发了element元素层')}, true)
点击element元素,依次打印 触发了 window、document、html、body、元素本身;绑定先后顺序无影响。