जावास्क्रिप्ट में गतिशील तत्वों के लिए घटना संलग्न करें

Question 1

मैं गतिशील रूप से बनाई गई सूची में HTML डेटा को गतिशील रूप से सम्मिलित करने की कोशिश कर रहा हूं, लेकिन जब मैं बटन के लिए एक ऑनक्लिक ईवेंट को संलग्न करने का प्रयास करता हूं जो गतिशील रूप से बनाया गया है घटना फायरिंग नहीं है। समाधान वास्तव में सराहना की जाएगी।

जावास्क्रिप्ट कोड:

document.addEventListener('DOMContentLoaded', function () {
document.getElementById('btnSubmit').addEventListener('click', function () {
    var name = document.getElementById('txtName').value;
    var mobile = document.getElementById('txtMobile').value;
    var html = '<ul>';
    for (i = 0; i < 5; i++) {
        html = html + '<li>' + name + i + '</li>';
    }
    html = html + '</ul>';

    html = html + '<input type="button" value="prepend" id="btnPrepend" />';
    document.getElementsByTagName('form')[0].insertAdjacentHTML('afterend', html);
});

document.getElementById('btnPrepend').addEventListener('click', function () {
    var html = '<li>Prepending data</li>';
    document.getElementsByTagName('ul')[0].insertAdjacentHTML('afterbegin', html);
});

});

HTML कोड:

<form>
    <div class="control">
        <label>Name</label>
        <input id="txtName" name="txtName" type="text" />
    </div>
    <div class="control">
        <label>Mobile</label>
        <input id="txtMobile" type="text" />
    </div>
    <div class="control">
        <input id="btnSubmit" type="button" value="submit" />
    </div>
</form>

Question 2

यह इस तथ्य के कारण है कि आपका तत्व गतिशील रूप से बनाया गया है। इवेंट को संभालने के लिए आपको इवेंट डेलिगेशन का उपयोग करना चाहिए ।

 document.addEventListener('click',function(e){
    if(e.target && e.target.id== 'brnPrepend'){
          //do something
     }
 });

