जावास्क्रिप्ट में इनलाइन इवेंट हैंडलर के तर्क के रूप में घटना को कैसे पारित करें?

Question

// this e works
document.getElementById("p").oncontextmenu = function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    console.log(target);
};

// this e is undefined
function doSomething(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    console.log(target);
}

<p id="p" onclick="doSomething(e)">
    <a href="#">foo</a>
    <span>bar</span>
</p>

कुछ ऐसे ही सवाल पूछे गए हैं।

लेकिन मेरे कोड में, मैं उन बाल तत्वों को प्राप्त करने की कोशिश कर रहा हूं, जिन्हें क्लिक किया गया है, जैसे aयाspan ।

तो eventईवेंट हैंडलर को तर्क के रूप में पारित करने का सही तरीका क्या है , या एक तर्क पारित किए बिना हैंडलर के अंदर घटना कैसे प्राप्त करें?

संपादित करें

की मुझे पता कर रहा हूँ addEventListenerऔर jQuery, करने के लिए घटना पारित करने के लिए एक समाधान प्रदान करें inlineघटना हाथ के बल्लेबाज।

Comments

developer.mozilla.org/en/docs/DOM/EventTarget.addEventListener

— पॉल एस

क्या AddEventListener पर स्विच करने के बजाय इनलाइन इवेंट हैंडलर का उपयोग करने का एक अच्छा कारण है? en.wikipedia.org/wiki/Unobtrusive_JavaScript

— Xotic750

@ Xotic750 मेरे लिए हाँ, उदाहरण के लिए अजाक्स के माध्यम से html को गतिशील रूप से लोड करने या पुनः लोड करने पर उन्हें मैन्युअल रूप से पुन: बाइंड करने की परवाह करने की आवश्यकता नहीं है।

— वाडीह एम।

Answer 1

eventवस्तु को पास करने के लिए :

<p id="p" onclick="doSomething(event)">

