事件

事件流

事件流描述的是从页面中接收事件的顺序，有三种模型

1. 事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素
2. 事件捕获：不太具体的节点更早接收事件，而最具体的元素最后接收事件，和事件冒泡相反
3. DOM事件流：DOM2级事件规定事件流包括三个阶段，事件捕获阶段、处于目标阶段、事件冒泡阶段。首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段

DOM0级事件处理程序与DOM2级事件处理程序

1. DOM0级事件处理程序，事件名以 'on' 开头，click 事件的事件处理程序就是 onclick，load 事件的事件处理程序就是 onload
   • HTML 事件处理程序
     可以通过 HTML 元素的属性来指定事件

       <input type="button" value="这是个按钮" onclick="showMessage()" />
     

     input 对应的 onclick 事件处理程序为

       function showMessage(){
         alert('hello');
       }
     

   • 通过 JavaScript 添加DOM0级事件处理程序

       var btn = document.getElementById("myBtn");
       btn.onclick = function() {
         alert('hello');
       }
     

     DOM0级事件处理程序可以认为是元素的方法
     删除DOM0级事件处理程序

       btn.onclick = null;
     

2. DOM2级事件处理程序
   定义了两个方法用于处理指定和删除事件处理程序：addEventListener 和 removeEventListener，它们接收三个参数：事件类型、事件处理方法、布尔参数（如果是 true 表示在捕获阶段调用事件处理程序，如果是 false，则是在事件冒泡阶段处理）
   通过 addEventListener() 添加的事件只能由 removeEventListener() 来移除，并且 removeEventListener() 只能移除具名函数，不能移除匿名函数
3. IE中DOM2级事件
   IE8及之前，实现类似上述方法通过 attachEvent() 和 detachEvent()，这两个方法接收相同的两个参数（要处理的事件名、作为事件处理程序的函数）
   由于IE8之前只支持事件冒泡，所以通过 attachEvent() 添加的事件处理程序只能添加到冒泡阶段，类似的 detachEvent() 也只能移除具名函数，不能移除匿名函数

---

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

• DOM0级事件 事件名作为元素的属性，事件处理程序作为属性值
• DOM2级事件 将作为元素属性的事件组合为队列，通过 addEventListener() 和 removeEventListener() 监听事件，接收三个参数（要处理的事件名、作为事件处理程序的函数、布尔值），第三个参数 true 或 false 可以决定在捕获阶段还是在冒泡阶段调用事件处理程序

---

attachEvent与addEventListener的区别？

	addEventListener	attachEvent
参数个数	接收三个参数（要处理的事件名、作为事件处理程序的函数、布尔值）	接收两个参数（要处理的事件名、作为事件处理程序的函数
事件阶段	第三个参数 true 或 false 可以决定在捕获阶段还是在冒泡阶段调用事件处理程序	只能在事件冒泡阶段调用事件处理程序
第一个参数	第一个参数是事件类型（click、load）	第一个参数是事件名（onclick、onload）
this	事件处理程序的作用域在元素内，this 指触发的元素	事件处理程序在全局作用域内运行，this 指 window，返回 this 为 undefined
执行顺序	为一个事件添加多个事件处理程序时，会按添加的顺序执行	添加多个事件处理程序时，顺序无规律

---

解释IE事件冒泡和DOM2事件传播机制？

• IE事件冒泡
  事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素
• DOM2级事件
  包括三个阶段，事件捕获阶段、处于目标阶段、事件冒泡阶段。首先发生的是事件捕获，不太具体的节点更早接收事件，而最具体的元素最后接收事件，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段

---

如何阻止事件冒泡？ 如何阻止默认事件？

	非IE浏览器	IE浏览器
阻止事件冒泡	e.stopPropagation()	event.cancelBubble=true
阻止默认事件	e.preventDefault()	event.returnValue=false

---

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

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>

<script>
var li_list = document.querySelectorAll(".ct>li");
for(var i=0;i<lis.length;i++){
  li_list[i].addEventListener('click',function(){
    console.log(this.innerHTML)
  });
}
</script>

效果如下

---

补全代码，要求：

• 当点击按钮 开头添加 时在 <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>

var start = document.querySelector('#btn-add-start');
start.addEventListener('click',insertStart);
//start.removeEventListener('click',insertStart);
function insertStart(){
  var li = document.createElement("li");
  var content = document.querySelector(".ipt-add-content");
  //console.log(content);
  if(/^\s*$/.test(content.value))return false;
  li.innerText = content.value;
  //console.log(li);
  var li_1 = document.querySelector(".ct>li:first-child");
  //console.log(li_1);
  var ul = li_1.parentNode;
  ul.insertBefore(li,li_1);
  li.addEventListener('click',function(){
    console.log(this.innerText);
  });
  li = null;
}
var end = document.querySelector('#btn-add-end');
end.addEventListener('click',insertEnd);
//end.removeEventListener('click',insertEnd);
function insertEnd(){
  var li = document.createElement("li");
  var content = document.querySelector(".ipt-add-content");
  //console.log(content)
  if(/^\s*$/.test(content.value))return false;
  li.innerText = content.value;
  //console.log(li);
  var li_2 = document.querySelector(".ct>li:last-child");
  //console.log(li_2)
  var ul = li_2.parentNode;
  ul.insertBefore(li,null);
  li.addEventListener('click',function(){
    console.log(this.innerText);
  });
  li = null;
}

function showInfo(){
  var li_list = document.querySelectorAll(".ct>li");
for(var i=0;i<li_list.length;i++){
  li_list[i].addEventListener('click',function(){
    console.log(this.innerHTML);
  });
}
}
window.addEventListener('load',showInfo);

效果如下

---

补全代码，要求：当鼠标放置在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>

var ul = document.querySelector(".ct");
var childs = ul.querySelectorAll("li");
var preview = document.querySelector(".img-preview");
for(var i=0;i<childs.length;i++){
  childs[i].addEventListener('mouseover',function(){
    var img = this.getAttribute("data-img");
    preview.innerHTML = "![](" + img + ")";
  });
  childs[i].addEventListener('mouseout',function(){
    preview.innerHTML = null;
  });
}

效果如下