javascript - 触发点击事件 : addEventListener is not triggered

Question

我想知道为什么 addEventListener("click", function(){}) 在被 jQuery .trigger("click") 触发时没有被调用但它在被 dispatchEvent(new Event("click")) 触发时被调用。

var el = document.getElementById("foo");

$(el).click(function() { console.log("jquery click"); });
el.onclick = function() { console.log("onclick"); };
el.addEventListener("click", function() { console.log("addEventlistener click"); });

$(el).trigger("click");
console.log("--------");
el.dispatchEvent(new Event("click"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#foo" id="foo">foo</a>

这会产生以下控制台输出

(index):54 jquery click
(index):55 onclick
(index):59 --------
(index):54 jquery click
(index):55 onclick
(index):56 addEventlistener click

我错过了什么吗？ jQuery 是否通过直接调用它的事件监听器来“伪造”点击？

Answer 1

jQuery 的 trigger 触发 jQuery 处理程序并调用元素上的 .event() 函数* — 除非它是一个点击 在 a 元素上，在这种情况下它不会执行第二部分。 (它还专门处理复选框。)例如，如果我们在您的示例中使用 div，我们就会看到它:

var el = document.getElementById("foo");

$(el).click(function() { console.log("jquery click"); });
el.onclick = function() { console.log("onclick"); };
el.addEventListener("click", function() { console.log("addEventlistener click"); });

$(el).trigger("click");
console.log("--------");
el.dispatchEvent(new Event("click"));

<div id="foo"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

...但不是在你的a上:

var el = document.getElementById("foo");

$(el).click(function() { console.log("jquery click"); });
el.onclick = function() { console.log("onclick"); };
el.addEventListener("click", function() { console.log("addEventlistener click"); });

$(el).trigger("click");
console.log("--------");
el.dispatchEvent(new Event("click"));

<a href="#foo" id="foo">foo</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

为什么不呢？对于“跨浏览器一致性”，消息来源说:参见 https://github.com/jquery/jquery/blob/master/src/event.js#L476 (该链接指向行号，因此可能会失效):

    click: {

        // For checkbox, fire native event so checked state will be right
        trigger: function() {
            if ( this.type === "checkbox" && this.click && nodeName( this, "input" ) ) {
                this.click();
                return false;
            }
        },

        // For cross-browser consistency, don't fire native .click() on links
        _default: function( event ) {
            return nodeName( event.target, "a" );
        }
    },

注意末尾的那个位。

---

* 这有点难找。 trigger says :

Any event handlers attached with .on() or one of its shortcut methods are triggered when the corresponding event occurs. They can be fired manually, however, with the .trigger() method.

...但是 triggerHandler says :

The behavior of this method is similar to .trigger(), with the following exceptions:

• .triggerHandler( "event") 方法不会在触发它的元素上调用 .event()。这意味着表单上的 .triggerHandler( "submit") 不会调用表单上的 .submit()。
• .trigger() 将对与 jQuery 对象匹配的所有元素进行操作，而 .triggerHandler() 仅影响第一个匹配的元素。
• 使用 .triggerHandler() 触发的事件不会向上冒泡 DOM 层次结构；如果目标元素不直接处理它们，则它们什么也不做。
• 不是返回 jQuery 对象(以允许链接)，.triggerHandler() 返回它导致执行的最后一个处理程序返回的任何值。如果没有触发任何处理程序，则返回未定义

在这一点上绝对可以更清楚。