聽取與香草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事件

回答

相關問題