Question

在网页上是带有click和/或按键处理程序的元素。如果我添加一个新的，它将在它们之后执行。我需要一种方法来添加一个新的回调，它被添加到事件处理程序列表中，以便事先执行它。如何使用jQuery实现这一点？

更新

为什么我不能只使用jQuery的unbind方法？我正在将jQuery代码注入任何网页，因此我不知道是否使用了任何JavaScript框架。我需要一种通用的方法来检测事件处理程序并使用它。（在你问之前，我正在构建一个“记录器”应用程序，它跟踪用户存储它们的操作并在以后执行它们。）

更新2

我只使用Firefox，不需要IE兼容性。我必须等待页面完全加载，之后我的jQuery脚本将被调用。

Answer 1

我认为如果您使用事件捕获（在事件到达元素之前调用祖先的处理程序）而不是冒泡（child - ＆gt;祖先），这可能会有效。这是一种在达到目标元素之前拦截事件的方法。

大多数事件处理程序都使用事件冒泡。根据w3c，事件首先被捕获，然后从目标再次冒泡。因此，如果您要使用捕获将事件绑定到文档，则将首先对页面上的每个元素执行该事件。

http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-flow-capture

您可以使用以下方法绑定处理程序:(第三个参数是您是否要使用事件捕获）

document.body.addEventListener('click',handler,true)

在执行单击元素的事件处理程序之前，将对元素中的每次单击执行此操作。我不确定浏览器的支持情况。

Answer 2

我也满足了这一需求，并提出了一种解决方法，该方法基于事件在 DOM 上的冒泡方式。所以主要思想是实际执行以下操作：

插入一个额外的元素作为要附加事件的元素的直接子元素。
在点击事件的情况下，确保它采用其父级的完整宽度和高度：
- 如果父级有填充/边框，则为子级添加负边距，使其占据父级的整个区域
将预先添加的点击事件添加到创建的子项

点击事件被预先考虑，因为对子级的点击将首先执行并且事件冒泡到父级。然后将在之后执行父级的现有事件，从而创建所需的效果。

示例：

      
      const $someButton=$('.btn')
      $someButton.click(()=> alert('default event'))
      /**
      * 1. Insert an extra element 
      * as direct child of the element 
      * you want to append the event to
      **/
      $someButton.wrapInner(
        '<div class="btn__first_event"></div>'
      )
      /**
      * 3. Add the prepended click event to 
      * the created child
      **/
      $someButton.find('.btn__first_event').click(()=>alert('Prepended Event'))

.btn{
   cursor:pointer;
   background-color: yellow;
   padding:10px;
   border-radius:3px;
   border: 1px solid;
   display: inline-block;
}
/*
 2. In the case of click event 
make sure it takes 
the full width and 
height of its parent
-------------------- 
note: some css is needed for 
offsetting padding / border
*/
.btn__first_event{
   margin: -10px;
   padding: 1px;
   border-radius:3px;
   background-color: rgba(0, 0, 255, 0.4)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn">Click me<div>

jQuery事件：为现有的回调处理程序添加一个回调处理程序

2 个答案: