Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> Javascript

जावास्क्रिप्ट एचटीएमएल डोम के साथ एक ही तत्व में कई इवेंट हैंडलर कैसे जोड़ें?


एक ही तत्व में एक से अधिक ईवेंट हैंडलर जोड़ने के लिए, addEventListener() का एक से अधिक बार उपयोग करें। प्रत्येक ईवेंट हैंडलर के लिए, आपको एक addEventListener() विधि जोड़ने की आवश्यकता है।

उदाहरण

एक से अधिक ईवेंट हैंडलर जोड़ने का तरीका जानने के लिए आप निम्न कोड चलाने का प्रयास कर सकते हैं -

<!DOCTYPE html>
<html>
   <body>
      <p>Click the below button once to get Date.</p>
      <p>Click the below button twice to get an alert box.</p>
      <button id="btnid"> Click me </button>
      <p id="pid"></p>
   
      <script>
         document.getElementById("btnid").addEventListener("click", displayEvent);
         var res = document.getElementById("btnid");
         res.addEventListener("dblclick", myFunction);
         function displayEvent() {
            document.getElementById("pid").innerHTML = Date();
         }
         function myFunction() {
            alert ("You clicked the button twice!");
         }
      </script>
   </body>
</html>

  1. जावास्क्रिप्ट में निर्दिष्ट तत्व में ईवेंट हैंडलर कैसे जोड़ें?

    जावास्क्रिप्ट addEventListener() प्रदान करता है एक ईवेंट हैंडलर को जोड़ने वाली विधि निर्दिष्ट तत्व के लिए। यह विधि किसी ईवेंट हैंडलर को मौजूदा ईवेंट हैंडलर को अधिलेखित किए बिना किसी तत्व से जोड़ देती है। एक समय में कई ईवेंट हैंडलर को एक तत्व में जोड़ना संभव है। addEventListener() विधि यह नियंत्रित

  1. कैसे जावास्क्रिप्ट के साथ एक तत्व के लिए एक वर्ग का नाम जोड़ने के लिए?

    जावास्क्रिप्ट वाले किसी तत्व में वर्ग नाम जोड़ने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    .newStyle {       font-family:

  1. जावास्क्रिप्ट के साथ वर्तमान तत्व में एक सक्रिय वर्ग कैसे जोड़ें?

    जावास्क्रिप्ट के साथ वर्तमान तत्व में एक सक्रिय वर्ग जोड़ने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    .btn {       border