jQuery
आयोजन
खोज…
टिप्पणियों
jQuery आंतरिक रूप से addEventListener फ़ंक्शन के माध्यम से घटनाओं को संभालता है। इसका मतलब यह है कि एक ही DOM तत्व के लिए एक ही इवेंट में एक से अधिक फंक्शन होना पूरी तरह से कानूनी है।
अटैच और डिटैच इवेंट हैंडलर्स
एक इवेंट हैंडलर संलग्न करें
चूंकि संस्करण 1.7 jQuery में इवेंट API .on() । इस तरह किसी भी मानक जावास्क्रिप्ट घटना या कस्टम घटना वर्तमान में चयनित jQuery तत्व पर बाध्य किया जा सकता है। ऐसे .click() रूप में शॉर्टकट हैं, लेकिन .on() आपको अधिक विकल्प प्रदान करता है।
एचटीएमएल
<button id="foo">bar</button>
jQuery
$( "#foo" ).on( "click", function() {
console.log( $( this ).text() ); //bar
});
एक इवेंट हैंडलर को अलग करें
स्वाभाविक रूप से आप अपने jQuery वस्तुओं से घटनाओं को अलग करने की संभावना है। आप .off( events [, selector ] [, handler ] ) का उपयोग करके ऐसा करते हैं।
एचटीएमएल
<button id="hello">hello</button>
jQuery
$('#hello').on('click', function(){
console.log('hello world!');
$(this).off();
});
बटन पर क्लिक करते समय $(this) वर्तमान jQuery ऑब्जेक्ट को संदर्भित करेगा और इससे सभी संलग्न इवेंट हैंडलर को हटा देगा। आप यह भी निर्दिष्ट कर सकते हैं कि किस इवेंट हैंडलर को हटा दिया जाना चाहिए।
jQuery
$('#hello').on('click', function(){
console.log('hello world!');
$(this).off('click');
});
$('#hello').on('mouseenter', function(){
console.log('you are about to click');
});
इस मामले में माउस क्लिक करने के बाद भी माउस mouseenter इवेंट काम करेगा।
प्रत्यायोजित घटनाएँ
उदाहरण से शुरू करते हैं। यहाँ एक बहुत ही सरल उदाहरण HTML है।
उदाहरण HTML
<html>
<head>
</head>
<body>
<ul>
<li>
<a href="some_url/">Link 1</a>
</li>
<li>
<a href="some_url/">Link 2</a>
</li>
<li>
<a href="some_url/">Link 3</a>
</li>
</ul>
</body>
</html>
समस्या
अब इस उदाहरण में, हम सभी <a> तत्वों के लिए एक इवेंट श्रोता जोड़ना चाहते हैं। समस्या यह है कि इस उदाहरण में सूची गतिशील है। समय बीतने के साथ <li> तत्व जोड़े और हटा दिए जाते हैं। हालांकि, पृष्ठ परिवर्तनों के बीच ताज़ा नहीं होता है, जो हमें लिंक ऑब्जेक्ट्स (यानी $('a').click() साधारण क्लिक ईवेंट श्रोताओं का उपयोग करने की अनुमति देगा $('a').click() ।
हमारे पास समस्या यह है कि आने वाले और जाने वाले <a> तत्वों में घटनाओं को कैसे जोड़ा जाए।
पृष्ठभूमि की जानकारी - घटना का प्रचार
प्रत्यायोजित ईवेंट केवल ईवेंट प्रचार (जिसे अक्सर ईवेंट बबलिंग कहा जाता है) के कारण संभव होता है। किसी भी समय एक घटना को निकाल दिया जाता है, यह सभी तरह से (दस्तावेज़ रूट पर) बुलबुला होगा। वे एक गैर-बदलते पूर्वज तत्व के लिए एक घटना से निपटने को सौंपते हैं , इसलिए नाम "प्रतिनिधि" घटनाओं।
इसलिए ऊपर दिए गए उदाहरण में, इस क्रम में इन तत्वों में <a> तत्व लिंक 'क्लिक' घटना को ट्रिगर करेगा:
- ए
- ली
- उल
- तन
- एचटीएमएल
- दस्तावेज़ जड़
समाधान
यह जानते हुए कि कौन सी घटना बुदबुदाती है, हम अपने HTML के माध्यम से प्रचारित होने वाली घटनाओं को पकड़ सकते हैं।
इस उदाहरण में इसे पकड़ने के लिए एक अच्छी जगह <ul> तत्व है, क्योंकि यह तत्व गतिशील नहीं है:
$('ul').on('click', 'a', function () {
console.log(this.href); // jQuery binds the event function to the targeted DOM element
// this way `this` refers to the anchor and not to the list
// Whatever you want to do when link is clicked
});
ऊपर में:
- हमारे पास 'उल' है जो इस ईवेंट श्रोता का प्राप्तकर्ता है
- पहला पैरामीटर ('क्लिक') परिभाषित करता है कि हम किन घटनाओं का पता लगाने की कोशिश कर रहे हैं।
- दूसरे पैरामीटर ('ए') को यह घोषित करने के लिए उपयोग किया जाता है कि इस घटना को श्रोता के प्राप्तकर्ता, उल के तहत सभी बाल तत्वों में से कहां से उत्पन्न करना है।
- अंत में, तीसरा पैरामीटर वह कोड होता है जो पहले और दूसरे पैरामीटर की आवश्यकताओं को पूरा करने पर चलाया जाता है।
कैसे समाधान काम करता है विस्तार से
- उपयोगकर्ता क्लिक
<a>तत्व - वह ट्रिगर
<a>तत्व पर ईवेंट पर क्लिक करता है। - घटना दस्तावेज़ रूट की ओर बुदबुदाती शुरू होती है।
- घटना पहले
<li>तत्व तक और फिर<ul>तत्व तक बुदबुदाती है। - ईवेंट श्रोता के रूप में चलाया जाता है
<ul>तत्व में ईवेंट श्रोता जुड़ा हुआ है। - इवेंट श्रोता पहले ट्रिगरिंग इवेंट का पता लगाता है। बुदबुदाती घटना 'क्लिक' है और श्रोता के पास 'क्लिक' है, यह एक पास है।
- श्रोता चेक बबल चेन में प्रत्येक आइटम के लिए दूसरे पैरामीटर ('ए') से मिलान करने की कोशिश करता है। जैसा कि श्रृंखला में अंतिम आइटम एक 'ए' है जो फिल्टर से मेल खाता है और यह एक पास भी है।
- तीसरे पैरामीटर में कोड मिलान किए गए आइटम का उपयोग करके चलाया जाता है क्योंकि यह
this। यदि फ़ंक्शन मेंstopPropagation()कॉलstopPropagation()कोstopPropagation()लिए कॉल शामिल नहीं है, तो घटना रूट (document) की ओर ऊपर की ओर फैलती रहेगी।
नोट: यदि उपयुक्त गैर-परिवर्तनशील पूर्वज उपलब्ध / सुविधाजनक नहीं है, तो आपको document उपयोग करना चाहिए। एक आदत के रूप में निम्नलिखित कारणों से 'body' उपयोग न करें:
-
bodyमें एक बग है, स्टाइल के साथ करने के लिए, इसका मतलब है कि माउस की घटनाएं उस पर बुलबुला नहीं कर सकती हैं। यह ब्राउज़र पर निर्भर है और यह तब हो सकता है जब गणना की गई शरीर की ऊंचाई 0 है (उदाहरण के लिए जब सभी बच्चे तत्वों की पूर्ण स्थिति होती है)। माउस की घटनाएँ हमेशाdocumentबबल करती हैं। -
documentहमेशा की तरह, अपनी स्क्रिप्ट के लिए मौजूद है तो आप को प्रत्यायोजित संचालकों संलग्न कर सकते हैंdocumentएक डोम के लिए तैयार हैंडलर के बाहर और कुछ हो वे अभी भी काम करेगा।
दस्तावेज़ लोड हो रहा है घटना। लोड ()
आप अपनी स्क्रिप्ट प्रतीक्षा करने के लिए जब तक एक निश्चित संसाधन जैसे कोई छवि या एक पीडीएफ आप उपयोग कर सकते हैं के रूप में, लोड किया गया था चाहते हैं .load() , जिसके लिए शॉर्टकट के लिए एक शॉर्टकट है .on( "load", handler) ।
एचटीएमएल
<img src="image.jpeg" alt="image" id="image">
jQuery
$( "#image" ).load(function() {
// run script
});
आईडी का उपयोग किए बिना तत्वों को दोहराने के लिए ईवेंट
मुसीबत
पृष्ठ में दोहराए जाने वाले तत्वों की एक श्रृंखला है जो आपको यह जानने की आवश्यकता है कि उस विशिष्ट उदाहरण के साथ कुछ करने के लिए एक घटना किस पर हुई।
समाधान
- सभी सामान्य तत्वों को एक सामान्य वर्ग दें
- ईवेंट श्रोता को कक्षा में लागू करें। ईवेंट हैंडलर के अंदर
thisमैचिंग सिलेक्टर एलिमेंट है - इसे शुरू करके उस उदाहरण के लिए बाहरी सबसे अधिक दोहराए जाने वाले कंटेनर को पार
this - उस कंटेनर के भीतर
find()उपयोग उस उदाहरण के लिए विशिष्ट अन्य तत्वों को अलग करने के लिए करें
एचटीएमएल
<div class="item-wrapper" data-item_id="346">
<div class="item"><span class="person">Fred</span></div>
<div class="item-toolbar">
<button class="delete">Delete</button>
</div>
</div>
<div class="item-wrapper" data-item_id="393">
<div clss="item"><span class="person">Wilma</span></div>
<div class="item-toolbar">
<button class="delete">Delete</button>
</div>
</div>
jQuery
$(function() {
$('.delete').on('click', function() {
// "this" is element event occured on
var $btn = $(this);
// traverse to wrapper container
var $itemWrap = $btn.closest('.item-wrapper');
// look within wrapper to get person for this button instance
var person = $itemWrap.find('.person').text();
// send delete to server and remove from page on success of ajax
$.post('url/string', { id: $itemWrap.data('item_id')}).done(function(response) {
$itemWrap.remove()
}).fail(function() {
alert('Ooops, not deleted at server');
});
});
});
originalEvent
कभी-कभी ऐसे गुण होंगे जो jQuery इवेंट में उपलब्ध नहीं हैं। अंतर्निहित गुणों तक पहुँचने के लिए Event.originalEvent उपयोग Event.originalEvent
स्क्रॉल दिशा प्राप्त करें
$(document).on("wheel",function(e){
console.log(e.originalEvent.deltaY)
// Returns a value between -100 and 100 depending on the direction you are scrolling
})
JQuery के माध्यम से विशिष्ट घटनाओं को चालू और बंद करना। (नामांकित श्रोता)
कभी-कभी आप पहले से पंजीकृत सभी श्रोताओं को बंद करना चाहते हैं।
//Adding a normal click handler
$(document).on("click",function(){
console.log("Document Clicked 1")
});
//Adding another click handler
$(document).on("click",function(){
console.log("Document Clicked 2")
});
//Removing all registered handlers.
$(document).off("click")
इस पद्धति के साथ एक समस्या यह है कि सभी श्रोताओं को अन्य प्लगइन्स आदि द्वारा document पर बांधा गया है, उन्हें भी हटा दिया जाएगा।
अधिक बार नहीं, हम केवल हमारे द्वारा संलग्न सभी श्रोताओं को अलग करना चाहते हैं।
इसे प्राप्त करने के लिए, हम नामित श्रोताओं को,
//Add named event listener.
$(document).on("click.mymodule",function(){
console.log("Document Clicked 1")
});
$(document).on("click.mymodule",function(){
console.log("Document Clicked 2")
});
//Remove named event listener.
$(document).off("click.mymodule");
यह सुनिश्चित करता है कि किसी भी अन्य क्लिक श्रोता को अनजाने में संशोधित नहीं किया गया है।