1. DOM0事件和DOM2级在事件监听使用方式上有什么区别？
- DOM 0级
//举例
var btn = document.getElementById('id');
btn.onclick = function(){};
相当于元素的的属性，所以只能绑定一次，后面会覆盖前面；
删除事件处理程序将值设为null即可；
在事件冒泡阶段处理；
DOM 2级
//举例
var btn = document.getElementById('id');
btn.addEventListener('click',functionName,boolean);
- 可以绑定多个事件处理程序；
- 通过removeEventListener()来移除事件处理程序，add和remove的函数需要一致，不能移除匿名函数；
- 第三个布尔值为true在捕获阶段处理，为false在冒泡阶段处理，默认false。
2. attachEvent与addEventListener的区别？
- attachEvent是早期IE中添加事件处理程序的方法
//举例
var btn = document.getElementById('id');
btn.attachEvent('onclick',listener);
事件处理程序在全局作用域下运行，this指代window；
同DOM0级一样只在冒泡阶段处理；
addEventListener
//举例
var btn = document.getElementById('id');
btn.addEventListener('click',listener,boolean);
- 元素作用域下运行，this指代绑定事件的元素；
- 布尔值true为捕获阶段，false为冒泡阶段。
3. 解释IE事件冒泡和DOM2事件传播机制？
-
IE事件冒泡
首先由具体元素接收事件，然后一级一级向上直至根节点。
IE事件冒泡
-
DOM事件流
分为事件捕获、处于目标阶段、冒泡阶段；即先有根节点接收事件而后是具体元素，再冒泡到根节点；方便截取事件。
DOM事件流
4. 如何阻止事件冒泡？ 如何阻止默认事件？
取消事件进一步捕获或冒泡
stopPropagation()取消事件默认行为
preventDefault()
5. 有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click',function(e){
if(e.target.nodeName.toLowerCase() === 'li'){
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 ul = $('.ct')
var addContent = $('.ipt-add-content')
var addStart = $('#btn-add-start')
var addEnd = $('#btn-add-end')
addStart.addEventListener('click',function(){
if(addContent.value !== ''){
var li = document.createElement('li')
li.innerText = addContent.value
ul.insertBefore(li,ul.firstChild)
}
})
addEnd.addEventListener('click',function(){
if(addContent.value !== ''){
var li = document.createElement('li')
li.innerText = addContent.value
ul.appendChild(li)
}
})
ul.addEventListener('click',function(e){
if(e.target.nodeName.toLowerCase() === 'li'){
console.log(e.target.innerText)
}
})
function $(id){
return document.querySelector(id)
}
</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>
var ct = $('.ct')
var imgPreview = $('.img-preview')
ct.addEventListener('mouseover',function(e){
imgPreview.innerHTML = ''
var picBox = document.createElement('img')
var source = e.target.getAttribute('data-img')
picBox.setAttribute('src',source)
imgPreview.appendChild(picBox)
})
function $(id){
return document.querySelector(id)
}
</script>
