题目1： DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
0级DOM
分为2个：一是在标签内写onclick事件
二是在JS写onclick=function（）{}函数
1）
<input id="myButton" type="button" value="Press Me" onclick="alert('thanks');" >
2）
document.getElementById("myButton").onclick = function () {
alert('thanks');
}
像上面把onclick写在标签内，都是dom0级事件,
第二种获取元素，绑定onclick事件也是dom0级，第二个会覆盖第一个onclick
2级DOM
只有一个：监听方法，有两个方法用来添加和移除事件处理程序：addEventListener()和removeEventListener()。
它们都有三个参数：第一个参数是事件名（如click）；
第二个参数是事件处理程序函数；
第三个参数如果是true则表示在捕获阶段调用，为false表示在冒泡阶段调用。
addEventListener():可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。
removeEventListener():不能移除匿名添加的函数。
document.getElementById("myTest").attachEvent("onclick", function(){alert(1)});
//等价于
document.getElementById("myTest").addEventListener("click", function(){alert(1)}, false);
只有2级DOM包含3个事件：事件捕获阶段、处于目标阶段和事件冒泡阶段
<span>
<a></a>
</span>
点击a后capturing(捕捉)阶段事件传播会从document-> span->a，然后发生在a，最后bubbling(冒泡)阶段事件传播会从a->span->document 。
题目2： attachEvent与addEventListener的区别？
1. 参数个数不相同，这个最直观，addEventListener有三个参数，attachEvent只有两个，attachEvent添加的事件处理程序只能发生在冒泡阶段，addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理（我们一般为了浏览器兼容性都设置为冒泡阶段）
2. 第一个参数意义不同，addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）
3. 事件处理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window，所以刚才例子才会返回undefined，而不是元素id
4. 为一个事件添加多个事件处理程序时，执行顺序不同，addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)，所以添加多个的时候，不依赖执行顺序的还好，若是依赖于函数执行顺序，最好自己处理，不要指望浏览器
题目3： 解释IE事件冒泡和DOM2事件传播机制？
- IE事件冒泡的方式是由内到外的，也就是事件从文档嵌套的最深处触发，然后逐级向上传播直到document:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Event</title>
</head>
<body>
<button id="myButton">点我</button>
</body>
</html>
如果单击了页面中的button元素，那么这个click事件会按照如下顺序传播：
（1）<button>
（2）<body>
（3）<html>
（4）document
- DOM2事件传播机制：事件从顶层节点一级一级往下层传播，接着到达目标节点，这部分叫做时间捕获阶段。然后事件又从目标节点逐层往上层节点传播，这部分叫做事件冒泡，这个完整的事件流就是DOM2事件的传播机制了
DMO2事件传播.png
题目4：如何阻止事件冒泡？ 如何阻止默认事件？
-
DOM浏览器
阻止冒泡e.stopPropagation();
阻止默认事件event.preventDefault() -
IE浏览器
阻止冒泡e.cancelBubble = true;
阻止默认事件event.returnValue = false;
题目5：有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
function $(id){
return document.querySelector(id);
}
var btn = $(".ct");
btn.addEventListener("click", function(e){
console.log(e.target.innerText);
})
</script>
在线demo
题目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>
function $(id){
return document.querySelector(id);
}
var content = $(".ipt-add-content");
var btn_1 = $("#btn-add-start");
var btn_2 = $("#btn-add-end");
var lic = $(".ct");
lic.addEventListener("click", function(e){
console.log(e.target.innerText);
})
btn_1.addEventListener("click", function(){
if(!content.value){
alert("内容为空！");
return false;
}
var inputValue = content.value;
var newLi = document.createElement("li");
newLi.innerHTML = inputValue;
lic.insertBefore(newLi, lic.childNodes[0]);
})
btn_2.addEventListener("click", function(){
if(!content.value){
alert("内容为空！");
return false;
}
var inputValue = content.value;
var newLi = document.createElement("li");
newLi.innerHTML = inputValue;
lic.appendChild(newLi);
})
</script>
在线demo
题目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>
function $(id){
return document.querySelector(id);
}
var ct = $(".ct");
var imgBox = $(".img-preview");
ct.addEventListener("mouseover", function(e){
if(e.target && e.target.nodeName.toUpperCase()=="LI"){
var image = document.createElement('img');
image.src = e.target.getAttribute("data-img");
imgBox.appendChild(image);
}
})
ct.addEventListener("mouseout", function(e){
if(e.target && e.target.nodeName.toUpperCase()=="LI"){
imgBox.innerHTML = "";
}
})
</script>
网友评论