事件

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

• DOM0 事件
  JavaScript和HTML的交互是通过事件实现的。JavaScript采用异步事件驱动编程模型，当文档、浏览器、元素或与之相关对象发生特定事情时，浏览器会产生事件。如果JavaScript关注特定类型事件，那么它可以注册当这类事件发生时要调用的句柄

• 事件是某个行为或者触发，比如点击、鼠标移动

• 当用户点击鼠标时

• 当网页已加载时

• 当图像已加载时

• 当鼠标移动到元素上时

• 当用户触发按键时...

• DOM2级事件监听及使用本质上是对相应的节点执行一个函数，而函数的数据类型为对象，也就决定了不同的函数为不同的对象，因此DOM2级事件处理程序可以有很多个

• DOM2事件处理程序
  DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作：

• addEventListener

• removeEventListener
  所有的DOM节点都包含这两个方法，并且它们都接受三个参数：

• 事件类型

• 事件处理方法

• 布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理

题目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事件传播机制？

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

这种分歧在日常生活中也很常见，举个例子，某个地方出了抢劫事件，我们有多种处理方式

村里先发现，报告给乡里，乡里报告到县城，县城报告给市里。。。。
市里先知道这事儿，然后交代给县城怎么处理，县城交给到乡里处理，乡里交给村里处理
Opera、Firefox、Chrome、Safari都支持DOM事件流，IE不支持事件流，只支持事件冒泡

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

• stopPropagation()方法可以停止事件在DOM层次的传播，即取消进一步的事件捕获或冒泡。我们可以在button的事件处理程序中调用stopPropagation()从而避免注册在body上的事件发生

var handler = function (e) {
    alert(e.type);
    e.stopPropagation();
}

addEvent(document.body, 'click', function () { alert('Clicked body')});
var btnClick = document.getElementById('btnClick');
addEvent(btnClick, 'click', handler);

若是注释掉e.stopPropagation(); 在点击button的时候，由于事件冒泡，body的click事件也会触发，但是调用这句后，事件会停止传播

• 要阻止事件的默认行为，可以使用preventDefault()方法，前提是cancelable值为true，比如我们可以阻止链接导航这一默认行为

document.querySelector('#btn').onclick = function (e) {
    e.preventDefault();
}

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

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
//todo ...
var btn = document.querySelector('.ct');
btn.addEventListener('click',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 ct = document.querySelector('.ct')
  var addStartBtn = document.querySelector('#btn-add-start')
  var addEndBtn = document.querySelector('#btn-add-end')
  var ipt = document.querySelector('.ipt-add-content')
ct.addEventListener('click',function(e){
    var e=e||window.event
    var target=e.target;
    if(target.tagName.toLowerCase()=='li'){
    console.log(target.innerText)
    }
})
  
addStartBtn.addEventListener('click',function(){
    var newNode=document.createElement('li');
    var inputValue=ipt.value;
    if(inputValue){
    newNode.innerText=inputValue;
    ct.insertBefore(newNode,ct.firstElementChild)
    ipt.value='';
    }
})
 addEndBtn.addEventListener('click',function(){
    var newNode=document.createElement('li');
    var inputValue=ipt.value;
    if(inputValue){
    newNode.innerText=inputValue;
    ct.appendChild(newNode,ct.lastElementChild)
    ipt.value='';
    }
})

</script>

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

<ul class="ct">
    <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">鼠标放置查看图片1</li>
    <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">鼠标放置查看图片2</li>
    <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
//你的代码
var ct = document.querySelector('.ct'),
    childs = ct.querySelectorAll('li'),
    preview = document.querySelector('.img-preview');

for(var i=0; i<childs.length; i++){
    childs[i].addEventListener('mouseenter', function(){
       var dataImg = this.getAttribute('data-img');
       preview.innerHTML = '![](' + dataImg + ')'
    });
}
</script>