day03—JavaScript中DOM的Event事件方法

转行学开发，代码100天——2018-03-19

1、Event 对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

2、常用的event属性有：

type //返回当前 Event 对象表示的事件的名称。

target //返回触发此事件的元素（事件的目标节点）

3、常用的event方法有：

initEvent() //初始化新创建的 Event 对象的属性

stopPropagation() //通知浏览器不要执行与事件关联的默认动作。即阻止事件冒泡

preventDefault() //不再派发事件。即阻止默认事件

<!DOCTYPE html>
<html>
<head>
    <title>事件流</title>
</head>
<body>
  <div id="div">
      <button id="btn">按钮</button>
      <a href="http://www.baidu.com" id="aid">百度</a>
  </div>
  
  <script type="text/javascript">
      document.getElementById("btn").addEventListener("click",showType);
      document.getElementById("div").addEventListener("click",showDiv);
      document.getElementById("aid").addEventListener("click",showA);

      function showType(event)
      {
          alert(event.bubbles);//事件为冒泡事件，返回值为true
          alert(event.type); //返回类型为click
          alert(event.target); //返回[object HTMLButtonElement]
          event.stopPropagation();//阻止事件冒泡
      }
      function showDiv()
      {
          alert("div");
      }
      function showA(event)
      {
          event.stopPropagation();//阻止冒泡事件
          event.preventDefault(); //阻止a标签默认行为，即点击a标签时，不会跳转到相应网址

      }
  </script>
</body>
</html>

注意：事件传播

在 2 级 DOM 中，事件传播分为三个阶段：

第一阶段捕获阶段。事件从 Document 对象沿着文档树向下传递给目标节点。如果目标的任何一个先辈专门注册了捕获事件句柄，那么在事件传播过程中运行这些句柄。

第二个阶段发生在目标节点自身。直接注册在目标上的适合的事件句柄将运行。这与 0 级事件模型提供的事件处理方法相似。

第三阶段起泡阶段。在此阶段，事件将从目标元素向上传播回或起泡回 Document 对象的文档层次。

心未老，即奋不顾身！