题目1： DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
- Dom0级
Dom0级事件处理程序是将一个函数赋值给一个事件处理程序属性，而通过将事件处理程序设置为null删除绑定在元素上的事件处理程序。这种方法无法给一个事件添加多个事件处理程序，后面的程序会覆盖前面的程序。
// 添加事件处理程序
var btn=document.querySelector("#btn");
btn.onclick=function () {
alert(this.id);
}
// 删除事件处理程序
btn.onclick=null;
- Dom2级
而Dom2级定义了addEventListener()和removeEventListener()用于处理指定和删除事件处理程序。所有Dom节点都包含这两个方法，并且它们都接受3个参数，要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。
var btn=document.querySelector("#btn");
var handler=function(){
alert(this.id);
}
// 指定事件处理程序
btn.addEventListener("click",handler,false);
// 删除事件处理程序
btn.removeEventListener("click",handler,false);
但是通过removeEventListener()函数来移除事件处理程序时，移除时的参数必须与添加处理程序时使用的参数相同，这也意味着通过addEventListener()添加的匿名函数将无法移除。如：
var btn=document.querySelector("#btn");
// 指定事件处理程序
btn.addEventListener("click",function(){
alert(this.id);
},false);
// 删除事件处理程序,不会生效
btn.removeEventListener("click",function(){
alert(this.id);
},false);
- 二者区别：
使用Dom2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序，而Dom0级为一个事件添加多个事件处理程序时，后面的程序会覆盖前面的。
题目2： attachEvent与addEventListener的区别？
addEventListener和attachEvent区别
-
参数个数不相同，这个最直观，
addEventListener()有三个参数，attachEvent()只有两个，attachEvent()添加的事件处理程序只能发生在冒泡阶段，addEventListener()第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理（我们一般为了浏览器兼容性都设置为冒泡阶段） -
第一个参数意义不同，
addEventListener()第一个参数是事件类型（比如click，load），而attachEvent()第一个参数指明的是事件处理函数名称（onclick，onload） -
事件处理程序的作用域不相同，
addEventListener()的作用域是元素本身，this是指的触发元素，attachEvent()事件处理程序会在全局变量内运行，this是window。 -
为一个事件添加多个事件处理程序时，执行顺序不同，
addEventListener()添加会按照添加顺序执行，而attachEvent()添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)，所以添加多个的时候，不依赖执行顺序的还好，若是依赖于函数执行顺序，最好自己处理，不要指望浏览器
题目3： 解释IE事件冒泡和DOM2事件传播机制？
事件流描述的是从页面中接收事件的顺序，比如有两个嵌套的div，点击了内层的div，这时候是内层的div先触发click事件还是外层先触发？目前主要有三种模型
-
IE的事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素
-
Netscape的事件捕获：不太具体的节点更早接收事件，而最具体的元素最后接收事件，和事件冒泡相反
-
DOM2事件流：DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段
题目4：如何阻止事件冒泡？ 如何阻止默认事件？
- 阻止事件冒泡
W3C的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true -
stopPropagation方法阻止事件在DOM中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上新定义的事件监听函数。
function stopEvent(e) {
e.stopPropagation();
}
el.addEventListener('click', stopEvent, false);
将上面函数指定为监听函数，会阻止事件进一步冒泡到el节点的父节点
-
stopImmediatePropagation方法阻止同一个事件的其他监听函数被调用。
如果同一个节点对于同一个事件指定了多个监听函数，这些函数会根据添加的顺序依次调用。只要其中有一个监听函数调用了
stopImmediatePropagation方法，其他的监听函数就不会再执行了。
function l1(e){
e.stopImmediatePropagation();
}
function l2(e){
console.log('hello world');
}
el.addEventListener('click', l1, false);
el.addEventListener('click', l2, false);
上面代码在el节点上，为click事件添加了两个监听函数l1和l2。由于l1调用了stopImmediatePropagation方法，所以l2不会被调用
- 阻止浏览器默认行为
W3C的方法是e.preventDefault()，IE则是使用e.returnValue = false -
preventDefault方法取消浏览器对当前事件的默认行为，比如点击链接后，浏览器跳转到指定页面，或者按一下空格键，页面向下滚动一段距离。该方法生效的前提是，事件的cancelable属性为true，如果为false，则调用该方法没有任何效果。
该方法不会阻止事件的进一步传播（stopPropagation方法可用于这个目的）。只要在事件的传播过程中（捕获阶段、目标阶段、冒泡阶段皆可），使用了preventDefault方法，该事件的默认方法就不会执行。
// HTML代码为
// <input type="checkbox" id="my-checkbox" />
var cb = document.getElementById('my-checkbox');
cb.addEventListener(
'click',
function (e){ e.preventDefault(); },
false
);
上面代码为点击单选框的事件，设置监听函数，取消默认行为。由于浏览器的默认行为是选中单选框，所以这段代码会导致无法选中单选框。
题目5：有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
<Doctype !html>
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
document.querySelector('.ct').addEventListener('click',function(e){
if (e.target.tagName.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 ph = document.querySelector('.ipt-add-content'),
ct = document.querySelector('.ct'),
lastClickTarget = document.createElement('li'),
lastHoverTarget = document.createElement('li'),
saveColor = 'white';
document.querySelector('#btn-add-start').addEventListener('click',function(){
var newElement = document.createElement('li');
newElement.innerText = ph.value;
if (ph.value) ct.insertBefore(newElement,ct.firstElementChild);
})
document.querySelector('#btn-add-end').addEventListener('click',function(){
var newElement = document.createElement('li');
newElement.innerText = ph.value;
if (ph.value) ct.appendChild(newElement);
})
ct.addEventListener('click',function(e){
if (e.target.nodeName.toLowerCase() === 'li') {
console.log(e.target.innerText);
lastClickTarget.style.background = 'white';
e.target.style.background = 'yellow';
lastClickTarget = e.target;
saveColor = e.target.style.background;
}
})
ct.addEventListener('mouseover',function(e){
var nowColer = e.target.style.background;
if (e.target.nodeName.toLowerCase() === 'li') {
lastHoverTarget.style.background = saveColor;
saveColor = e.target.style.background;
e.target.style.background = 'orange';
lastHoverTarget = e.target;
}
})
</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>
<style>
.img-preview{
height: 200px;
width: 300px;
background-size: cover;
}
</style>
<script>
var ct = document.querySelector('.ct'),
img = document.querySelector('.img-preview');
ct.addEventListener('mouseover',function(e){
if (e.target.nodeName.toLowerCase() ==='li')
img.style.backgroundImage = 'url(http://osafeurnt.bkt.clouddn.com/interests-'+e.target.getAttribute('data-img')[0]+'.jpg';
})
ct.addEventListener('mouseleave',function(e){
img.style.backgroundImage = '';
})
</script>
网友评论