事件

题目1： DOM0 事件和DOM2级在事件监听使用方式上有什么区别？

DOM0级的事件添加形式为

var btn = document.querySelector("#btn");
btn.onclick = function(){ //do something...}
console.log(this); // btn

使用DOM0级方法指定的事件处理程序被认为是元素的方法，此时事件处理程
序是在元素的作用域里中运行，所以此时this指向的是元素本身。而且这种添
加方式的缺陷是，只能存在一个处理程序，如果再次向同一个元素添加另外
一个处理程序，上一个处理程序会被覆盖。

DOM2级事件添加形式为

var btn = document.querySelector("#btn");
btn.addEventListener("click",handler);
function handler(){ 
  // do sth ...
  console.log(this); // btn
}

这样的添加方式比起DOM0级更灵活，它可以给一个同一个元素添加多个处理
事件。同时它的this也同样指向元素本身

题目2： attachEvent与addEventListener的区别？

attachEvent()是IE的事件处理程序，它与addEventListener的主要区别在于以下几点：

• 参数个数：attach由于只能运行在IE浏览器中，所以他的事件处理形式只能是事件冒泡，而addEventListener的时间处理形式可以是事件冒泡，也可以是事件捕获，所以他的参数中多了一个boolean值，当为true时，为事件捕获，false时为事件冒泡.
• 事件名：attachEvent的事件名与DOM0级事件名一样，都是在具体事件前加上了on；而addEventListener的事件名去掉了on.
• 作用域：在attachEvent的事件处理程序中，它的作用域是全局作用域，this等于window； 而在addEventListener里事件处理程序的作用域是元素的作用域，this等于元素本身。
• 事件处理程序执行顺序：通过attachEvent给某元素添加多个对于同一事件的处理程序时，它们的执行顺序是按照最后添加的先执行； 对于addEventListener的事件处理程序则是按照添加顺序执行。

题目3： 解释IE事件冒泡和DOM2事件传播机制？

事件冒泡模型

• IE事件冒泡的流程是，当监测到一个事件发生时，事件会从目标元素开始向父级传递，直到传递到window（document）停止。这期间，如果遇到同样的事件，都会激活对应的事件处理程序。

事件捕获模型

事件捕获的流程与事件冒泡截然相反，当监测到一个事件发生时，事件会从window开始向子级传递，直到传递到目标元素停止。这期间，如果遇到同样的事件，都会激活对应的事件处理程序。

DOM事件流

• 而DOM2的时间传播机制包括了事件冒泡机制作为事件传播的第三阶段，并且加入了第一阶段：事件捕获，即与冒泡机制相反，侦听到事件时，事件先从document开始再到子元素一层层直到目标元素。第二阶段： 处于目标阶段，此时事件在div上发生，被看做冒泡的一部分。

题目4：如何阻止事件冒泡？ 如何阻止默认事件？

• 对于非IE浏览器

btn.addEventListener("click",function(e){
  e.stopPropatgation();  //阻止事件冒泡或事件捕获
  e.preventDefault() // 阻止默认事件
})
兼容DOM的浏览器会将一个event对象传入事件处理程序中，这个event对象包
含一个stopPropagation()方法，可以组织事件的进一步捕获或冒泡（取决于添
加时的参数）。并且包含一个preventDefault()方法，可以取消事件的默认行
为。（在事件处理程序里使用return false也可以）

• 对于IE浏览器

btn.attachEvent("onclick",function(e){
  e.cancelBubble = true; // 阻止事件冒泡
  e.returnValue = true; // 阻止默认事件
对于IE来说，它的event对象具有cancelBubble属性，默认值为false，设置为
true用来取消事件冒泡； 还有returnValue，默认值为true，设置为false用来取
消事件的默认行为。
})

题目5：有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
    var btn = document.querySelector("button");
    btn.addEventListener("click",function(e){
      console.log(e);
    });
    var ct = document.querySelector(".ct");
    ct.addEventListener("click",function(e){
        console.log(e.target.innerText);
    });
</script>

题目6： 补全代码，要求：

当点击按钮开头添加时在这里是元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 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 btnStart = document.querySelector("#btn-add-start");
var btnEnd = document.querySelector("#btn-add-end");
var ct = document.querySelector(".ct");
btnStart.addEventListener("click",function(e){
  var li1 = document.querySelector("li:first-child");
  var li = document.createElement("li");
  if(getValue()){
    li.innerText = getValue();
    ct.insertBefore(li,li1);
  }
});

btnEnd.addEventListener("click",function(e){
  var li = document.createElement("li");  
  if(getValue()){
    li.innerText = getValue();
    ct.appendChild(li);
  }
});

ct.addEventListener("click",function(e){
  console.log(e.target.innerText);
});

function getValue(){
  var iptval = document.querySelector(".ipt-add-content");
  return iptval.value;
}
</script>

预览地址

题目7： 补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。

<style>
li,
ul {
  list-style: none;
  padding: 0;
}
.img-preview {
  position: relative;
  border: 1px solid ;
  width: 350px;
  height: 250px;
  margin: 10px auto;
  overflow: hidden;
}
.ct {
  width: 350px;
  margin: 10px auto;
}
li:hover {
  background: #eee;
}
img {
  position: absolute;
  width: 350px;
  display: none;
  animation: slide 1.5s;
}
@keyframes slide{
  from{opacity: .5;}
  to{opacity: 1;}
}
img.hover {
  display: inline-block;
}
</style>
<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">
  ![](https://img.haomeiwen.com/i3436795/c22d6104a432be76.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  ![](https://img.haomeiwen.com/i3436795/c8111f0926647c06.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  ![](https://img.haomeiwen.com/i3436795/33c177e30e0e513f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
</div>
<script>
var ct = document.querySelector(".ct");
var li1 = document.querySelector("li:first-child");
console.log(li1.getAttribute("data-img")[0]);

ct.addEventListener("mouseover",function(e){
  for(var k=0;k<3;k++){
    console.log(1);
    document.querySelectorAll("img")[k].classList.remove("hover");
    console.log(2);
  }
  var i = e.target.getAttribute("data-img")[0];
  var imghover = document.querySelector("img:nth-child("+i+")");
  imghover.classList.add("hover");
});
</script>

预览地址