मैं हाल ही में घटनाओं के साथ काम कर रहा था और एक पृष्ठ में सभी घटनाओं को देखना / नियंत्रित करना चाहता था। संभावित समाधानों को देखने के बाद, मैंने अपने तरीके से जाने और घटनाओं की निगरानी के लिए एक कस्टम सिस्टम बनाने का निर्णय लिया है। तो, मैंने तीन काम किए।
सबसे पहले, मुझे पृष्ठ के सभी ईवेंट श्रोताओं के लिए एक कंटेनर की आवश्यकता थी: वह EventListenersवस्तु है। यह तीन उपयोगी तरीकों है: add(), remove(), और get()।
इसके बाद, मैं एक बनाया EventListenerवस्तु घटना के लिए आवश्यक जानकारी धारण करने के लिए, अर्थात्: target, type, callback, options, useCapture,wantsUntrusted , और एक विधि जोड़ा remove()श्रोता दूर करने के लिए।
अंत में, मैंने देशी addEventListener()और removeEventListener()विधियों को उनके द्वारा बनाई गई वस्तुओं के साथ काम करने के लिए बढ़ाया ( EventListenerऔरEventListeners ) के ।
उपयोग:
var bodyClickEvent = document.body.addEventListener("click", function () {
console.log("body click");
});
// bodyClickEvent.remove();
addEventListener()एक EventListenerऑब्जेक्ट बनाता है , इसे ऑब्जेक्ट में जोड़ता है EventListenersऔर EventListenerऑब्जेक्ट को लौटाता है , इसलिए इसे बाद में हटाया जा सकता है।
EventListeners.get()पृष्ठ में श्रोताओं को देखने के लिए इस्तेमाल किया जा सकता है। यह एक EventTargetया एक स्ट्रिंग (घटना प्रकार) को स्वीकार करता है ।
// EventListeners.get(document.body);
// EventListeners.get("click");
डेमो
मान लें कि हम इस वर्तमान पृष्ठ के प्रत्येक ईवेंट श्रोता को जानना चाहते हैं। हम ऐसा कर सकते हैं (यह मानते हुए कि आप इस मामले में स्क्रिप्ट प्रबंधक एक्सटेंशन, टेम्परमॉन्की का उपयोग कर रहे हैं)। निम्नलिखित स्क्रिप्ट ऐसा करती है:
// ==UserScript==
// @name New Userscript
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @include https://stackoverflow.com/*
// @grant none
// ==/UserScript==
(function() {
fetch("https://raw.githubusercontent.com/akinuri/js-lib/master/EventListener.js")
.then(function (response) {
return response.text();
})
.then(function (text) {
eval(text);
window.EventListeners = EventListeners;
});
})(window);
और जब हम सभी श्रोताओं को सूचीबद्ध करते हैं, तो यह कहता है कि 299 घटना श्रोता हैं। कुछ डुप्लिकेट होने के लिए "लगता है", लेकिन मुझे नहीं पता कि क्या वे वास्तव में डुप्लिकेट हैं। प्रत्येक ईवेंट प्रकार को डुप्लिकेट नहीं किया जाता है, इसलिए वे सभी "डुप्लिकेट" एक व्यक्तिगत श्रोता हो सकते हैं।
कोड मेरे भंडार पर पाया जा सकता है। मैं इसे यहाँ पोस्ट नहीं करना चाहता था क्योंकि यह बहुत लंबा है।
अद्यतन: यह jQuery के साथ काम नहीं करता है। जब मैं EventListener की जाँच करता हूँ, तो देखता हूँ कि कॉलबैक है
function(b){return"undefined"!=typeof r&&r.event.triggered!==b.type?r.event.dispatch.apply(a,arguments):void 0}
मेरा मानना है कि यह jQuery से संबंधित है, और वास्तविक कॉलबैक नहीं है। jQuery के EventTarget के गुणों में वास्तविक कॉलबैक संग्रहीत करता है:
$(document.body).click(function () {
console.log("jquery click");
});
किसी ईवेंट श्रोता को निकालने के लिए, वास्तविक कॉलबैक removeEventListener()विधि को पास करना होगा । तो इस काम को jQuery के साथ करने के लिए, इसे और अधिक संशोधन की आवश्यकता है। मैं भविष्य में इसे ठीक कर सकता हूं।
