事件

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

DOM0级事件

var btn=document.querySelector("#btn");
btn.onclick=function(){
    alert(1);
}

优点：简单，兼容所有浏览器
缺点：一个事件处理程序只能对应一个处理函数

DOM1级事件

var btn=document.querySelector("#btn");
//非IE
btn.addEventListener("click",function(){
    alert(1);
}，false)
//IE
btn.attrachEvent("onclick",function(){
      alert(1);
})

优点：同一个事件处理程序可以对应多个函数
缺点：关于事件的内置函数 老IE浏览器存在兼容问题，老IE浏览器有一套自己的事件内置函数，
再coding事件程序时，需要多方面考虑到老IE浏览器兼容问题。

图片.png

题目2： attachEvent与addEventListener的区别？

区别：

1，attachEvent只能兼容IE6，7，8上面，addEventListener只能兼容非IE6，7，8和非IE浏览器
2，事件名的写法不同，事件名加on和不加on，比如点击事件：btn.attachEvent("onclick",fn) btn.addEventListener("click",fn)
3，attachEvent有两个参数，addEventListener可以有三个参数，addEventListener的前两个参数相同，第三个参数是true或false,默认false,false指冒泡阶段触发事件，ture指捕获阶段触发函数；因此attachEvent的事件函数都添加到冒泡阶段
4，事件处理函数里面的this指向不同，attachEvent调用的函数里面的this指向window,addEventListener调用的函数里面的this指向触发该事件的节点
5，attachEvent与addEventListener在执行绑定函数的顺序不一样，前者倒序执行，后者按顺序执行

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

单击按钮

IE事件冒泡

图片.png

代码读取流程：button->window
读取代码开始就执行button的点击事件，依次弹出 1->2->3->4->5

DOM2事件传播机制

图片.png

图片.png

图片.png

读取代码流程：window->button->window window->button：捕获阶段 button->window：冒泡阶段
Dom2事件触发默认冒泡阶段处理函数,输出：1->2->3->4
如果把addEventListener的第三个参数改成true,意思是捕获阶段处理函数，输出：4->3->2->1

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

阻止事件冒泡

function stopPorpagation(e){
    if(e.stopPorpafation){
       //流行浏览器
        e.stopPropagation();
}else{
      //老IE浏览器
       e.cancleBubble=true;
}
}

阻止默认事件

function preventDefault(e){
    if(e.preventDefault){
        //流行浏览器
        e.preventDefault();
}else{
      //老IE浏览器
       e.returnValue=true;
}
}

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

   
    

        
这里是
        
饥人谷
        
前端6班
    
    
   

点击效果：

图片.png

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

图片.png

    
        

            
这里是
            
饥人谷
            
任务班
        
        
        开头添加
        结尾添加
        
    

图片.png

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

    
        

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

        
    

图片.png

题目8： 在 github 上创建个人项目，把视频里事件兼容的函数写法放入项目，在 Readme.md里描述项目(选做题目)

博客