进阶-任务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