事件

2019-03-22 本文已影响0人 antimony

解释以下概念：事件传播机制、阻止传播、取消默认事件、事件代理。

事件传播机制主要有三种：

事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素（从小到大）
事件捕获：不太具体的节点更早接收事件，而最具体的元素最后接收事件，和事件冒泡相反（从大到小）
DOM事件流：DOM2 级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段（标准浏览器现在都使用 DOM 事件流，IE 不支持事件流，只支持事件冒泡）

2.阻止传播

stopPropagation() 取消事件进一步捕获或冒泡

取消默认事件
preventDefault() 取消事件默认行为
事件代理
通过事件冒泡（或者事件捕获）给父元素添加事件监听，e.target 指向引发触发事件的元素。

写一个 Demo，演示事件传播的过程，演示阻止传播的效果。

<style>
  .container,
  .box,
  .target{
    border: 1px solid;
    padding: 20px;
  }
</style>
  
<button id="btn">click</button>
<div class="container">
  container
  <div class="box">
    box
    <div class="target">target</div>
  </div>
</div>
  
<script>
function $(selector){
  return document.querySelector(selector)
}
  
var btn = $('#btn')
btn.addEventListener('click',function(evt){
  console.log(evt.target)
})

$('.container').addEventListener('click',function(e){
  console.log('container click in 捕获阶段')
},true)
$('.box').addEventListener('click',function(e){
  // 在此处添加 e.stopPropagation()则捕获阶段止于 box 捕获阶段 而不再向下出现"target click in 捕获阶段"和所有冒泡阶段
  // e.stopPropagation()
  console.log('box click in 捕获阶段')
},true)
$('.target').addEventListener('click',function(e){
  console.log('target click in 捕获阶段')
},true)

$('.container').addEventListener('click',function(e){
  console.log('container click in 冒泡阶段')
},false)
$('.box').addEventListener('click',function(e){
  // 在此处添加 e.stopPropagation()则冒泡阶段止于 box 而不再向上出现"container click in 冒泡阶段"
  // e.stopPropagation()
  console.log('box click in 冒泡阶段')
},false)
$('.target').addEventListener('click',function(e){
  console.log('target click in 冒泡阶段')
},false)
</script>

解释DOM2事件传播机制。

dom2事件传播

补全代码，要求：

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <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>
    function $(query){
      return document.querySelector(query);
    }
    var ul = $('.ct')
    var addContent = $('.ipt-add-content')
    var addStart = $('#btn-add-start')
    var addEnd = $('#btn-add-end') 
    addStart.addEventListener('click',function(){
        if(addContent.value !== ''){
            var li = document.createElement('li')
            li.innerText = addContent.value
            ul.insertBefore(li,ul.firstChild)
        }
    })
    addEnd.addEventListener('click',function(){
        if(addContent.value !== ''){
            var li = document.createElement('li')
            li.innerText = addContent.value
            ul.appendChild(li)
        }
    })
   ul.addEventListener('click',function(e){
        if(e.target.nodeName.toLowerCase() === 'li'){
            console.log(e.target.innerText)
        }
    })
    
  </script>
</body>
</html>

onlick与addEventListener的区别？

结论：

1.onclick事件在同一时间只能指向唯一对象

2.addEventListener给一个事件注册多个listener

3.addEventListener对任何DOM都是有效的，而onclick仅限于HTML

4.addEventListener可以控制listener的触发阶段，（捕获/冒泡）。对于多个相同的事件处理器，不会重复触发，不需要手动使用removeEventListener清除

5.IE9使用attachEvent和detachEvent

事件