题目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：如何阻止事件冒泡？ 如何阻止默认事件？

如何阻止事件冒泡？

<script>
    function stopPropagation(e){
    if(e.stopPropagation){
        e.stopPropagation();
    }else{
        e.cancelBUbble = true;
    }
}
</script>

如何阻止默认事件？

<script>
function preventDefault(){
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
}
</script>

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

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
//todo ...
</script>

答案

<script>
    var ct = document.querySelectorAll('li');
    for(var i = 0;i<ct.length;i++){
        ct[i].addEventListener('click',function(){
            console.log(this.innerText);
        })
    }
    </script>

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

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

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>任务班</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
//你的代码
</script>

答案

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>任务班</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
//你的代码
    var ct = $('.ct');
    var cont = $('.ipt-add-content');
    var addStart = $('#btn-add-start');
    var addEnd = $('#btn-add-end');

    //监听事件添加元素
    addStart.addEventListener('click',addContent);
    addEnd.addEventListener('click',addContent);
    function addContent(e){
        //字符串长度小于等于0，return
        if(cont.value.length <= 0 ) return;

        var li = document.createElement('li');
        li.innerText = cont.value;
        
        if(this.id === "btn-add-start"){
            var firstNode = ct.firstElementChild;
            ct.insertBefore(li,firstNode);
        }
        if(this.id === "btn-add-end"){
            ct.appendChild(li);
        }
    }

    //点击元素显示文本内容。事件代理
    ct.addEventListener('click',function(e) {
        console.log(e.target.innerText)
    })

    function $ (obj){
        return  document.querySelector(obj);
    }
    function $$ (array){
        return  document.querySelectorAll(array);
    }
</script>

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

<ul class="ct">
    <li data-img="1.png">鼠标放置查看图片1</li>
    <li data-img="2.png">鼠标放置查看图片2</li>
    <li data-img="3.png">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
//你的代码
</script>

答案

<ul class="ct">
    <li data-img="1.png">鼠标放置查看图片1</li>
    <li data-img="2.png">鼠标放置查看图片2</li>
    <li data-img="3.png">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
//你的代码
var ct = $('.ct');
var preview = $('.img-preview');
ct.addEventListener('mouseover',function(e){
    //移除图片还原默认状态
    if(preview.children.length > 0){
        [].forEach.call(preview.children,function(node){
            preview.removeChild(node);
        })
    }
    //鼠标悬浮指定位置显示对应图像
    if(e.target.tagName.toLowerCase() === 'li'){
        var image = document.createElement('img');
        image.src = './img/' + e.target.dataset.img;
        preview.appendChild(image);
    }
})

function $ (cls){
    return document.querySelector(cls);
}
function $$(cls){
    return document.querySelector(cls);
}
</script>