码迷,mamicode.com
首页 > 其他好文 > 详细

DOM事件总结

时间:2018-06-30 18:46:20      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:elb   ret   方式   style   鼠标   大小   接受   add   参考资料   

1.DOM事件:

DOM0: element.onclick=function(){}

DOM2: element.addEventListener(‘click’,function(){}) 

addEventer接受三个参数:

  • type:事件名称,大小写敏感。
  • listener:监听函数。事件发生时,会调用该监听函数。
  • useCapture:布尔值,表示监听函数是否在捕获阶段(capture),默认为false(监听函数只在冒泡阶段被触发)。该参数可选。

DOM3: element.addEventListener(‘keyup,function(){}) 与DOM2添加事件的方式一致,知识增加了鼠标、键盘事件

2.DOM事件模型:捕获和冒泡,IE只有冒泡

3.事件流:即事件是怎么触发的,分为三个阶段

  • 第一阶段:从window对象传导到目标节点(上层传到底层),称为“捕获阶段”(capture phase)。
  • 第二阶段:在目标节点上触发,称为“目标阶段”(target phase)。
  • 第三阶段:从目标节点传导回window对象(从底层传回上层),称为“冒泡阶段”(bubbling phase)

DOM事件的捕获过程:window ->document->html(document.documentElement)->body(document.body)->…

4.event对象的常用方法

event.preventDefault() 阻止默认事件

stopPropagation():阻止事件的传播

stopImmediatePropagation() 如果某个元素有多个相同类的事件监听函数,则当事件触发时,多个事件监听函数将按照顺序依次执行.如果某个监听函数执行了 event.stopImmediatePropagation,则除了该事件的冒泡行为被阻止之外(event.stopPropagation方法的作用),该元素绑定的后序相同类型事件的监听函数的执行也将被阻止.

event.target:当前事件目标,即触发事件的节点

event.currentTarget:当前绑定的事件

示例:使用事件代理,点击li标签时,e.target=li 而e.currentTarget始终是ul

<ul>
   <li>1</li> 
   <li>2</li> 
   <li>3</li> 
   <li>4</li> 
</ul>

var ul = document.querySelector(ul);

ul.addEventListener(click, function (event) {
  if (event.target.tagName.toLowerCase() === li) {
    // some code
  }
});

5.事件代理

由于事件会在冒泡阶段向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理(delegation)

6.自定义事件

var event = new CustomEvent(build, { detail: hello }); 
//也可以用
var event = new Event(‘build‘)来自定义事件
document.body.addEventListener(build, function (e) {
  console.log(e.detail);
});
document.body.dispatchEvent(event); //触发事件

customEvent API接口 https://developer.mozilla.org/zh-CN/docs/Web/API/CustomEvent

7.IE事件模型和普通事件模型的区别

  IE事件模型   DOM事件模型
监听事件 element.atachEvent ("on"+type,handler);

element.addEventListener(type,handler);

element["on"+type]=handler;

取消事件   element.detachEvent("on"+type,handler);

 element.removeEventListener (type,handler);

 element["on"+type]=null;

获取事件对象  window.event    event
 获取事件目标  event.target  event.srcElement
 取消事件的默认行为   event.preventDefault();   event.returnValue=false; 
 取消事件的传播  event.stopPropagation();  event.cancelBubble=true;     //IE的event事件,阻止冒泡

参考资料:http://javascript.ruanyifeng.com/dom/event.html

DOM事件总结

标签:elb   ret   方式   style   鼠标   大小   接受   add   参考资料   

原文地址:https://www.cnblogs.com/jingmi-coding/p/9248188.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!