事件 - 简书

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

DOM0事件有两种事件监听方式
HTML内联方式

<button onclick="console.log('点击')">按钮</button>

JavaScript指定事件方式。

<button >按钮</button>
<script>
var btn = document.querySelector('button')
btn.onclick = function(){
console.log('点击')}
</script>

DOM2级事件监听方式：新增函数addEventListener()来给DOM节点绑定事件监听函数。新增函数removeEventListener()来溢出事件监听函数。

<button >按钮</button>
<script>
var btn = document.querySelector('button')
btn.addEventListener('click',function(){
  console.log('点击')
  })
</script>

DOM2级事件，理论上你可以向某个元素加入无数的事件。但实际上，这会受限于客户端的内存容量以及其它的性能问题，而这对于每一个浏览器都是不同的。addEventListener 还有一个特点就是最后的参数，它会改变是采用冒泡机制还是捕获机制。
DOM0级事件有个重大的缺点就是，不像上面提到的事件监斩器那样，你只可以指定一个内联事件。内联事件会转化元元素的属性，那意味着当指定多个的内联事件时，它之前所指定的内联事件会被覆盖掉。

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.如何阻止事件冒泡？如何阻止默认事件？

利用事件对象event修改属性

DOM中阻止事件冒泡用stopPropagation()；阻止默认事件用preventDefault()
IE中阻止事件冒泡将cancelBubble默认值设置为true；阻止默认事件将returnValue默认值设置为false

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

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<!--方法1-->
<script>
var linodes = document.querySelectorAll('li')
linodes.forEach(function(node){
    node.addEventListener('click',function(){
        console.log(node.innerText)
    })
})
</script>
<!--方法2-->
<script>
var container = document.querySelector('.ct')
container.addEventListener('click',function(e){
    var target = e.target
    if (target.tagName.toLowerCase() === 'li') {
        console.log(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>
//你的代码
</script>

<script>
var container = document.querySelector('.ct')
var addContent = document.querySelector('.ipt-add-content')
var btnStart = document.querySelector('#btn-add-start')
var btnEnd = document.querySelector('#btn-add-end')
btnEnd.addEventListener('click',function(){
  if (!/\s/.test(addContent.value)) {
    var node = document.createElement('li')
    node.innerText = addContent.value
    container.append(node)
} else {
   alert("不允许输入空字符串")
} 
  })
     //结尾添加
btnStart.addEventListener('click',function(){
  if (!/\s/.test(addContent.value)) {
    var node = document.createElement('li')
    node.innerText = addContent.value
    container.prepend(node)
} else {
   alert("不允许输入空字符串")
} 
  })  
   //开头添加
container.addEventListener('click',function(e){
  if (e.target.tagName.toLowerCase() === 'li') {
    console.log(e.target.innerText)
  } 
})  //点击每一个元素li在控制台展示文本内容
</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>
//你的代码
</script>

<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')
var preview = document.querySelector('.img-preview');
var image = document.createElement('img')
ct.addEventListener('mouseover',function(e){
  if (e.target.tagName.toLowerCase() === 'li') {
    var dateImage = e.target.getAttribute('data-img')
    image.setAttribute('src',dateImage)
    preview.append(image)    
  }
})
ct.addEventListener('mouseout',function(e){
  if (e.target.tagName.toLowerCase() === 'li') {
    preview.removeChild(image)  
   }     
})
</script>

事件