DOM事件

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

• DOM0：onclick 只能绑定一个事件，绑定多个会产生覆盖；不能设置参数，使用默认的事件冒泡阶段。
• DOM2：addEventListener中有第3个参数，attachEvent没有。第3个参数传递的是false或true。这个参数可选，默认是false。
  false--表示事件处理将在冒泡阶段执行。
  true--表示事件处理将在捕获阶段执行。
• 理论上，Event Listeners (addEventListener、attachEvent（IE使用 ）)可以无限增加事件监听给某个一元素。实际应用的约束就是客户端内存的限制，这一点因每个浏览器而异。

2、attachEvent与addEventListener的区别？

• 参数个数不相同，addEventListener有三个参数，attachEvent只有两个，attachEvent添加的事件处理程序只能发生在冒泡阶段，addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理（我们一般为了浏览器兼容性都设置为冒泡阶段）
• 第一个参数意义不同，addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）
• 事件处理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window，所以会返回undefined，而不是元素id。
• 为一个事件添加多个事件处理程序时，执行的顺序不同。 addEventListener 会按照添加的顺序执行。 attachEvent 添加多个事件处理程序时，顺序是无规律的。

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

当事件发生在某个文档节点上时（即事件目标），目标的事件处理程序就会被触发。此外目标的每个祖先节点也有机会处理该事件。

• 2级DOM的事件传播包含三个阶段:
  捕捉阶段（capturing），事件从顶级文档树节点一级一级向下遍历，直到到达该事件的目标节点。
  到达事件的目标节点，执行目标节点的时间处理程序。
  事件起泡（bubbling），事件从目标节点一级一级向上上溯，直到顶级文档树节点。
• 相应的，2级DOM通过下面的两个函数给节点对象添加和删除事件处理函数。
  addEventListener(eventType, handler, propagate);
  removeEventListener(eventType, handler, propagate);
  三个参数意思分别如下:
  eventType: 即事件类型（不加on）。比如："click"。
  handler: 事件处理函数。传入参数即为事件对象event。
  propagate: 是否只执行捕获和目标节点两个阶段。true的话，只执行1，2两个阶段；false的话，只指向2，3两个阶段。
• IE的事件传播只包含上边的2和3两个阶段
  相应的，IE通过下面两个函数给节点对象添加和删除事件处理函数。
  attachEvent(eventType, handler);
  detachEvent(eventType, handler);
  参数意思同2级DOM对应的函数参数

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

• DOM浏览器
  阻止冒泡e.stopPropagation();
  阻止默认事件event.preventDefault()
• IE浏览器
  阻止冒泡e.cancelBubble = true;
  阻止默认事件event.returnValue = false;
• 使用 onmouseenter、onmouseleave等事件默认阻止冒泡

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

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

方法一（利用闭包）：http://js.jirengu.com/kidog/1/edit?html,js,console,output
方法二（利用 this）：http://js.jirengu.com/tehuq/1/edit?js,console,output

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>
//你的代码
</script>

<script>
var ct=document.getElementsByClassName('ct')[0]
var addS=document.getElementById('btn-add-start')
var addE=document.getElementById('btn-add-end')
var lis=ct.getElementsByTagName('li')

function getEvent(){
  for(var i=0;i<lis.length;i++){
    lis[i].onclick=function(){
      console.log(this.innerHTML)
    }
  }
}
getEvent()

addS.onclick=function(){
  var ipt=document.getElementsByTagName('input')[0]
  if (ipt.value.replace(/(^s*)|(s*$)/g, "").length ==0) 
  {console.log('不能为空');return}
  var newLi=document.createElement('li')
  newLi.innerHTML=ipt.value
  ct.insertBefore(newLi,ct.firstChild)
  lis=ct.getElementsByTagName('li')
  getEvent()
}
addE.onclick=function(){
  var ipt=document.getElementsByTagName('input')[0]
  if (ipt.value.replace(/(^s*)|(s*$)/g, "").length ==0) 
  {console.log('不能为空');return}
  var newLi=document.createElement('li')
  newLi.innerHTML=ipt.value
  ct.appendChild(newLi)
  lis=ct.getElementsByTagName('li')
  getEvent()
}
</script>

预览地址：http://js.jirengu.com/zacam/1/edit?html,js,console,output

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>
//你的代码
</script>

<script>
var lis=document.getElementsByTagName('li')
var ct=document.getElementsByClassName('img-preview')[0]
var img1=document.createElement('img')
ct.appendChild(img1)

for(var i=0;i<lis.length;i++){
  lis[i].onmouseover=function(){
    img1.src=this.getAttribute('data-img')
  }
}
</script>

预览链接：http://js.jirengu.com/bagix/2/edit
方法二：利用事件代理
预览链接：http://js.jirengu.com/duseb/3/edit?html,js,output