क्लिक किए गए बच्चे को पाने के लिए element( eventपैरामीटर के साथ उपयोग किया जाना चाहिए :

function doSomething(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    console.log(target);
}

elementखुद को पास करने के लिए (DOMElement):

<p id="p" onclick="doThing(this)">

jsFiddle पर लाइव उदाहरण देखें

Comments

(और किसी को भी आश्चर्य हो रहा है: हाँ, यह क्रोम, फ़ायरफ़ॉक्स, आदि पर काम करता है, भले ही कुछ [फ़ायरफ़ॉक्स, उदाहरण के लिए] एक वैश्विक eventवस्तु नहीं है । यह इसलिए है क्योंकि जिस संदर्भ में DOM0 हैंडलर कहा जाता है, वह eventऑब्जेक्ट है। , भले ही [कुछ ब्राउज़रों पर] यह वैश्विक नहीं है।)

— टीजे क्राउडर

thisको संदर्भित करता है p, लेकिन मैं पाने के लिए कोशिश कर रहा हूँ aयाspan

— user1643156

Ingevent´ पास करना एकमात्र तरीका है जो मुझे पता है, बशर्ते यह समर्थित हो। पार्सिंग arsthis´ का इस स्थिति में कोई फायदा नहीं है

— Xotic750

@ user1643156 यह बहुत महत्वपूर्ण है। पैरामीटर को बिल्कुल "घटना" के रूप में नामित किया जाना चाहिए

— द-नल-पॉइंटर-

वाडीह एम का जवाब इससे बेहतर है। यह एक भ्रामक (दूसरों के समान समान) है, जिससे लोगों का मानना ​​है कि "(घटना)" पैरामीटर को फ़ंक्शन कॉल में डाल दिया जाना चाहिए, जब, वास्तव में, जावास्क्रिप्ट में "इवेंट" पैरामीटर पहले से ही और आसानी से उपलब्ध फ़ंक्शन के अंदर उपलब्ध है, इसलिए इसे घोषित करने की आवश्यकता नहीं है (मुझे यह महसूस करने में दिन लग गए कि इससे चर नाम बदलने से कोई फर्क नहीं पड़ा, क्योंकि यह वास्तव में पारित नहीं हो रहा था)। इसके अलावा, वहां दिया गया स्पष्टीकरण इस बारे में किसी भी संदेह को खारिज करता है कि जेएस ऐसा क्यों काम करता है (शायद यह नहीं होना चाहिए, लेकिन यह मुझे न्याय करने के लिए नहीं है ...)

— साइबरनाइट

Answer 2

चूंकि इनलाइन घटनाओं को फ़ंक्शन के रूप में निष्पादित किया जाता है इसलिए आप केवल तर्कों का उपयोग कर सकते हैं ।

<p id="p" onclick="doSomething.apply(this, arguments)">

तथा

function doSomething(e) {
  if (!e) e = window.event;
  // 'e' is the event.
  // 'this' is the P element
}

स्वीकृत उत्तर में जिस The घटना ’का उल्लेख किया गया है, वह वास्तव में फ़ंक्शन को दिए गए तर्क का नाम है। इसका वैश्विक घटना से कोई लेना-देना नहीं है।

Comments

अच्छा सुझाव। जब लोग वेब घटकों को अपनाना शुरू करेंगे call()और apply()मुख्यधारा के जेएस चौखटे में उपलब्ध डेटा बाइंडिंग क्षमताओं का अनुकरण करने में आवश्यक साबित होंगे। एक अतिरिक्त चाल Object.assign(this.querySelector('my-btn'), this)वेब घटक और वॉइला, डेटा बाइंडिंग के अंदर कुछ समान करने के लिए है। आप इनलाइन घटनाओं से मूल वेब घटक वर्ग की किसी भी विधि तक पहुँच सकते हैं onclick="toggleBtnActive.call(this, true)"।

— एड्रियन मोइसा

Answer 3

आपको पास होने की आवश्यकता नहीं है this, पहले से ही eventडिफ़ॉल्ट रूप से पास की गई वस्तु है, जिसमें event.targetवह वस्तु है जिसमें से यह आ रहा है। आप अपना सिंटैक्स हल्का कर सकते हैं:

यह:

<p onclick="doSomething()">

इसके साथ काम करेंगे:

function doSomething(){
  console.log(event);
  console.log(event.target);
}

आपको eventऑब्जेक्ट को तुरंत करने की आवश्यकता नहीं है , यह पहले से ही है। कोशिश करके देखो। और event.targetइसमें उस संपूर्ण वस्तु को शामिल किया जाएगा, जिसे आप पहले "इस" के रूप में संदर्भित कर रहे थे।

अब यदि आप अपने कोड में कहीं से गतिशील रूप से doSomething () को ट्रिगर करते हैं, तो आप देखेंगे कि eventअपरिभाषित है। ऐसा इसलिए है क्योंकि इसे क्लिक करने की घटना से ट्रिगर नहीं किया गया था। तो अगर आप अभी भी इस घटना को कृत्रिम रूप से ट्रिगर करना चाहते हैं, तो बस उपयोग करें dispatchEvent:

document.getElementById('element').dispatchEvent(new CustomEvent("click", {'bubbles': true}));

फिर doSomething()देखेंगे eventऔर event.targetहमेशा की तरह!

thisहर जगह से गुजरने की आवश्यकता नहीं है, और आप अपने फ़ंक्शन हस्ताक्षर को वायरिंग जानकारी से मुक्त रख सकते हैं और चीजों को सरल बना सकते हैं।

Comments

कम से कम IE11 पर, यह सच नहीं है, कोई डिफ़ॉल्ट तर्क नहीं हैं।

— cskwg

@cskwg यह IE11 के लिए भी काम करता है। यह सभी प्रमुख ब्राउज़रों पर काम करता है क्योंकि यह बैकवर्ड संगतता के लिए आवश्यक है। जैसा कि मैंने उत्तर में उल्लेख किया है, केवल अगर जावास्क्रिप्ट फ़ंक्शन को किसी ईवेंट से निकाल दिया जाता है, जो कि एकमात्र ऐसा परिदृश्य है जहां कोई ईवेंट मौजूद है, तो पहले से ही "ईवेंट" नामक एक ऑब्जेक्ट होगा जिसे आप अपने फ़ंक्शन के बिना आसानी से एक्सेस कर सकते हैं। अपने फ़ंक्शन प्रोटोटाइप में अतिरिक्त वायरिंग पास करें। मैंने सिर्फ एक onclick इवेंट के लिए IE11 के साथ अपनी मशीन पर एक परीक्षण किया था और 'इवेंट' वेरिएबल में "PointerEvent ऑब्जेक्ट" था।

— वाडीह एम।