事件对象

当事件被触发时，就会有事件对象的产生，在事件处理函数中可以使用参数来接收事件对象。下面通过代码进行演示。

 1  <div></div>
 2  <script>
 3   $("div").on("click", function(event) {
 4    console.log(event);
 5   });
 6  </script>

上述代码执行后，在浏览器的控制台中可以查看事件对象，如图1所示。

图1 事件对象

在图1中，通过事件对象可以获取和事件相关的信息。如clientX（鼠标位置X坐标）、clientY（鼠标位置Y坐标）和 currentTarget（当前目标）等。

下面通过代码演示如何利用事件对象阻止默认行为和事件冒泡，示例代码如下。

 1  <a href="1.html">点我</a>
 2  <script>
 3   $(document).on("click", function() {
 4    console.log("单击了document");
 5   });
 6   $("a").on("click", function(event) {
 7    event.preventDefault(); // 阻止事件默认行为
 8    console.log("单击了a");
 9   });
 10 </script>

上述代码执行后，单击页面中的超链接，会看到控制台依次输出“单击了a”和“单击了document”，说明当前发生了事件冒泡。但由于第7行代码阻止了<a>标签的默认行为，并没有发生超链接的页面跳转。

接下来在第7行代码下面再增加一行代码，阻止事件冒泡，如下所示。

event.stopPropagation();  // 阻止事件冒泡

在浏览器中刷新，再次单击<a>标签，会看到控制台中只输出了“单击了a”，说明成功阻止了事件冒泡。