JS 事件

事件绑定

事件源.on事件类型 = 事件处理程序

事件监听

事件目标.addEventListener(事件类型,事件处理程序,是否捕获);

btn.addEventListener('click', function () {
    box.style.width = '500px';
});

事件监听移除元素事件程序

事件目标.removeEventListener(事件类型,事件处理程序名称);

btn.removeEventListener('click',fn2);

事件流

事件冒泡

现象：从目标阶段向document传递

事件对象

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>测试</title>
  </head>
  <body>
    <div>
      <p>-----------</p>
      <a class="myclick" href="www.baidu.com">点击事件</a>
      <p>-----------</p>
    </div>
    <script>
      let btn = document.querySelector('.myclick')
      btn.onclick = e => {
        console.log(e.type) // click
        console.log(e.target) // 获取事件目标里最先触发的元素
        e.preventDefault() // 阻止事件默认行为的执行
        e.stopPropagation() // 停止冒泡
        console.log('点击了', e)
      }
      btn.addEventListener('click', () => {
        console.log('监听了')
      })
    </script>
  </body>
</html>

鼠标事件对象的属性

1、onmouseover、onmouseout：鼠标经过时自身触发事件，经过其子元素时也触发该事件；（父亲有的东西，儿子也有）
2、onmouseenter、onmouseleave：鼠标经过时自身触发事件，经过其子元素时不触发该事件。（父亲的东西就是父亲的，不归儿子所有）
这四个事件两两配对使用，onmouseover、onmouseout一对，onmouseenter、onmouseleave一对，不能混合使用。

e.target.nodeName 获取的DOM元素大写

事件对象.clientX / 事件对象.clientY

作用：鼠标在浏览器可视区域中的坐标

document.onclick = function (e) {
  // 获取鼠标在浏览器可视区域中的坐标
  alert('x:' + e.clientX + ',y:' + e.clientY);
}

事件对象.offsetX / 事件对象.offsetY

作用：获取鼠标在指定的元素的区域中的坐标

事件对象.pageX / 事件对象.pageY

作用：获取鼠标在整个文档区域中的坐标

键盘事件对象的属性

.ctrlKey　　.shiftKey　　.altKey　　.keyCode

事件委托（事件代理）

var divNode = document.getElementById('box')
divNode.onclick = function (e) {
  // 获取最先触发的元素节点
  var node = e.target
  // 节点对象.tagName  获取节点对象对应的标签名 返回的是大写node.tagName.toLowerCase()
  if (node.tagName.toLowerCase() == 'p') {
    alert(node.innerHTML)
  }
}