事件
2017-07-11 本文已影响0人
leocz
1.DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
在DOM0级事件处理程序，事件名以'on'开头，如onclick，onload等
HTML元素支持事件，可以通过HTML元素的属性来指定
<input type="button" value="点我" onclick="alert("你真的点了")">
<input type="button" value="点我2" onclick="showSth()">
<script>
function showSth(){
alert("你真的点了")
}
</script>
这种方式对于代码的行为与表现分离不太好，不便于维护
或者通过js添加DOM0事件处理程序
<script>
var btn = document.getElementById("mybtn")
btn.onclick = function showSth(){
alert("你真的点了")
}
btn.onclick = function showSth(){
alert("你真的点了2")
}
//只显示２，１被２覆盖了，也就是说同样的事件只能添加一次
</script>
在W3C制定的DOM2规范中，其中的DOM 事件规范定义了两个方法：addEventListener()和removeEventListener()，分别用于添加事件处理程序和删除事件处理程序。
var btn = document.getElementById("myBtn");
btn.addEventListener("click", showSth, false);
/*第三个参数布尔值指定事件是否在捕获或冒泡阶段执行。
默认false，事件句柄在冒泡阶段执行。
true 则表示事件句柄在捕获阶段执行*/
btn.removeEventListener("click", showSth, false);
/*第三个参数布尔值表示函数是否为事件捕获，默认false*/
dom2的优点
* 它允许给一个事件注册多个 listener
* 它提供了一种更精细的手段控制 listener 的触发阶段。（即可以选择捕获或者冒泡）。
* 它对任何 DOM 元素都是有效的，而不仅仅只对 HTML 元素有效
2.attachEvent与addEventListener的区别？
attachEvent是IE浏览器的一个专有的标准，attachEvent() 不再被IE11支持。
btn.attachEvent("onclick", showSth);
他们的区别
- addEventListener能更精确的控制事件触发阶段，可以选择捕获还是冒泡，而attachEvent只能选择冒泡
- attachEvent的事件类似于DOM0中的，要加 on
- 为一个事件添加多个事件处理程序时，执行顺序不同，addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)
3. 解释IE事件冒泡和DOM2事件传播机制？
IE事件传播是冒泡机制，当检测到一个事件发生时，事件会从目标元素开始向父级传递，直到传递到window（document）停止。这期间，如果遇到同样的事件，都会激活对应的事件处理程序
div→body→html→document
DOM2级事件传播包含三个阶段:
- 捕捉阶段（capturing），事件从顶级文档树节点一级一级向下遍历，直到到达该事件的目标节点。
- 到达事件的目标节点，执行目标节点的时间处理程序。
- 事件起泡（bubbling），事件从目标节点一级一级向上上溯，直到顶级文档树节点。
4.如何阻止事件冒泡？ 如何阻止默认事件？
阻止事件冒泡: event.stopPropagation()
阻止默认事件: event.preventDefault()
5.有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
var li = document.getElementByTagName("li");
for(var i = 0; i < li.length; i++){
li[i].onclick = function(e){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 = document.querySelector('.ct');
var startAdd = document.querySelector('#btn-add-start');
var endAdd = document.querySelector('#btn-add-end');
startAdd.addEventListener("click",function(){
var content = document.querySelector('.ipt-add-content').value;
if(content != ""){
var li = document.createElement("li");
li.innerText = content;
ul.insertBefore(li,ul.children[0]);
}
})
endAdd.addEventListener("click",function(){
var content = document.querySelector('.ipt-add-content').value;
if(content != ""){
var li = document.createElement("li");
li.innerText = content;
ul.appendChild(li)
}
})
ul.addEventListener("click",function(e){
console.log(e.target.innerText);
})
</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 ul = document.querySelector(".ct");
var imgPre = document.querySelector(".img-preview");
var img = document.createElement("img");
imgPre.appendChild(img);
ul.addEventListener("mouseover",function(e){
var myimg = document.querySelector("img");
var address = e.target.getAttribute("data-img");
myimg.style.display = "block";
myimg.setAttribute("src",address);
})
ul.addEventListener("mouseout",function(){
var myimg = document.querySelector("img");
myimg.style.display = "none";
})
</script>
