细说 jQuery 事件篇（四） - 改变事件过程

nifhlheimr 发布于2019-08-19 14:53 / 1428人阅读

摘要：事件对象是一种结构，它会在元素获得处理事件的机会时传递给调用的事件处理程序。事件对象的属性指的是事件目标，它将保存发生事件的目标元素。所以，接下来我们就要想办法改变事件过程来阻止这个行为。

在《细说 jQuery 事件篇（三） - 事件传播》中提到了事件冒泡可能造成的弊端，当时举了 mouseout 的例子，对于 mouseout 这个特殊情况，我们可以用 hover 方法来解决，但是对于 hover 方法无法解决的情形，我们又应该如何处理呢？
为此，我们必须通过访问事件对象来改变事件过程。

事件对象是一种 DOM 结构，它会在元素获得处理事件的机会时传递给调用的事件处理程序。这个对象中包含着与事件有关的信息。

事件对象 event 的 target 属性指的是事件目标，它将保存发生事件的目标元素。
首先，我们举一个 hover 无法处理的例子：


  
    segmentfault

样式为：

div {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}

我们的需求是仅仅当点击 div 区域时添加一个背景色，但是点击 a 标签时并不改变背景色。
添加样式为：

.blueBg {
  background-color: lightblue;
}

jQuery 代码为：

  $("div").click(function() {
    $("div").addClass("blueBg");
  });

此时点击 div 后:

但由于事件冒泡的存在，当我们点击 a 标签跳出页面后，发现 div 的背景色也被改变。所以，接下来我们就要想办法改变事件过程来阻止这个行为。

阻止事件冒泡

利用事件对象的 .stopPropagation() 方法可以阻止事件冒泡。下面我们来阻止 a 标签向上冒泡。修改 jQuery 代码如下：

  $("a").click(function(event) {
    event.stopPropagation();
  });
  $("div").click(function(event) {
    $("div").addClass("blueBg");
  });

此时，再点击 a 标签将不会改变 div 的背景色。
但是根据 jQuery 文档的说明，stopPropagation 方法对 live 和 delegate 绑定的事件是不支持的。

阻止默认行为

如果此时我们还希望能阻止 a 标签的默认行为，也就是打开一个页面的行为，这里我们需要用到事件对象的 .preventDefault() 方法。

  $("a").click(function(event) {
    event.preventDefault();
    event.stopPropagation();
  });
  $("div").click(function(event) {
    $("div").addClass("blueBg");
  });

此时，点击 a 标签不仅不会改变 div 的背景色，也不会打开新的页面，也就是说默认行为被阻止。

事件委托

曾经写过一篇介绍事件委托的博文 - 《Javascript - 事件委托是怎么工作的？》。这里就不详细写了，但是 jQuery 提供了专门的方法来实现事件委托，就是利用 .on() 方法。
对于之前博文的例子：


    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6

利于 jQuery 的 on 方法可以简写为：


    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6

参考

http://book.douban.com/subject/24669823/

云服务器 GPU云服务器 html视口改变事件 js事件执行过程事件jquery jquery事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78167.html

细说 jQuery 事件篇（五） - 事件的移除和重绑定

摘要：一种做法是在事件处理程序中使用条件语句进行判断，另一种更彻底的做法就是直接移除该处理程序。事件重绑定我们添加一个按钮，当点击按钮后，所有的事件的处理程序又被重新绑定回来。如果我们需要移除已经注册的事件处理程序，使某些处理程序失效。一种做法是在事件处理程序中使用条件语句进行判断，另一种更彻底的做法就是直接移除该处理程序。移除处理程序假设有个 div 和 button，当我们点击...

boredream 2019-08-19 14:53 评论0 收藏0
细说 jQuery 事件篇（六） - 模拟用户操作

摘要：查看上方法被触发的原因是但是通过方法直接修改元素的值并不能触发事件，只有当用户真实输入并改变框的内容时才有效。但是假设我们希望能模拟用户的操作，则需要用到方法，修改代码如下此时，不需要用户进行点击操作，通过已经模拟了一次用户的操作。前阵子在调一个 bug 的时候遇到一个很坑的问题，在判断一个输入框是否有用户输入时触发 updateModel 操作，并向后台发送 PUT 请求，结果调试...

syoya 2019-08-19 14:53 评论0 收藏0
细说 jQuery 事件篇（三） - 事件传播

摘要：是如何决定由哪个元素来处理事件的，以及又是如何优化处理这个问题的，这些都涉及到了事件传播。事件冒泡的弊端事件冒泡可能会导致意料之外的行为，例如在响应事件时，依旧是上例，当为最外层的添加一个事件。使用方法可以避免事件传播导致的问题。 Javascript 是如何决定由哪个元素来处理事件的，以及 jQuery 又是如何优化处理这个问题的，这些都涉及到了事件传播。事件传播策略当页面内...

Cc_2011 2019-08-19 14:51 评论0 收藏0
细说 jQuery DOM操作篇（二） - DOM 树操作

摘要：此时，点击新建的将会触发。设置元素内容的方法则使用上述两种方法，将新内容作为参数传递即可，例如修改上例中的文本内容方法同理。我们知道通过 $() 函数可以访问文档中的元素，并返回一个 jQuery 对象，并且通过一系列方法，我们可以修改元素的样式和内容，实际上，我们还可以通过该函数做更多的事情，例如添加、删除、复制等操作来改变 DOM 树的结构。创建元素我们可以通过 $() ...

Anchorer 2019-08-21 12:20 评论0 收藏0
细说 jQuery 事件篇（二） - 处理简单事件

摘要：我们可以利用可以对用户发起的事件进行处理，这里以样式转换为例来说明。其他类似的操作事件都可以通过这个方法，将处理事件的程序绑定到同名事件上面。我们可以利用 jQuery 可以对用户发起的事件进行处理，这里以样式转换为例来说明。增添样式基于用户的事件，对特定的 DOM 元素样式进行转换是 jQuery 处理事件中比较常见的情形，举例说明，当用户点击输入框后，会增添 highli...

ckllj 2019-08-19 14:51 评论0 收藏0