进阶9

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

DOM0:
1.HTML内联方式：使用HTML属性来指定元素支持的每个事件，但存在加载顺序问题和代码维护问题
2.JavaScript指定事件处理程序：把一个方法赋值给一个元素的事件处理属性（将这些属性的值设置为一个函数，就可以指定事件处理程序。一个事件只能绑定一次，并且新方法会覆盖老方法。例如btn.onclick=function(){}）
DOM2:
1.新增了2个办法，addEventListener(),removeEventListener()
2.2个方法都接受三个参数，事件类型，事件处理方法，布尔参数

题目2： attachEvent与addEventListener的区别？

1.参数的个数不同，对于attachEvent拥有2个参数，对于addEventListener拥有3个参数，第三个参数，可以控制addEventListener的添加的事件处理程序是在冒泡阶段还是捕获阶段处理，对于attachEvent添加的事件处理程序只能在冒泡阶段。
2.第一个参数的意义不同，对于attachEvent指的是事件处理函数的名称。对于addEventListener，指的是事件的类型。
3.事件处理程序的作用域不同，对于addEventListener的作用域是元素本身，this是指触发元素。attachEvent的作用域是全局，this指的是window。
4.为一个事件添加多个事件处理程序时，执行顺序不同。对于addEventListener，执行顺序会按照添加顺序来进行。对于attachEvent,执行顺序是无规律的（当添加的方法少时，会按照添加顺序的反顺序来进行，当添加的方法多时，会无规律进行）

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

IE事件冒泡：事件由最具体的元素接受，然后逐级向上传播到较为不具体的元素

image.png

DOM2事件传播机制：
DOM2事件传播机制分为3个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段，首发事件是事件捕获，为截取事件提供机会然后是实现目标接受事件，最后是事件冒泡阶段

image.png

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

阻止事件冒泡：
使用stopPropagation()。
阻止默认事件：
使用preventDefault()。但前提是cancelable的值为true

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

方法1

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
    var nodeLi = document.querySelectorAll('.ct li');
    for (var i = 0; i < nodeLi.length; i++) {
        nodeLi[i].addEventListener('click', function () {
            console.log(this.innerText);
        })
    }
</script>

方法2

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
    var nodeUl = document.querySelector('.ct');
    nodeUl.addEventListener('click',function (e) {
        console.log(e.target.innerText);
    })
</script>

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

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

<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 nodeLi = document.querySelectorAll('.ct li')
    for (var i = 0; i < nodeLi.length; i++) {
        nodeLi[i].addEventListener('click', function () {
            console.log(this.innerText)
        })
    }
    var btnStartadd = document.querySelector('#btn-add-start')
    var btnEndadd = document.querySelector('#btn-add-end')
    var container = document.querySelector('.ct')
    var iptValue = document.querySelector('.ipt-add-content')

    btnStartadd.addEventListener('click', function () {
        if (!iptValue.value) return false;
        var newLi = document.createElement("li")
        newLi.innerText = iptValue.value;
        container.insertBefore(newLi, container.firstChild)
        newLi.addEventListener('click', function () {
            console.log(this.innerText)
        })
    })

    btnEndadd.addEventListener('click', function () {
        if (!iptValue.value) return false;
        var newLi = document.createElement("li")
        newLi.innerText = iptValue.value;
        container.appendChild(newLi)
        newLi.addEventListener('click', function () {
            console.log(this.innerText)
        })
    })
</script>

方法2

<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 btnStartadd = document.querySelector('#btn-add-start');
    var btnEndadd = document.querySelector('#btn-add-end');
    var container = document.querySelector('.ct');
    var iptValue = document.querySelector('.ipt-add-content');

    btnStartadd.addEventListener('click', function () {
        if (!iptValue.value) return false;
        var newLi = document.createElement('li');
        newLi.innerText = iptValue.value;
        container.insertBefore(newLi, container.firstChild)
    });
    btnEndadd.addEventListener('click', function () {
        if (!iptValue.value) return false;
        var newLi = document.createElement('li');
        newLi.innerText = iptValue.value;
        container.appendChild(newLi)
    });

    container.addEventListener('click', function (e) {
        if (e.target.tagName.toLowerCase() === 'li') {
            console.log(e.target.innerText)
        }
    })
</script>

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

方法1

<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 nodeUl = document.querySelector('.ct')
    var preview = document.querySelector('.img-preview');

    nodeUl.addEventListener('mouseover', function (e) {
        var dataImg = e.target.getAttribute('data-img')
        preview.innerHTML = '![](' + dataImg + ')'
    })
</script>

方法2

<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 nodeLi = document.querySelectorAll('.ct li');
    var preview = document.querySelector('.img-preview');

    for (var i = 0; i < nodeLi.length; i++) {
        nodeLi[i].addEventListener('mouseenter', function () {
            var dataImg = this.getAttribute('data-img');
            preview.innerHTML = '![](' + dataImg + ')'
        })
    }

</script>

题目8： 写一篇博客，讲解事件相关知识点，如事件冒泡、捕获、代理、兼容写法等(选做题目)