avatar

目录
DOM事件

DOM事件级别

  1. DOM0 element.onclick=function(){}

  2. DOM2

    1. 第一个参数是事件名(如click);第二个参数是事件处理程序函数;第三个参数如果是true则表示在捕获阶段调用,为false表示在冒泡阶段调用。
    2. elemnt.addEventListener(‘click’,function(){},false) elemnt.removeEventListener(‘click’,function(){},false)
    3. elemnt.attachEvent(‘onclick’,function(){}) elemnt.attachEvent(‘onclick’,function(){}) 兼容IE7、IE8等早期版本
  3. DOM3 elemnt.addEventListener(‘keyup’,function(){},false) 同上,增加了鼠标、键盘等事件

ps:不能移除匿名添加的函数。

为什么没有DOM1

DOM1于1998年10月1日成为W3C推荐标准。DOM1标准中并没有定义事件相关的内容,所以没有所谓的DOM1事件模型

DOM事件模型

冒泡和捕获

DOM事件流

事件捕获阶段、处于目标阶段和事件冒泡阶段

捕获->目标阶段->冒泡

描述DOM事件捕获的具体流程

window->document->html->body->···->目标元素

Event对象的常见问题

  1. event.preventDefault() 阻止默认是行为

  2. event.stopPropagation() 阻止冒泡

  3. event.stoplmmediatePropagation() 事件优先级

  4. event.currentTarget 当前绑定事件的对象

  5. event.target 当前点击对象

文章作者: gating
文章链接: https://gatings.cn/2018-03-28/DOM%E4%BA%8B%E4%BB%B6/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 磨蹭先生
打赏
  • 微信
    微信
  • 支付宝
    支付宝

评论