事件

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

DOM0事件是将一个函数赋值给一个事件处理程序属性：

var btn=document.getElementbyId("myBtn");
btn.omclick=function(){
alert(this.id);
}

使用DOM0级方法指定的事件处理程序被认为是元素的方法。此时事件处理程序是在元素的作用域中运行，程序中的this引用当前元素；DOM0的优势在于简单和兼容性好，劣势在于只能存在一个处理程序，如果再次向同一个元素添加另一个处理程序，上一个处理程序会被覆盖。

DOM2事件定义了两个方法，addEventListener()和removeEventListener(),用于处理指定和删除事件处理程序的操作，所有DOM节点都包含这两个方法，并且它们都接受三个参数：处理事件名、处理事件程序的函数、布尔值；布尔值是true表示在捕获阶段调用事件处理程序，如果是false，表示在冒泡阶段调用事件处理程序：

var btn = document.getElementById("myBtn");
btn.addEventListener("click",function(){
     alert(this.id);
},flase);

与DOM0方法一样，这里的处理程序也是在其依附的元素作用域中运行。DOM2方法的好处是可以添加多个事件处理程序。

题目2： attachEvent与addEventListener的区别？

1.attachEvent与addEventListener的区别

支持的浏览器不同。attachEvent在IE9以下的版本中受到支持。其它的都支持addEventListener。
参数不同。addEventListener第三个参数可以指定是否捕获，而attachEvent不支持捕获。
事件名不同。attachEvent第一个参数事件名前要加on，比如el.attachEvent('onclick', handleClick)。
this不同。

2attachEvent 的事件绑定 attachEvent的this总是window 例如：

el.attachEven("onclick" function)(){
alert(this)
}

执行后输出的 对话框就是（object window）
1.attachEvent添加的事件只能在冒泡阶段处理,addEventListener可以通过参数
来决定处理程序是在冒泡阶段还是在捕获阶段处理.
2.第一个参数不同,attachEvent第一个参数是on....,比如onclick,而
addEventListener是click,没有on.
3.this的指代不同,在attachEvent的函数中this指的是window,而在addEventListener,
this指的是被监听的元素.
4.为一个事件添加多个事件处理程序时,执行顺序不同:addEventListener会按照添加的
顺序执行,attachEvent添加多个事件处理程序时,在执行时没有规律.

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

1 IE事件的传播机制只有冒泡阶段，即从目标元素向父元素传播一直传播到window停止，当传播的过程中如果监听到了相同的事件类型酒会一并触发，即从最具体的元素开始触发，一直到最外层的元素.
2 DOM2事件传播机制包括事件的，从window开始 -> 捕获阶段 －> 到达目标元素 -> 冒泡阶段 -> 再到达最外层的 window，并且在addEventListener(type,function(){},true(为捕获阶段)/false(default,为冒泡阶段触发))。

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

如何阻止事件冒泡？

如何阻止默认事件？

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

    
这里是
    
饥人谷
    
前端6班

答案

题目6： 补全代码，要求：

当点击按钮开头添加时在

这里是

元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.
当点击每一个元素li时控制台展示该元素的文本内容。

    
这里是
    
饥人谷
    
任务班


开头添加
结尾添加

答案

    
这里是
    
饥人谷
    
任务班


开头添加
结尾添加

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

    
鼠标放置查看图片1
    
鼠标放置查看图片2
    
鼠标放置查看图片3

答案

    
鼠标放置查看图片1
    
鼠标放置查看图片2
    
鼠标放置查看图片3