জাভাস্ক্রিপ্ট অনক্লিকটিতে "এটি" কী?


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

thisলিপিটির অর্থ কী ?


4
@ জেএমসিএফ 125 তিনি যেভাবেই কার্যকর হতে পারেন। একটি অনক্লিক ইভেন্টে ক্লিক করা উপাদানটি কীভাবে পাওয়া যায় তার জন্য আমি গুগল করেছি এবং এখানেই শেষ হয়েছি, যেখানে আমি উত্তর পেয়েছি।
অ্যাকাউন্টে ফেলে দিন

জাভাস্ক্রিপ্ট কি করে? এটি কেন এমন হয় না <a onclick="func(this)" >here</a>
J3STER

1
@ J3STER "জাভাস্ক্রিপ্ট:" উপসর্গটি অনক্লিকটিতে ভুল। আপনি নীচে টিম ডাউন এর উত্তর খুঁজে পেতে পারেন ।
মারিয়ানো দেশানজে

উত্তর:


97

আপনি যে বিষয়ে জিজ্ঞাসা করছেন সে ক্ষেত্রে thisHTML ডম উপাদানটি উপস্থাপন করে represents

সুতরাং এটি <a>ক্লিক করা হয়েছিল যে উপাদান হতে হবে।



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

অনক্লিকের মতো ইভেন্ট হ্যান্ডলার বৈশিষ্ট্যের মানটি কোনও "জাভাস্ক্রিপ্ট:" উপসর্গ ছাড়াই কেবল জাভাস্ক্রিপ্ট হওয়া উচিত। জাভাস্ক্রিপ্ট: সিউডো-প্রোটোকল একটি ইউআরএলে ব্যবহৃত হয়, উদাহরণস্বরূপ:

<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উপাদান গোপন থাকবে না। এটি ডিওএমের অন্যান্য উপাদানের সাথে সাদৃশ্যযুক্ত হলেও এটি ক্লিক করা কেবলমাত্র উপাদানটি ফেরত দেয়।

উদাহরণস্বরূপ, আপনি thisনীচের এইচটিএমএলে একটি নম্বর ক্লিক করতে পারেন কেবল ক্লিক করা বুলেট পয়েন্টটি লুকিয়ে রাখবেন।

<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

keyword এই মধ্যে 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

thisonclickপদ্ধতিটি সম্পর্কিত অবজেক্টটিকে রেফার করে । সুতরাং ভিতরে উপাদান func thisDOM নোড aএবং this.innerTextহতে হবে here

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.