jquery इसे आसान बनाती है:

 $(document).on('click','#btnPrepend',function(){//do something})

यहाँ घटना प्रतिनिधि सम्मेलन प्रतिनिधिमंडल लेख के बारे में एक लेख है

Question 3

क्लिक को कैप्चर करने document.bodyऔर फिर ईवेंट टारगेट चेक करने से वर्कअराउंड होता है ।

document.body.addEventListener( 'click', function ( event ) {
  if( event.srcElement.id == 'btnSubmit' ) {
    someFunc();
  };
} );

Question 4

आप तत्वों को सम्मिलित करने के बाद घटना को संलग्न करना चाहते हैं, जैसे कि आप अपने पर एक वैश्विक कार्यक्रम सम्मिलित नहीं करते हैं, documentलेकिन सम्मिलित तत्वों पर एक विशिष्ट घटना।

जैसे

document.getElementById('form').addEventListener('submit', function(e) {
  e.preventDefault();
  var name = document.getElementById('txtName').value;
  var idElement = 'btnPrepend';
  var html = `
    <ul>
      <li>${name}</li>
    </ul>
    <input type="button" value="prepend" id="${idElement}" />
  `;
  /* Insert the html into your DOM */
  insertHTML('form', html);
  /* Add an event listener after insert html */
  addEvent(idElement);
});

const insertHTML = (tag = 'form', html, position = 'afterend', index = 0) => {
  document.getElementsByTagName(tag)[index].insertAdjacentHTML(position, html);
}
const addEvent = (id, event = 'click') => {
  document.getElementById(id).addEventListener(event, function() {
    insertHTML('ul', '<li>Prepending data</li>', 'afterbegin')
  });
}

<form id="form">
  <div>
    <label for="txtName">Name</label>
    <input id="txtName" name="txtName" type="text" />
  </div>
  <input type="submit" value="submit" />
</form>

स्निपेट का विस्तार करें

Question 5

अंतर यह है कि आप डोम में तत्वों को कैसे बनाते हैं और जोड़ते हैं।

यदि आप एक तत्व बनाते हैं document.createElement, तो एक ईवेंट श्रोता जोड़ें, और इसे DOM पर जोड़ें। आपके आयोजनों में आग लगेगी।

यदि आप इस तरह एक स्ट्रिंग के रूप में एक तत्व बनाते हैं: html + = "<li> परीक्षण </ li>" `, elment तकनीकी रूप से सिर्फ एक स्ट्रिंग है। स्ट्रिंग्स में इवेंट श्रोता नहीं हो सकते।

एक समाधान प्रत्येक तत्व के साथ बनाना है document.createElementऔर फिर उन लोगों को सीधे DOM तत्व में जोड़ना है।

// Sample
let li = document.createElement('li')
document.querySelector('ul').appendChild(li)

Question 6

आप ऐसा ही कुछ कर सकते हैं:

// Get the parent to attatch the element into
var parent = document.getElementsByTagName("ul")[0];

// Create element with random id
var element = document.createElement("li");
element.id = "li-"+Math.floor(Math.random()*9999);

// Add event listener
element.addEventListener("click", EVENT_FN);

// Add to parent
parent.appendChild(element);

Question 7

var __ = function(){
    this.context  = [];
    var self = this;
    this.selector = function( _elem, _sel ){
        return _elem.querySelectorAll( _sel );
    }
          this.on = function( _event, _element, _function ){
              this.context = self.selector( document, _element );
              document.addEventListener( _event, function(e){
                  var elem = e.target;
                  while ( elem != null ) {
                      if( "#"+elem.id == _element || self.isClass( elem, _element ) || self.elemEqal( elem ) ){
                          _function( e, elem );
                      }
                      elem = elem.parentElement;
                  }
              }, false );
     };

     this.isClass = function( _elem, _class ){
        var names = _elem.className.trim().split(" ");
        for( this.it = 0; this.it < names.length; this.it++ ){
            names[this.it] = "."+names[this.it];
        }
        return names.indexOf( _class ) != -1 ? true : false;
    };

    this.elemEqal = function( _elem ){
        var flg = false;
        for( this.it = 0; this.it < this.context.length;  this.it++ ){
            if( this.context[this.it] === _elem && !flg ){
                flg = true;
            }
        }
        return flg;
    };

}

    function _( _sel_string ){
        var new_selc = new __( _sel_string );
        return new_selc;
    }

अब आप इस तरह की घटना दर्ज कर सकते हैं,

_( document ).on( "click", "#brnPrepend", function( _event, _element ){
      console.log( _event );
      console.log( _element );
      // Todo

  });

ब्राउज़र का समर्थन

क्रोम - 4.0, एज - 9.0, फ़ायरफ़ॉक्स - 3.5 सफारी - 3.2, ओपेरा - 10.0 और इसके बाद के संस्करण

Question 8

मैंने इसके साथ मदद करने के लिए एक छोटी सी लाइब्रेरी बनाई है: गिटहब पर लाइब्रेरी सोर्स

<script src="dynamicListener.min.js"></script>
<script>
// Any `li` or element with class `.myClass` will trigger the callback, 
// even elements created dynamically after the event listener was created.
addDynamicEventListener(document.body, 'click', '.myClass, li', function (e) {
    console.log('Clicked', e.target.innerText);
});
</script>

कार्यक्षमता jQuery.on () के समान है।

पुस्तकालय दिए गए चयनकर्ता के खिलाफ लक्ष्य तत्व का परीक्षण करने के लिए Element.matches () विधि का उपयोग करता है । जब किसी ईवेंट को ट्रिगर किया जाता है तो कॉलबैक केवल तभी कहा जाता है जब लक्ष्य तत्व दिए गए चयनकर्ता से मेल खाता है।

Question 9

मुझे पता है कि विषय बहुत पुराना है, लेकिन मैंने खुद को एक बहुत ही उपयोगी कोड बनाने के लिए कुछ मिनट दिए जो ठीक काम करता है और शुद्ध का उपयोग करना बहुत आसान है JAVASCRIPT। यहाँ एक सरल उदाहरण के साथ कोड है:

String.prototype.addEventListener=function(eventHandler, functionToDo){
  let selector=this;
  document.body.addEventListener(eventHandler, function(e){
    e=(e||window.event);
    e.preventDefault();
    const path=e.path;
    path.forEach(function(elem){
      const selectorsArray=document.querySelectorAll(selector);
      selectorsArray.forEach(function(slt){
        if(slt==elem){
          if(typeof functionToDo=="function") functionToDo(el=slt, e=e);
        }
      });
    });
  });
}

// And here is how we can use it actually !

"input[type='number']".addEventListener("click", function(element, e){
	console.log( e ); // Console log the value of the current number input
});

<input type="number" value="25">
<br>
<input type="number" value="15">
<br><br>
<button onclick="addDynamicInput()">Add a Dynamic Input</button>
<script type="text/javascript">
  function addDynamicInput(){
    const inpt=document.createElement("input");
          inpt.type="number";
          inpt.value=Math.floor(Math.random()*30+1);
    document.body.prepend(inpt);
  }
</script>

स्निपेट का विस्तार करें

Question 10

मैंने इसके लिए एक सरल कार्य किया है।

_caseसमारोह आप न केवल लक्ष्य प्राप्त करने के लिए, लेकिन यह भी माता पिता तत्व जहां पर घटना बाँध मिल अनुमति देता है।

कॉलबैक फ़ंक्शन ईवेंट लौटाता है जो लक्ष्य ( evt.target) और चयनकर्ता से मेल खाने वाले मूल तत्व ( ) रखता है this। यहां आप तत्व पर क्लिक करने के बाद अपनी जरूरत का सामान कर सकते हैं।

मैंने अभी तक तय नहीं किया है कि कौन सा बेहतर है, if-elseयाswitch

var _case = function(evt, selector, cb) {
  var _this = evt.target.closest(selector);
  if (_this && _this.nodeType) {
    cb.call(_this, evt);
    return true;
  } else { return false; }
}

document.getElementById('ifelse').addEventListener('click', function(evt) {
  if (_case(evt, '.parent1', function(evt) {
      console.log('1: ', this, evt.target);
    })) return false;

  if (_case(evt, '.parent2', function(evt) {
      console.log('2: ', this, evt.target);
    })) return false;

  console.log('ifelse: ', this);
})


document.getElementById('switch').addEventListener('click', function(evt) {
  switch (true) {
    case _case(evt, '.parent3', function(evt) {
      console.log('3: ', this, evt.target);
    }): break;
    case _case(evt, '.parent4', function(evt) {
      console.log('4: ', this, evt.target);
    }): break;
    default:
      console.log('switch: ', this);
      break;
  }
})

#ifelse {
  background: red;
  height: 100px;
}
#switch {
  background: yellow;
  height: 100px;
}

<div id="ifelse">
  <div class="parent1">
    <div class="child1">Click me 1!</div>
  </div>
  <div class="parent2">
    <div class="child2">Click me 2!</div>
  </div>
</div>

<div id="switch">
  <div class="parent3">
    <div class="child3">Click me 3!</div>
  </div>
  <div class="parent4">
    <div class="child4">Click me 4!</div>
  </div>
</div>

स्निपेट का विस्तार करें

आशा है कि इससे सहायता मिलेगी!

Question 11

मैंने जिल्केट कृतियों द्वारा पोस्ट किया गया समाधान ढूंढ लिया है, लेकिन केवल अगर लक्ष्य तत्व सबसे अधिक नेस्टेड है। यदि यह मामला नहीं है, तो यह माता-पिता पर पुनरावृत्ति करके सुधारा जा सकता है, अर्थात

function on_window_click(event)
{
    let e = event.target;

    while (e !== null)
    {
        // --- Handle clicks here, e.g. ---
        if (e.getAttribute(`data-say_hello`))
        {
            console.log("Hello, world!");
        }

        e = e.parentElement;
    }
}

window.addEventListener("click", on_window_click);

यह भी ध्यान दें कि हम किसी भी विशेषता से घटनाओं को संभाल सकते हैं, या किसी भी स्तर पर हमारे श्रोता को संलग्न कर सकते हैं। ऊपर दिया गया कोड कस्टम विशेषता का उपयोग करता है और window। मुझे संदेह है कि विभिन्न तरीकों के बीच कोई व्यावहारिक अंतर है।