2015-04-27 12 views
12

बिना मैंट्रिगर कस्टम घटना jQuery

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>stackoverflow</title> 
 
    <script src="http://ajax.googleapis.com:80/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <script> 
 
    $(document).ready(function() { 
 
     $(document).on('hey', function(customEvent, originalEvent, data) { 
 
     console.log(customEvent.type + ' ' + data.user); // hey stackoverflow 
 

 
     }); 
 

 
     // how to this in vanilla js 
 
     $(document).triggerHandler('hey', [{}, { 
 
     'user': 'stackoverflow' 
 
     }]) 
 
    }); 
 
    </script> 
 
</body> 
 

 
</html>

मैं यह कैसे ट्रिगर कर सकते हैं jQuery triggerHandler() के साथ कुछ डोम घटनाक्रम jQuery के बिना ट्रिगर कर रहा हूँ?

महत्वपूर्ण: मुझे पता है कि घटना के प्रकार और कस्टम डेटा

+1

कुछ ऐसा दिखाई देगा कवर jQuery document.addEventListener का उपयोग किया जाएगा के तहत ('हे', समारोह() {...}); जहां हे क्लिक है, mousedown आदि क्या आप इसका मतलब है? – garryp

+0

jQuery स्रोत को पढ़ना आपको दिखाएगा कि यह कैसे किया गया है, क्योंकि jQuery जावास्क्रिप्ट है। –

+0

जहां तक ​​मुझे याद है, jquery ट्रिगर हैडलर के लिए 'डिस्पैचएवेंट' और '.fireEvent' को जोड़ती है। आप एक या दूसरे को आजमाने के लिए आसानी से एक फ़ंक्शन लिख सकते हैं। प्रेषण कार्यक्रम अधिकांश ब्राउज़रों पर काम करेगा। – David

उत्तर

10

यदि आप सटीक jQuery के व्यवहार की प्रतिकृति चाहते हैं, तो शायद आप jQuery source code के माध्यम से खोदने से सबसे अच्छे हैं।

यदि आप सामान्य ईवेंट प्रेषण और सुनना चाहते हैं, तो CustomEvent देखें कि कस्टम डेटा के साथ एक ईवेंट कैसे प्रेषित करें और addEventListener इसे कैसे सुनें।

आपका उदाहरण शायद की तरह

document.addEventListener('hey', function(customEvent) 
{ 
    console.log(customEvent.type + ' ' + customEvent.detail.user); // hey stackoverflow 
}); 
document.dispatchEvent(new CustomEvent('hey', {'detail': {'user': 'stackoverflow'}})); 
+2

'CustomEvent' कन्स्ट्रक्टर का आईई में कोई समर्थन नहीं है। – Johnston

+2

@ जॉनस्टन लेकिन ऐसा लगता है कि इसके लिए [पॉलीफिल] है (https://github.com/krambuhl/custom-event-polyfill/blob/master/custom-event-polyfill.js)। – Siguza

+0

हाँ और यह बहुत अच्छा काम करता है – Johnston

1

आप Custom Events का उपयोग करें और अपने इच्छित अवयव पर उन्हें प्रेषण कर सकते हैं की जरूरत है।

संबंधित मुद्दे