事件

1.DOM0 事件和DOM2级在事件监听使用方式上有什么区别?

  • DOM0事件是将一个函数赋值给一个事件处理程序属性:
var btn=document.getElementById("xxx")
btn.onclick=function(){
      //代码
}

有一个缺陷就是只能处理一个程序,如果再次向同一个元素添加同一个事件,将会被最后的覆盖。

  • DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作:
    • addEventListener
    • removeEventListener
var btn=document.getElementById("xxx")
btn.addEventListener('click',function(){
       //代码
},true/false)

第一个参数为绑定什么事件,
第二个参数是事件发生什么,
第三个参数如果是
true表示在捕获阶段调用事件处理程序,
如果是false,则是在事件冒泡阶段处理

2.attachEvent与addEventListener的区别?

1.参数个数不相同,这个最直观,addEventListener有三个参数,attachEvent只有两个,attachEvent添加的事件处理程序只能发生在冒泡阶段,addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理(我们一般为了浏览器兼容性都设置为冒泡阶段)

element.addEventListener("Event",function(){},true/false)

element.attachEvent("Event",function(){})

2.第一个参数意义不同,addEventListener第一个参数是事件类型(比如click,load),而attachEvent第一个参数指明的是事件处理函数名称(onclick,onload)

3.事件处理程序的作用域不相同,addEventListener的作用域是元素本身,this是指的触发元素,而attachEvent事件处理程序会在全局变量内运行,this是window,所以刚才例子才会返回undefined,而不是元素id

4.为一个事件添加多个事件处理程序时,执行顺序不同。addEventListener 会按照添加的顺序执行。 attachEvent 添加多个事件处理程序时,顺序是无规律的。

3.解释IE事件冒泡和DOM2事件传播机制?

  • 事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的元素

  • DOM事件流:DOM2级事件规定事件流包括三个阶段,事件捕获阶段,处于目标阶段,事件冒泡阶段,首先发生的是事件捕获,为截取事件提供机会,然后是实际目标接收事件,最后是冒泡阶段;

ps:Opera、Firefox、Chrome、Safari都支持DOM事件流,IE不支持事件流,只支持事件冒泡

Paste_Image.png

4.如何阻止事件冒泡? 如何阻止默认事件?

  • DOM
    阻止冒泡
element.onclick=function(e){
      e.stopPropagation(); 
}
element.addEventListener("event",function(e){
      e.stopPropagation(); 
})

组织默认事件:

element.onclick=function(e){
     e.preventDefault();  
}

element.addEventListener("event",function(e){
      e.preventDefault(); 
})
  • IE
    阻止冒泡:e.cancelBubble = true;
    阻止默认事件:event.returnValue = false;
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • JavaScript 程序采用了异步事件驱动编程模型。在这种程序设计风格下,当文档、浏览器、元素或与之相关的对象发...
    劼哥stone阅读 5,025评论 3 11
  • 声明:本文来源于http://www.webzsky.com/?p=731我只是在这里作为自己的学习笔记整理一下(...
    angryyan阅读 11,940评论 1 6
  • 一、问答 1. dom对象的innerText和innerHTML有什么区别? innerHTML: 也就是从对象...
    饥人谷_罗伟恩阅读 3,800评论 0 2
  • 如何批量操作 css 如何获取 DOM 计算后的样式 使用getComputedStyle获取元素计算后的样式 实...
    _Dot912阅读 3,652评论 1 3
  • 事件 JavaScript和HTML的交互是通过事件实现的。JavaScript采用异步事件驱动编程模型,当文档、...
    徐国军_plus阅读 3,701评论 0 2