题目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事件冒泡：事件由最具体的元素接受，然后逐级向上传播到较为不具体的元素
DOM2事件传播机制：
DOM2事件传播机制分为3个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段，首发事件是事件捕获，为截取事件提供机会然后是实现目标接受事件，最后是事件冒泡阶段
题目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 = ''
})
</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 = ''
})
}
</script>
