JS（七）--事件

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

• 使用DOM0级方法指定的事件处理程序被认为是元素的方法，这种添加方式的缺陷是，只能存在一个处理程序，如果再次向同一个元素添加另外一个处理程序，上一个处理程序会被覆盖。
• DOM2级添加方式比起DOM0级更灵活，它可以给一个同一个元素添加多个处理事件。

2： attachEvent与addEventListener的区别？

• 事件名：attachEvent的事件名与DOM0级事件名一样，都是在具体事件前加上了on；而addEventListener的事件名去掉了on。
• 作用域：在attachEvent的事件处理程序中，它的作用域是全局作用域，this等于window； 而在addEventListener里事件处理程序的作用域是元素的作用域，this等于元素本身。
• 事件处理程序执行顺序：通过attachEvent给某元素添加多个对于同一事件的处理程序时，它们的执行顺序是按照最后添加的先执行； 对于addEventListener的事件处理程序则是按照添加顺序执行。

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

IE事件冒泡的流程是，当监测到一个事件发生时，事件会从目标元素开始向父级传递，直到传递到window（document）停止。这期间，如果遇到同样的事件，都会激活对应的事件处理程序。
而DOM2的时间传播机制包括了事件冒泡机制作为事件传播的第三阶段，并且加入了第一阶段：事件捕获，即与冒泡机制相反，侦听到事件时，事件先从document开始再到子元素一层层直到目标元素。第二阶段： 处于目标阶段，此时事件在目标上发生，被看做冒泡的一部分。

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

兼容DOM的浏览器会将一个event对象传入事件处理程序中，这个event对象包含一个stopPropagation()方法，可以阻止事件的进一步捕获或冒泡（取决于添加时的参数）。并且包含一个preventDefault()方法，可以取消事件的默认行为。（在事件处理程序里使用return false也可以）
对于IE来说，它的event对象具有cancelBubble属性，默认值为false，设置为true用来取消事件冒泡； 还有returnValue，默认值为true，设置为false用来取消事件的默认行为。

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

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
  var ct = document.getElementsByTagName('ul')[0];
  ct.addEventListener('click', function(e) {
    console.log(e.target.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>
    var ct = document.getElementsByTagName('ul')[0];
    var addStart = document.getElementById('btn-add-start');
    var addEnd = document.getElementById('btn-add-end');
    var content = document.getElementsByClassName('ipt-add-content')[0];
    addStart.addEventListener('click', function(e) {
        var el = document.createElement('li');
        if (content.value) {
            el.innerText = content.value;
            ct.insertBefore(el, ct.firstChild);
        } else {
            alert('请输入内容!')
        }
        
    })
    addEnd.addEventListener('click', function(e) {
        var el = document.createElement('li');
        if (content.value) {
            el.innerText = content.value;
            ct.appendChild(el);
        } else {
            alert('请输入内容!')
        }
        
    })
    ct.addEventListener('click',function(e) {
        console.log(e.target.innerText);
    })
</script>

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

<ul class="ct">
    <li data-img="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490700647573&di=1f247781c941906317eef14024b7396d&imgtype=0&src=http%3A%2F%2Fimage.ajunews.com%2Fcontent%2Fimage%2F2014%2F09%2F17%2F20140917102600112243.jpg">鼠标放置查看图片1</li>
    <li data-img="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490700647573&di=fea49a6d74ddbc065e519a24e8bfefc8&imgtype=0&src=http%3A%2F%2Fpic37.nipic.com%2F20140103%2F14882888_144924904000_2.jpg">鼠标放置查看图片2</li>
    <li data-img="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490700647570&di=caa67ffa9858aa861a206fa903f1de0b&imgtype=0&src=http%3A%2F%2Fimg.hao224.com%2F2016%2F06%2F04%2Flashou_shenyang_215751_2706.jpg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
    var ct = document.getElementsByTagName('ul')[0];
    var imgPreview = document.getElementsByClassName('img-preview')[0];
    ct.addEventListener('mouseover', function(e) {
        if (imgPreview.children[0]) {
            imgPreview.removeChild(imgPreview.children[0]);
        }
        var el = document.createElement('img');
        el.src = e.target.getAttribute('data-img');
        imgPreview.appendChild(el);
    })
</script>