事件

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

  • DOM0级事件
var btn = document.getElementById("myBtn");
btn.onclick = function(){
    //do sth...
    console.log(this); // myBtn
}
// 事件以'on'开头,如onmouseover, onmouseout等

使用DOM0级方法指定的事件处理程序被认为是元素的方法,此时事件处理程序是在元素的作用域里中运行,所以此时this指向的是元素本身。而且这种添加方式的缺陷是,只能存在一个处理程序,如果再次向同一个元素添加另外一个处理程序,上一个处理程序会被覆盖。

  • DOM2级事件
    DOM2级别事件监听使用的方法为:
var btn = document.getElementById("myBtn");
btn.addEventListener("事件名", function(){
    //do sth...
    console.log(this); // myBtn
});

这样的添加方式比起DOM0级更灵活,它可以给一个同一个元素添加多个处理事件。同时它的this也同样指向元素本身。

2.attachEvent与addEventListener的区别?

  • 接收参数不同
    attachEvent()接收两个参数,一个事件,一个事件的处理函数,且不支持事件捕获。
    addEventLisner接受三个参数,一个事件,一个事件的处理函数,第三个参数是boolean,如果为false是事件冒泡,true,则为事件捕获。第三个参数可选,默认值为false。

  • 第一个参数意义不同
    attachEvent接受的第一个参数的意义是事件处理函数的名称,而addEventListener指的是参数事件类型。只需在参数事件类型前加'on'就可以了。

  • 事件处理程序的作用域不同
    addEventListener的作用域是元素本身,this是指的触发元素,而attachEvent事件处理程序会在全局变量内运行,this是window。

  • 为一个事件添加多个处理程序时,执行顺序不同
    addEventListener添加会按照添加顺序执行,而attachEvent添加会往往按照反序执行,添加的多了就没有规律而言。

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

  • 事件冒泡
    当我们触发某种事件,首先会精准判断触发事件的元素到底是哪一个具体的元素,然后再层层往上报,最终触发到document。举个例子来说.
<!DOCTYPE html>
<html>
  <body>
    <div>
        <li>
          <input>
        </li>
    </div>
  </body>
</html>

假如给<input>绑定一个点击事件,首先input会监听到这个时间,触发事件处理函数,然后再往上报,也会触发<li>的点击处理函数,再往上报,依次类推。

  • DOM2级事件处理程序
    分为三个阶段,第一个阶段,事件捕获,由window-html-body-父-子。这一阶段为截取事件提供了机会。
    第二个阶段,目标阶段,传递到目标,
    第三阶段,冒泡阶段,再倒序的传

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

  • 阻止事件冒泡
    用stopPropagation()方法可以停止事件在DOM层次的传播,即取消进一步事件的捕获或者冒泡。
  • 阻止默认事件
    用preventDefault()阻止默认事件。

5.有如下代码,要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容

http://js.jirengu.com/gahudaguni/1/edit?html

6. 补全代码,要求:

当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素,内容为用户输入的非空字符串;当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.
当点击每一个元素li时控制台展示该元素的文本内容。
代码一:http://js.jirengu.com/noloholona/1/

代码二 http://js.jirengu.com/kayufuboxa/1/

7.补全代码,要求:当鼠标放置在li元素上,会在img-preview里展示当前li元素的data-img对应的图片

代码一:http://js.jirengu.com/hataqefuca/1/
代码二:http://js.jirengu.com/veyedudaqe/1/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、问答 1. dom对象的innerText和innerHTML有什么区别? innerHTML: 也就是从对象...
    饥人谷_罗伟恩阅读 3,853评论 0 2
  • 声明:本文来源于http://www.webzsky.com/?p=731我只是在这里作为自己的学习笔记整理一下(...
    angryyan阅读 11,957评论 1 6
  • 一、dom对象的innerText和innerHTML有什么区别? innerHTML返回的是从对象起始位置到终止...
    __Qiao阅读 3,169评论 0 0
  • 如何批量操作 css 如何获取 DOM 计算后的样式 使用getComputedStyle获取元素计算后的样式 实...
    _Dot912阅读 3,717评论 1 3
  • 问答 1、dom对象的innerText和innerHTML有什么区别? innerText属性①innerTex...
    鸿鹄飞天阅读 3,846评论 0 1

友情链接更多精彩内容