进阶-任务9

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

  • DOM0
btn.onclick = function() {
  alert(1);
}

删除DOM0事件btn.onclick = null;

  • DOM2
btn.addEventListener('click', handler)
function handler() {
  alert('1');
}

删除DOM2事件btn.removeEventListener('click', handler);

  • onclick对同一个事件只支持一个事件处理程序,而addEventListener支持多个
  • addEventListener可以指定在哪个阶段(捕获或者触发)触发监听函数

attachEvent与addEventListener的区别?

  • attachEvent是IE的事件处理程序
  • attachEvent的事件名为['on'+type],而addEventListener的事件名为type
  • attachEvent的作用域是全局作用域,this为window,addEventListener的作用域为绑定监听函数的元素,this为当前元素

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

  • IE事件传播机制是事件冒泡,事件开始由文档中嵌套层次最深的节点开始,逐级向上传播到文档节点
  • DOM2事件传播机制分为3个阶段:capture, target, bubble。默认会在冒泡阶段调用事件处理程序

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

  • 阻止事件冒泡
    DOM:event.stopPropagation()
    IE: window.event.cancelBubble = true
  • 阻止默认事件
    DOM: event.preventFault()
    IE: window.event.srcElement = false

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

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
    var uls = document.querySelector('.ct')
    uls.addEventListener('click',function(e) {
        var text = e.target.firstChild.nodeValue
        console.log(text)
    })
</script>

题目6

题目6

题目7

题目7

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容