How to add onclick event in javascript dynamically for button, div, img,text after webpage is loaded

Lionsure 2020-06-07 Original by the website

Almost every HTML element has attributes such as onclick, onblur, onchange, etc., which are used to call events in javascript. In ordinary web design, if there are only one or two elements to add events, the method in javascript is usually written directly to these attributes; if there are many elements to call events, writing one by one seems more troublesome, after the web page is loaded, add them dynamically with code in javascript, which is more convenient.

In fact, using code in javascript to dynamically add events of elements, the code is relatively simple, it can be achieved by a few lines of code. The previous writing method often needs to be divided into W3C standard, ie and dom browsers. Now ie and mainstream browsers also follow the W3C standard. If you don't consider the old version of browser, only write the W3C standard.

 

1. Javascript add onclick event to div

Html code:

<div>After the web page is loaded, javascript add onclick event to div</div>
       <div>No matter how many divs there are in the web page, you can dynamically add click events</div>

 

Javascript code:

<script type="text/javascript">
       function AddOnclickOnload() {
              var divArr = document.getElementsByTagName("div");
              for (var i = 0; i < divArr.length; i++) {
              AddEvent(divArr[i], "click", hideDiv);
              }
       }

function hideDiv() {
       }
       function AddEvent(obj, eventType, functionName) {
              if(obj.addEventListener){
                     obj.addEventListener(eventType, functionName, false);//W3C standard
              }
              else if(obj.attachEvent){
                     obj.attachEvent("on" + eventType, functionName);//ie
              }
              else {
                     obj["on" + eventType] = functionName;//dom
              }
       }
       AddOnclickOnload();//Directly call
       </script>

The above code dynamically adds onclick events to all divs on the page, just call the AddOnclickOnload() method in the window.onload event, or just call it directly.

It is worth noting that when adding a method dynamically, do not add quotation marks to the method name, such as AddEvent(divArr[i], "click", hideDiv), hideDiv does not have quotation marks, if you add quotation marks, it will be wrong, and click the button, it will not respond.

 

 

2. Javascript add onmouseover event to img

Html code:

<img src="/images/test1.jpg" alt="After the web page is loaded, javascript add onmouseover event to img" />
       <img src="/images/test2.jpg" alt="After the webpage is loaded, add onmouseover events to all images dynamically" />

 

Javascript code:

function AddOnmouseoverForImgs() {
              var imgArr = document.getElementsByTagName("img");
              for (var i = 0; i < imgArr.length; i++) {
                     AddEvent(imgArr[i], "mouseover", ScaleImg);
              }
       }

function ScaleImg() {
       }
       AddOnmouseoverForImgs();

 

 

3. After the web page is loaded, javascript add onblur event to text box dynamically

Html code:

<input type="text" name="nameId" maxlength="30" />
       <input type="text" name="Address" maxlength="100" />

 

Javascript code:

function AddOnblurForText() {
              var textArr = document.getElementsByTagName("input");
              for (var i = 0; i < textArr.length; i++) {
                     if (textArr[i].type == "text") {
                            AddEvent(textArr[i], "blur", CheckText);
                     }
              }
       }

function CheckText() {
       }
       AddOnblurForText();

 

 

4. How to add onclick event in javascript dynamically for button

Html code:

<input type="button" id="btnId" value=" Submit " />

 

Javascript code:

function AddOnclickForButton() {
              var obj = document.getElementById("btnId");
              AddEvent(obj, "click", submited);
       }
       function submited() {
       }
       AddOnclickForButton();

The above code is just to add an onclick event for a button dynamically. If you want to add multiple buttons dynamically, you can get all the buttons in a webpage or an element like the above method, and then add onclick events in a loop for them.