事件

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

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

 var btn = document.getElementById('div1');
 btn.onclick = function(event){ ... }

btn.onclick = null; // 删除事件

• DOM2级事件’定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener();它们都接受3个参数：要处理的事件名，事件处理程序的函数，和一个布尔值。 最后一个参数：如果为true，表示在捕获阶段调用事件处理程序，如果是false，表示在冒泡阶段调用事件处理程序。

var btn2 = document.getElementById('div2');
    btn2.addEventListener('click', function(e){ ... }, false)
    btn2.addEventListener('click', function(e){ ....... }, false);

这两个事件都会发生，而DOM0级只能覆盖，不会连续触发。
src

题目2： attachEvent与addEventListener的区别？

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

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

• 事件冒泡是由IE开发团队提出来的，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播。
• DOM2级事件规定的事件流包含三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，最后阶段是冒泡阶段。

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

• 兼容DOM的浏览器：
  1.event.stopPropagation()方法
  这是阻止事件的冒泡方法，不让事件向document上蔓延，但是默认事件仍然会执行，当你调用这个方法的时候，如果点击一个链接，这个连链接仍然会被打开
  2.event.preventDefault()方法
  这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素
  3.return false;
  会同时阻止事件冒泡也会阻止默认事件，即链接不会被打开，事件也不会传递到上一层的父元素

• IE浏览器：
  它的event对象具有cancelBubble属性，默认值为false，设置为true用来取消事件冒泡； 还有returnValue，默认值为true，设置为false用来取消事件的默认行为。

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

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
//直接绑定

var liArr = document.getElementsByClassName('ct')[0].getElementsByTagName('li');
 for(var i=0;i<liArr.length;i++){
    liArr[i].addEventListener('click', function(){
        console.log(this.innerText)
    })
 }

 //事件代理 (把事件监听绑定到父容器上，根据事件的来源进行处理)
var ct = document.querySelector('.ct')
ct.addEventListener('click', function(e){
    console.log(e.target.innerText)
})

/* var ct1=document.getElementsByClassName('ct')[0]
 ct1.addEventListener('click', function(){
    console.log(this.target.innerText) //Uncaught TypeError: Cannot read property 'innerText' of undefined
 })
*/
</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 ct = document.querySelector('.ct'),
    addstart = document.querySelector('#btn-add-start'),
    addend = document.querySelector('#btn-add-end'),
    ipt = document.querySelector('.ipt-add-content');

ct.addEventListener('click', function(e){
    if(e.target.tagName.toLowerCase()==='li'){ //取得触发事件的当前对象的TYPE，把它转换成小写，并判断是否等于li 。
        console.log(e.target.innerText) 
    }
})
addstart.addEventListener('click', function(){
    if(ipt.value.length!==0){  //是 !== ，不然长度总是存在的
        var li = document.createElement('li')
        li.innerText=ipt.value
        ct.insertBefore(li, ct.firstChild)  
    }else{alert('输入不能为空')}
    
})
addend.addEventListener('click', function(){
    if(ipt.value.length!==0){
        var li = document.createElement('li')
        li.innerText=ipt.value
        ct.appendChild(li)
    }else{alert('输入不能为空')}
})
</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 ct = document.querySelector('.ct'),
    preview = document.querySelector('.img-preview');
var showpic = document.createElement("img")
preview.appendChild(showpic)

 ct.addEventListener('mouseover', function(e){  //mouseenter不支持冒泡，所以事件代理没效果 
    if(e.target.tagName.toLowerCase()==='li'){
        var att = e.target.getAttribute("data-img")
        showpic.setAttribute("src", att)
    }
 })

//直接绑定
var ct = document.querySelector('.ct'),
    child = ct.querySelectorAll('li'),
    preview = document.querySelector('.img-preview');
  for(var i=0;i<child.length;i++){
    child[i].addEventListener('mouseenter', function(){
        var att=this.getAttribute("data-img")
        preview.innerHTML="![]("+att+")" // innerHTML添加图片变量的格式

    })
    
  }

</script>