DOM事件

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

Dom0事件将函数赋值给事件处理程序属性。此时的事件处理程序会被认为是元素的方法。事件处理程序会在元素的作用域中运行，this指向当前元素.
添加多个事件处理程序会被覆盖，执行最后一个

<script>
  var el = document.getElementById('xx')
  el.onclick=function(e){}
</script>

Dom2定义了两个方法，用于处理删除和指定事件的处理程序的操作：addEventListener() 和 removerEventListener()；
与Dom0相比可以给一个元素添加多个相同或不同的事件处理，this指向元素本身

<script>
    var el = document.getElementById('xx')
    el.addEventListener('click',handler,false)
    function handler(){
      console.log('xxxxx')

    }
    el.removerEventListener('click',handler,false)
</script>

2 attachEvent与addEventListener的区别？

IE事件处理程序attachEvent: 事件处理程序会在全局中运行,因此this=window
IE8以及更早版本只支持事件冒泡
事件类型加on
添加2个相同的事件会先执行后一个，在执行前一个
第二个参数为处理函数，主要加函数名。否则无法删除

2.非IE事件处理程序addEventListner: 事件处理程序在其依赖的元素的作用域运行，与IE相反
与IE相对应不仅支持事件冒泡，还支持事件捕获.称事件流
addEventLister()的第三个参数可以修改冒泡或者捕获
第二个参数为处理函数，主要加函数名。否则无法删除

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

qq 20170511000152

IE事件冒泡重element2->element1->body->html
IE的事件流事件冒泡，从嵌套最深的节点接收逐级向上传播到根节点

qq 20170511000201

DOM2级事件规定的事件流包括3个阶段：事件捕获阶段处于目标阶段冒泡阶段
首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接受事件。最后一个阶段是冒泡阶> >段，可以在这个阶段对时间对出响应

4：如何阻止事件冒泡？如何阻止默认事件？

非IE阻止事件冒泡：e.stopPropagation()
非IE阻默认事件   e.preventDefault()

IE阻止事件冒泡：e.cancelable
IE阻默认事件   e.returnValue

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

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>

6 补全代码，要求：当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.
当点击每一个元素li时控制台展示该元素的文本内容。
代码地址

<ul class="ct1">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>任务班</li>
</ul>

<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>

7 补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。
代码地址

<ul class="ct2">
    <li data-img="">鼠标放置查看图片1</li>
    <li data-img="">鼠标放置查看图片2</li>
    <li data-img="">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>

<script>
    var EventUntil = {
        addHandler: function(el,type,handler){
            if(el.addEventListener){
                el.addEventListener(type,handler)
            }else if(el.attachEvent){
                //'e'为删除考虑
                el['e'+type+handler]=handler
                //传递事件对象
                el['type'+handler]=function(){
                    el['e'+type+handler](window.event)
                }
                //添加属性
                el.attachEvent(type,el['type'+handler])
            }else{
                el['on'+type]=handler
            }
        },
        removeHander: function(el,type,handler){
            if(el.removeEventListener){
                el.removeEventListener(type,handler)
            }else if(el.detachEvent){
                el.detachEvent('on'+type,el['type'+handler])
                el['type'+handler]=null
            }else{
                el['on'+type]=null
            }
        }
    }
</script>

最后编辑于：2017.12.10 10:57:39

DOM事件

推荐阅读更多精彩内容