事件（细节很多，主要考察事件代理）

说是事件其实是事件没啥好说的，加了好多dom操作，主要是能看出来是哪些效果是用了dom操作

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

• IE事件冒泡的流程是，当监测到一个事件发生时，事件会从目标元素开始向父级传递，直到传递到window（document）停止。这期间，如果遇到同样的事件，都会激活对应的事件处理程序。

• 而DOM2的时间传播机制包括了事件冒泡机制作为事件传播的第三阶段，并且加入了第一阶段：事件捕获，即与冒泡机制相反，侦听到事件时，事件先从document开始再到子元素一层层直到目标元素。第二阶段： 处于目标阶段，此时事件在div上发生，被看做冒泡的一部分。

• 由于兼容性的问题，我们可以尽量将在事件添加时为其指定传播机制为冒泡传递。

Paste_Image.png

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

• 兼容DOM的浏览器会将一个event对象传入事件处理程序中，这个event对象包含一个stopPropagation()方法，可以组织事件的进一步捕获或冒泡（取决于添加时的参数）。并且包含一个preventDefault()方法，可以取消事件的默认行为。（在事件处理程序里使用return false也可以）
• 例子//

var cb = document.getElementById('my-checkbox');
cb.addEventListener(
'click',
function (e){ e.preventDefault(); },
false
);

上面代码为点击单选框的事件，设置监听函数，取消默认行为。由于浏览器的默认行为是选中单选框，所以这段代码会导致无法选中单选框

• 对于IE来说，它的event对象具有cancelBubble属性，默认值为false，设置为true用来取消事件冒泡； 还有returnValue，默认值为true，设置为false用来取消事件的默认行为

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

    
这里是
    
饥人谷
    
前端6班


也可以用事件代理的思想：
 var ct = document.querySelector('.ct');
  ct.addEventListener('click', function(e){
    console.log(e.target.innerText);
  });

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

当点击按钮开头添加时在

这里是

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

    
这里是
    
饥人谷
    
任务班


开头添加
结尾添加

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

效果

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

封装一个事件兼容的函数

addEvent(btn1,"click",fn);//调用添加
removeEvent(btn1,"click",fn);//调用移除
function addEvent(element,eventName,Listener) {
    if (element.addEventListener) {
        element.addEventListener(eventName,Listener,false);//主流浏览器兼容
    }else if (element.attachEvent) {
        element.attachEvent("on"+eventName,Listener);
    }else{
        //element.onclick=Listener;//点语法，可以不用写死
        element["on"+eventName]=Listener;//中括号语法可以写活
    }
};