How can I attach events to newly generated elements without using jQuery?

Question

How can I attach events to newly generated elements without using jQuery?

If I want to dynamically add a form to my webpage (through AJAX or other JavaScript methods), how can I attach event listeners to these elements before they actually exist on the page?

When using jQuery, it's simple to bind the events to a parent element like this:

$(document).on('blur', 'input', function() {...})

However, I'm not sure how to achieve this with plain JavaScript, as addEventListener requires direct application to the element itself and doesn't allow specifying a parent element for event propagation. Am I correct in thinking this way?

javascript

Answer 1

Answer №1

My approach to delegation is straightforward. It involves binding events to the top parent element for efficiency and speed. When delegating an event, it's best to target a specific div to avoid conflicts. By comparing event.target with your desired target element, you can successfully trigger your callback function.

document.addEventListener('focus', function(event){

  if(event.target.tagName == 'INPUT'){
      onFocusApply(this, arguments);
  }

}, true);

function onFocusApply(event){
   
  // console.log(event); // event
  console.log(event.target.value);
  
}

<input type="text"/>
<input type="text"/>
<input type="number"/>

Answer 2

My approach to delegation is straightforward. It involves binding events to the top parent element for efficiency and speed. When delegating an event, it's best to target a specific div to avoid conflicts. By comparing event.target with your desired target element, you can successfully trigger your callback function.

document.addEventListener('focus', function(event){

  if(event.target.tagName == 'INPUT'){
      onFocusApply(this, arguments);
  }

}, true);

function onFocusApply(event){
   
  // console.log(event); // event
  console.log(event.target.value);
  
}

<input type="text"/>
<input type="text"/>
<input type="number"/>

Answer 3

Answer №2

If you're looking to add event listeners in vanilla JavaScript, it's actually quite simple. However, it's worth noting that focus/blur events behave a bit differently compared to most events. To ensure they work properly, you'll need to add a tabindex to your container element (for more details, check out this link).

document.querySelector(".container").addEventListener("blur", function(e){ 
   if(e.target.tagName == "input"){
      // do something
   }
}, false);

For a demonstration of this in action, take a look at this JSFiddle example (Note: remember to have your console open to see the output).

Answer 4

If you're looking to add event listeners in vanilla JavaScript, it's actually quite simple. However, it's worth noting that focus/blur events behave a bit differently compared to most events. To ensure they work properly, you'll need to add a tabindex to your container element (for more details, check out this link).

document.querySelector(".container").addEventListener("blur", function(e){ 
   if(e.target.tagName == "input"){
      // do something
   }
}, false);

For a demonstration of this in action, take a look at this JSFiddle example (Note: remember to have your console open to see the output).

Answer 5

Answer №3

const registerEvent = (event,elementId,callback) =>{
document.addEventListener(event,e=> {
      if (e.target !== e.currentTarget) {
      if(e.target.id==elementId){
      callback();
      }
      }
      e.stopPropagation();
  },false);
  }

Example usage:

registerEvent("click","myElement",function(){});

Answer 6

const registerEvent = (event,elementId,callback) =>{
document.addEventListener(event,e=> {
      if (e.target !== e.currentTarget) {
      if(e.target.id==elementId){
      callback();
      }
      }
      e.stopPropagation();
  },false);
  }

Example usage:

registerEvent("click","myElement",function(){});

How can I attach events to newly generated elements without using jQuery?

Answer №1

Answer №2

Answer №3

Similar questions

Updating a value in Expressjs variable is not working as expected

What is the best way to transfer the value of a radio button, retrieved from a database, to a textbox?

Is there a way to redirect the user to a different page without refreshing the page during navigation?

Capturing an error within an asynchronous callback function

Is there a glitch in JavaScript when comparing dates?

Storing Form Input in Browser's Local Memory

Refreshing a webpage following an AJAX call

Group By feature in AngularJS

Display input field in AngularJS when radio button is selected

Combining NodeJS with PHP: A Seamless Integration

Angular 1.5 component using HTTP GET

Creating a Drop-Down Button Using HTML, CSS, and JavaScript

What is the method for setting the doctype to HTML in JavaScript or React?

Looking for a method to incorporate an onclick function into a column for renderCell within the MUI Datagrid. Any suggestions?

execute action after a specific point in time in the video is reached

Add a fresh column in the table that includes modified values from an existing column, affected by a multiplication factor provided through a text input

What is the process of substituting types in typescript?

Encountering a CORS issue when utilizing Stripe with various servers while navigating with a Router

What is the best way to remove specific items from an AngularJS ng-repeat loop?

How to utilize the index in a foreach loop as a variable in JavaScript