जावास्क्रिप्ट में "यह" क्या है?


115
<a onclick="javascript:func(this)" >here</a>

thisस्क्रिप्ट में क्या मतलब है?


4
@ JMCF125 वह वैसे भी उपयोगी साबित हुआ। मैं एक onclick इवेंट में क्लिक किए गए तत्व को कैसे प्राप्त करूं, इसके लिए Googled, और यहां समाप्त हुआ, जहां मुझे उत्तर मिला।
थ्रू अवे अकाउंट

जावास्क्रिप्ट क्या है: क्या करता है? क्यों यह इस तरह से नहीं है <a onclick="func(this)" >here</a>
J3STER

1
@ J3STER "जावास्क्रिप्ट:" उपसर्ग onclick में गलत है। आप नीचे टिम के जवाब में स्पष्टीकरण पा सकते हैं ।
मैरियानो डेसांज़

जवाबों:


97

जिस मामले के बारे में आप पूछ रहे हैं, thisवह HTML DOM तत्व का प्रतिनिधित्व करता है।

तो यह वह <a>तत्व होगा जिस पर क्लिक किया गया था।


5
क्या कोई कल्पना से जुड़ सकता है? W3.org/TR/DOM-Level-3-Events पर भोली- भाली फलीहीनता थी।
सिरो सेंटिल्ली 郝海东 i iro i 法轮功 '

34

यह DOM में उस तत्व को संदर्भित करता है जिससे onclickविशेषता संबंधित है:

<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
function func(e) {
  $(e).text('there');
}
</script>
<a onclick="func(this)">here</a>

(यह उदाहरण jQuery का उपयोग करता है ।)


22

इवेंट हैंडलर विशेषताओं का मूल्य जैसे कि ऑनक्लिक केवल जावास्क्रिप्ट होना चाहिए, बिना किसी "जावास्क्रिप्ट:" उपसर्ग के। जावास्क्रिप्ट: छद्म-प्रोटोकॉल का उपयोग URL में किया जाता है, उदाहरण के लिए:

<a href="javascript:func(this)">here</a>

onclick="func(this)"हालाँकि आपको इसे प्राथमिकता के रूप में उपयोग करना चाहिए । यह भी ध्यान दें कि मेरे उदाहरण में जावास्क्रिप्ट का उपयोग करके ऊपर: छद्म-प्रोटोकॉल "यह" <a>तत्व के बजाय विंडो ऑब्जेक्ट को संदर्भित करेगा ।


1
दिलचस्प गिरावट, हालांकि मुझे लगता है कि इस जवाब को सख्ती से बोलना केवल सवाल का जवाब देने के बजाय सवाल के आसपास सलाह देता है।
टिम डाउन

हाँ ... आपने वास्तव में इस सवाल का जवाब नहीं दिया: - / व्यक्तिगत कुछ भी नहीं!
डेव

1
@ क्या: काफी साफ है। जब तक मैंने यह लिखा था तब तक मुख्य सवाल पहले ही उत्तर दे दिया गया था। मेरा जवाब शायद एक टिप्पणी होना चाहिए था, लेकिन मुझे संदेह है कि उस समय टिप्पणी जोड़ने के लिए मेरे पास पर्याप्त प्रतिनिधि नहीं हो सकता था। जियो और सीखो।
टिम डाउन

8
समय पर पर्याप्त नहीं है? अपनी शराब बाहर निकालता है
योनातन

5

जावास्क्रिप्ट thisमें एक्शन वाले तत्व को संदर्भित करता है। उदाहरण के लिए, यदि आपके पास कोई फ़ंक्शन है hide():

function hide(element){
   element.style.display = 'none';
}

hideसाथ बुलाने thisसे तत्व छिप जाएगा। यह केवल क्लिक किए गए तत्व को लौटाता है, भले ही यह DOM के अन्य तत्वों के समान हो।

उदाहरण के लिए, आपके पास thisHTML में एक संख्या पर क्लिक हो सकता है नीचे क्लिक की गई बुलेट बिंदु को केवल छिपाया जाएगा।

<ul>
  <li class="bullet" onclick="hide(this);">1</li>
  <li class="bullet" onclick="hide(this);">2</li>
  <li class="bullet" onclick="hide(this);">3</li>
  <li class="bullet" onclick="hide(this);">4</li>
</ul>

4

यहां (यह) एक ऐसी वस्तु है जिसमें डोम तत्व की सभी विशेषताएं / गुण शामिल हैं। आप देख सकते हैं

console.log(this);

यह पदानुक्रम के साथ डोम तत्व के सभी गुण गुण प्रदर्शित करेगा। आप इसके द्वारा डोम तत्व में हेरफेर कर सकते हैं।

नीचे दिए गए लिंक पर भी वर्णन करें: -

http://www.quirksmode.org/js/this.html


3

addEventListener ईवेंट में इसे कीवर्ड करें

function getValue(o) {
  alert(o.innerHTML);
}

function hide(current) {
  current.setAttribute("style", "display: none");
}

var bullet = document.querySelectorAll(".bullet");

for (var x in bullet) { 
  bullet[x].onclick = function() {
    hide(this);
  };
};
 
/* Using dynamic DOM Event */
document.querySelector("#li").addEventListener("click", function() {
  getValue(this); /* this = document.querySelector("#li") Object */
});
li {
  cursor: pointer;
}
<ul>
  <li onclick="getValue(this);">A</li>
  <li id="li" >B</li>
  <hr />
  <li class="bullet" >1</li>
  <li class="bullet" >2</li>
  <li class="bullet" >3</li>
  <li class="bullet" >4</li>
</ul>


2

किसी फ़ंक्शन को कॉल करते समय, "यह" शब्द उस ऑब्जेक्ट का संदर्भ है जिसे फ़ंक्शन कहा जाता है।

आपके उदाहरण में, यह एंकर तत्व का संदर्भ है। दूसरे छोर पर, फ़ंक्शन कॉल तब पारित किए गए पैरामीटर के माध्यम से तत्व के सदस्य चर का उपयोग करता है।


1

thisऑब्जेक्ट जिस onclickविधि का है, उसका संदर्भ देता है। तो अंदर तत्व func thisका DOM नोड होगा aऔर this.innerTextहोगा here

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.