欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

DOM事件类详解,有这一篇就够了

程序员文章站 2022-06-15 13:56:01
...

DOM事件的级别

  1. DOM0 element.onclick = function(){}
  2. DOM2 element.addEventListener(‘click’, funttion(){}, false)
  3. DOM3 element.addEventListener(‘keyup’, funttion(){}, false)

DOM3 较 DOM2 多了很多事件类型

DOM事件流

概念: 完成的时间流分三个阶段,捕获、目标阶段、冒泡;

事件通过捕获到达目标元素,再从目标元素冒泡至window对象的过程就是事件流。

捕获:是由上至下的过程,那么事件流最先接触哪个对象呢?

答案是window对象,其次是document>>html标签>> body>>…… >>目标元素
冒泡则相反

Event 对象的常见应用

  1. event.preventDefault()

阻止默认事件,比如阻止a标签跳转

  1. event.stopPropagation()

阻止冒泡行为

  1. event.stoplmmediatePropagation()

若一个dom元素绑定了两个点击事件a、b,若点击该元素,只想执行其中一个事件a,而阻止事件b,在a中的函数添加该行代码即可,属于事件响应的优先级

  1. event.target

当5个子元素 都要绑定一个行为,为了优化我们利用事件委托,可以在其父元素上绑定该行为,并通过event.target寻找触发事件的父元素的子元素

  1. 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、元素本身;绑定先后顺序无影响。