听取与香草JS jQuery事件

所以我想确定它是否有可能听使用香草JS jQuery添加事件。我发现这个问题：听取与香草JS jQuery事件

这肯定回答它的jQuery的版本1。然而，版本3呢？

我有一个小提琴，我放在一起测试出来，但我无法获得第一次提交与任何版本的jQuery一起工作。我错过了什么，或者是jQuery 3中的事件模型仍然没有使用DOM事件模型？

这里是小提琴代码：

HTML：

<div id="div1"> 
<p> 
This is div1. My event was added via jQuery and is listened for by vanilla JS. 
</p> 
<p> 
    Enter the number 2 to have the event fired. 
</p> 
<input type="text" id="input1" /> 
<button id="button1"> 
Submit 
</button> 
</div> 
<div id="div2"> 
    <p> 
    This is div2. My event was added via vanilla JS and is listened for by jQuery. 
    </p> 
    <p> 
    Enter the number 2 to have the event fired. 
    </p> 
    <input type="text" id="input2" /> 
    <button id="button2"> 
    Submit 
    </button> 
</div>

的JavaScript：

var $input1 = $("#input1"); 
var $input2 = $("#input2"); 
var input1 = document.getElementById("input1"); 
var input2 = document.getElementById("input2"); 

var event1 = "civicscienceEvent1"; 
var event2 = "civicscienceEvent2"; 

$("#button1").click(function() { 
    if (+$input1.val() == 2) { 
    $input1.trigger(event1, {message: "Event 1 triggered!"}); 
    } 
}); 

input1.addEventListener(event1, function(e) { 
    console.log("Event 1 triggered! message=" + e.detail.message); 
}); 

$("#button2").click(function() { 
    if (+$input2.val() == 2) { 
    var event = new CustomEvent(event2, {detail: {message: "Event 2 triggered!"}}); 
    input2.dispatchEvent(event); 
    } 
}); 

$input2.on(event2, function(e) { 
    console.log("Event 2 fired, but I don't know how to get the message!"); 
});

来源

2016-12-01 thatidiotguy

对于“是否有可能”的部分，我敢说是的。 jQuery不是一个二进制组件或任何深奥的东西，它只是一堆Vanilla JavaScript代码。 ;-) –

@ÁlvaroGonzález你究竟提出了什么？ vanilla JS如何访问私有的jQuery事件结构？你提议我修改核心库吗？ – thatidiotguy

我没有提出任何建议（请注意这是一个评论，然后是笑脸，而不是回答）。对不起，如果我建议不然。 –

简短的回答是，这是不可能的，因为jQuery提供香草JS上的事件层。这意味着，香草JS无法与添加的图层进行交谈。

所以总之，jQuery可以捕捉到香草JS事件，但香草JS无法捕捉jQuery添加的事件。

来源

2017-01-18 19:29:40 thatidiotguy

听取与香草JS jQuery事件

回答

相关问题