进阶9 事件

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

<html>

<button id="btn">click me</button>


<script>

var btn = document.getElementById('btn')

btn.onclick = function(){
  console.log('DOM0')
}               //DOM0事件监听
//////////
//////////
btn.addEventListener('click',function(){
  console.log('DOM2')
})             //DOM2时间监听


</script>


</html>

DOM0级事件处理方式：
通过javascript制定事件处理程序的传统方式。就是将一个函数赋值给一个事件处理属性
DOM2级事件处理方式
DOM2级事件处理方式指定了添加事件处理程序和删除事件处理程序的方法

attachEvent与addEventListener的区别？

target.attachEvent(type,handler)
attachEvent接收两个参数
参数一：是监听的事件类型，时间前要加“on”，比如“click”事件要写作“onclick”
参数二：是回调函数，触发事件后执行，注意该回调函数是没有参数的
target.addEventListener(type, handler,boolean);
都接受三个参数：
参数一：事件类型
参数二：事件处理方法
参数三：布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理（默认false）

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

IE的事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素

事件冒泡模型

DOM事件流：DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段

DOM事件流

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

event.stopPropagation();   //阻止事件捕获、冒泡
event.preventDefault();    //阻止事件默认行为
////////////
event.cancelBubble = true;  //  阻止冒泡的兼容写法，值为false为允许冒泡
event.returnValue = true; // 阻止默认事件的兼容写法，值为flase为允许默认事件

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

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

var liNode = document.querySelectorAll('.ct li')
liNode.forEach(function(node) {
  node.addEventListener('click',function(){
    console.log(this.innerText)
  })
})
</script>

补全代码，要求：

当点击按钮开头添加时在<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 ctNode = document.querySelector('.ct')
  var iptCt = document.querySelector('.ipt-add-content')
  var addStart = document.querySelector('#btn-add-start')
  var addEnd = document.querySelector('#btn-add-end')

  ctNode.addEventListener('click', function (e) {
    if (e.target.tagName === 'LI') {
      console.log(e.target.innerText)
    }
  })

  addStart.addEventListener('click', function () {
    if (/\S/.test(iptCt.value)) {
      var liNode = document.createElement('li')
      liNode.innerText = iptCt.value
      console.log(ctNode)
      console.log(ctNode[0])
      ctNode.insertBefore(liNode, ctNode.firstChild) //开头添加
    }
  })

  addEnd.addEventListener('click', function () {
    if (/\S/.test(iptCt.value)) {
      var liNode = document.createElement('li')
      liNode.innerText = iptCt.value
      ctNode.appendChild(liNode) //末尾添加
    }
  })
</script>