题目1： DOM0级事件和DOM2级事件在事件监听使用方式上有什么区别？
DOM0事件：
box.onclick=function(){do something};在事件流的冒泡阶段被处理,同一对象的同一个事件只能添加一个处理方法，后面再写的方法会覆盖前面的。元素内联
DOM2事件：
addEventListener()添加的事件处理程序
removeEventListener()移除事件处理程序。
要注意的是如果添加的是匿名函数事件响应，就不能用removeEventListener()移除。
例：box.addEventListener("click",function(){do something},true);
可以设置第三个参数，true：是在捕获阶段响应事件 false（默认）：在冒泡阶段响应事件。并且可以为对象的同一个事件添加多个处理方法。
IE中有两个类似的方法attachEvent()和detachEvent()也属于DOM2事件，不同之处是不能设置第三个参数，只能在事件冒泡阶段响应事件，另外，要在事件类型前加"on",如"click"变成"onclick"。
题目2： attachEvent与addEventListener的区别？
addEventListener()可以设置第三个参数,true：是在捕获阶段响应事件 false（默认）：在冒泡阶段响应事件。
attachEvent()则不能设置第三个参数，只能在事件冒泡阶段响应事件，另外，要在事件类型前加"on",如"click"变成"onclick"。
题目3： 解释IE事件冒泡和DOM2事件传播机制？
事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。
事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。
W3C标准中，DOM事件流中和了两种情况，任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件目标（target）。然后，再从事件源往上进行事件冒泡，再回到顶层。
题目4：如何阻止事件冒泡？ 如何阻止默认事件？
阻止事件冒泡
判断是否支持W3C的stopPropagation()方法
if ( e && e.stopPropagation )
e.stopPropagation(); //阻止事件继续传递
else
window.event.cancelBubble = true; //不支持，则用IE的方式来取消事件冒泡
//例：
div.addEventListener("click",function(e){
console.log("我是div");
}
function stopBub(e){
if ( e && e.stopPropagation )
e.stopPropagation();
else
window.event.cancelBubble = true;
}
**阻止浏览器的默认行为 **
是否支持e及preventDefault方法
if ( e && e.preventDefault )
e.preventDefault(); //阻止浏览器默认行为
else
window.event.returnValue = false; //IE中阻止浏览器默认动作的方式
//例：
btn.addEventListener("click",function(e){
console.log("我是div");
if ( e && e.stopPropagation )
e.stopPropagation();
else
window.event.cancelBubble = true;
}
题目5：有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
var oUL=document.querySelector('.ct');
oUL.onclick = function(e){
e = e || window.event; //重定义e,兼容ie，FF
var target = e.target || e.srcElement;//兼容ie，FF,获取事件源对像
if(target.nodeName.toLowerCase() == 'li'){//如果点出对象是‘li’的话就弹出innerHTML
//防止我们点击父元素ul时也会触发弹窗。
alert(target.innerHTML);
}
}
</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 oUL = document.querySelector(".ct");
var btnStart =document.querySelector("#btn-add-start");
var btnEnd =document.querySelector("#btn-add-end");
var inputText=document.querySelector(".ipt-add-content");
oUL.addEventListener("click",function(e){
if(e.target.nodeName.toLowerCase()=="li"){
alert(e.target.innerText);
}
})
var addLi =function (a){
if(inputText.value) {
var newLi=document.createElement("li");
newLi.innerHTML=inputText.value;
if(a===0){
oUL.insertBefore(newLi, oUL.children[0]);}
else if(a===9){
oUL.appendChild(newLi);
}
}else alert("请输入内容");
};
btnStart.addEventListener("click",function(){
addLi(0);
});
btnEnd.addEventListener("click",function(){
addLi(9);
});
</script>
题目7： 补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。
<ul class="ct">
<li data-img="http://blog-imgs-32.fc2.com/a/v/r/avrilcom/alan0.jpg">鼠标放置查看图片1</li>
<li data-img="http://blog-imgs-53.fc2.com/h/a/i/haircutfan/20120621094632a03.jpg">鼠标放置查看图片2</li>
<li data-img="http://ginva.com/wp-content/uploads/2012/07/cute-and-beautiful-girls-wallpapers-020.jpg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview" ></div>
<script>
var oUL = document.querySelector(".ct");
var div1 =document.querySelector(".img-preview");
var imge=document.createElement("img");
div1.appendChild(imge);
imge.style.height="480px";
imge.style.weight="600px";
oUL.addEventListener("mouseover",function(e){
if(e.target.nodeName.toLowerCase() == 'li'){
imge.src =e.target.getAttribute("data-img");
}
});
网友评论