进阶任务-9

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

//DOM0监听事件
var btn = document.getElementById('#btn');
btn.onclick = function(){
console.log('DOM0点击事件监听')
}
//this指向元素自身，这种方法的缺点是只听添加一个事件程序，如果多添加了，后面的会把前面的覆盖掉


//DOM2级事件监听
var btn = document.getElementById('#btn');
btn.addEventListener('click/dbclick/mouseover/mouseout.....',function(){
console.log('DOM2事件监听')
})
//这种添加事件监听的方法，比较推荐，可以给一个元素添加多个事件，this指向元素本身

2 .attachEvent与addEventListener的区别？

• 先说说attachEvent，IE浏览器中的事件处理方法，
  1. 只接受2个参数attachEvent('带on的事件名称'，function(){要做事的函数代码})
  2. 这个事件处理程序中，他的作用域是全局作用域，因此this的指向是window
  3. 给目标元素添加多个事件之后，标准浏览器中的执行顺序是按照代码的先后顺序进行执行的，但是attachEvent是按照，最后添加最先执行这样的顺序来的
• addEventListener，标准浏览器中的事件处理方法
  1. 能接受3个参数 addEventListener('不带on的事件名称'，function(){要做事的函数代码},一个布尔值，默认为false意为在冒泡阶段处理事件，为true的时候就是在捕获阶段的时候来处理事件)
  2. 他的作用域是目标元素的作用域，this指向的是当前元素
  3. 给目标元素添加多事件之后，处理顺序与代码顺序一致

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

• IE的事件冒泡传播机制，就和它的字面意思“冒泡”一样，想象一下鱼缸里面的鱼吐泡泡，就能知道，是一种从目标元素自身向“水面”上逐级传播的一个过程
• DOM2事件传播机制，它分完整的3个阶段
  第一阶段是事件捕获阶段，由最上层向下穿透，为截取事件提供机会
  第二阶段是处于目标阶段，实际目标接收事件
  第三阶段是冒泡阶段，从目标元素开始，向上层穿透

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

• 对于标准浏览器来说，直接调用event对象中的stopPropagation()方法，就可以阻止事件冒泡。阻止默认事件的话直接用preventDefault()方法就可以啦
• 对于老IE而言，他的event对象中由cancelBubble属性，默认的值为false，当给它改成true的时候，就可以取消事件冒泡了。如果取消默认的事件行为的话，把returnValue的值设置为false来取消默认的事件行为

5.点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容

    
这里是
    
饥人谷
    
前端6班

6. 补全代码

第六题

    
这里是
    
饥人谷
    
任务班


开头添加
结尾添加

7. 补全代码

第七题代码

    
查看图片1
    
查看图片2