事件绑定-事件执行机制

事件绑定方式

• 事件属性写法
  • 在html标签里写事件
• 事件绑定写法
  • 在js中通过节点绑定的方式绑定事件
• 事件监听方式
  • 事件源.addEventListener(事件类型,处理函数,事件传播方向)
  • 事件传播方向
    • =>true 为事件捕获，由外向内
    • =>false 【默认值】为事件冒泡，由内向外

事件冒泡&&事件捕获

• 阻止事件冒泡

function stopBubbling(e) {
  if (e.stopPropagation) {
    e.stopPropagation()
  } else {
    e.cancelBubble = true
  }
}

事件目标对象

• 通过target实现事件委托

<div class="wrap">
    <ul>
        <li>li一</li>
        <li>li二</li>
        <li>li三</li>
    </ul>
</div>
<script>
    let ulObj = document.querySelector('ul')
    ulObj.onclick = function (e) {
        e = e || window.event
        let target = e.target
        alert(target.innerHTML + '接收值')
    }
</script>

阻止默认行为

// 阻止默认行为函数
function preventDel(event) {
  if (event.preventDefault) {//preventDefault方法体存在就是用
      event.preventDefault();
  } else {//兼容IE
      event.returnValue = false;
  }
}

不支持冒泡

• 焦点事件
• 浏览器事件
• 移入移出事件