Example shows javascript registering event handlers

  • 2020-11-25 07:09:08
  • OfStack

Events are at the heart of javascript, and their importance will not be covered here. After the event is triggered, an event handler is required to handle it. For example, we can define how to set the background of div to green after clicking a button, so let's see how to achieve this effect first. The code example is as follows:


<html> 
<head> 
<meta charset=" utf-8"> 
<title>javascript How do I register event handlers </title>
<style type="text/css">
#mydiv{
 width:100px;
 height:100px;
 background-color:red;
}
</style>
<script type="text/javascript"> 
function changebg(){
 var mydiv=document.getElementById("mydiv");
 mydiv.style.backgroundColor="green";
}
</script>
</head>
<body>
 <div id="mydiv"></div>
 <button id="bt"> Click to see what it looks like </button> 
</body>
</html>

In the above code, clicking the button sets the background color of div to green because the code registers the event handler function for the button's onclick event, which sets the background color of div to green. The following is a brief introduction to how to register an event handler for an object event with an example:
Method 1:
Register the event handler directly in the HTML code, that is, set the event handler directly through the HTML property. The code to be executed by the event handler is the value of the HTML property, as used at the beginning of this article. Advantages and disadvantages are as follows:

1. Easy to understand and simple to use.
2. Every major browser supports this approach.
3. Mixed with HTML code from 1 to make the page 10 minutes complex, not in line with the principle of separation of presentation and content.
4. You can only register 1 event handler of the same type with 1 object.

Method 2:
The event handle method, called an event handle, is an event handler function that specifies an object's specified event for each event handle. To register an event handler in this way, you first get a reference to the object and then assign the event handle to the corresponding event handler property of the object. In fact, mode 1 is also one way of handling the event.
Code examples are as follows:


<html> 
<head> 
<meta charset=" utf-8"> 
<title>javascript How do I register event handlers </title>
<style type="text/css">
#mydiv{
 width:100px;
 height:100px;
 background-color:red;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
 var mydiv=document.getElementById("mydiv");
 var bt=document.getElementById("bt");
 bt.onclick=function(){
  mydiv.style.backgroundColor="green";
 }
}
</script>
</head>
<body>
 <div id="mydiv"></div>
 <button id="bt"> Click to see what it looks like </button>
</body>
</html>

In the above code, you first get a reference to the button object using document.getElementById ("bt"), then assign the event handle (event handler) to the onclick event property of the button object, so that when the button is clicked, the onclick event is triggered and the code in the event handle is executed. Advantages and disadvantages are as follows:

1. Simple and easy to understand. 2. All browsers support it. 3. You can only register 1 event handler of the same type with 1 object.

Method 3:
Is a more advanced way of registering events, the event listener, which solves the problem of registering only one event of the specified type on a specified object. However, there is a definite compatibility problem, which is described in the following 1:
1).IE browser:
The attachEvent() and detachEvent() methods can be used in the IE browser to register event handlers for the specified object and to remove registered event handlers.
The syntax format is as follows:
element.attachEvent("onevent",eventListener)
This function takes two arguments, the first being the name of the event type, and the second being the event handler to be registered.
Code examples are as follows:


<html> 
<head> 
<meta charset=" utf-8"> 
<title>javascript How do I register event handlers </title>
<style type="text/css">
#mydiv{
 width:100px;
 height:100px;
 background-color:red;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
 var mydiv=document.getElementById("mydiv");
 var bt=document.getElementById("bt");
 
 bt.attachEvent("onclick",changebg);
 
 function changebg(){
  mydiv.style.backgroundColor="green";
 }
}
</script>
</head>
<body>
 <div id="mydiv"></div>
 <button id="bt"> Click to see what it looks like </button>
</body>
</html>

The above code USES the attachEvent() function to register the onclick event handler for the button, but it only works in the IE browser. Using the detachEvent() function, you can unregister the event handler function with the following syntax:
element.detachEvent("onevent",eventListener)
Format and attachEvent() function 1 like.
Note: The first parameter must have on; for example, click events must be written as "onclick".
2). Standard browser:
In standard browsers, including IE9 and above, the addEventListener() and removeEventListener() functions are used to register and delete the registration handlers.
The syntax format is as follows:
element.addEventListener('event', eventListener, useCapture);
This function with three parameters, the first parameter is the name of the event type, the second parameter is to register the event handler, a function 3, the processing function is in the process of events capture phase is called or bubbling phase is called, under the condition of default, the attribute value is false yao is calling the event handler in the bubbling phase.
Note: The first parameter cannot be written with on. For example, the click event cannot be written as "onclick", but as "click".
Code examples are as follows:


<html> 
<head> 
<meta charset=" utf-8"> 
<title>javascript How do I register event handlers </title>
<style type="text/css">
#mydiv{
 width:100px;
 height:100px;
 background-color:red;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
 var mydiv=document.getElementById("mydiv");
 var bt=document.getElementById("bt");
 
 bt.addEventListener("click",changebg);
 
 function changebg(){
  mydiv.style.backgroundColor="green";
 }
}
</script>
</head>
<body>
 <div id="mydiv"></div>
 <button id="bt"> Click to see what it looks like </button>
</body>
</html>

The above code is above IE9 and IE9 or other standard browsers. Click the button to set the background color of div to green. Using the removeEventListener() function, you can unregister the event handler function with the following syntax:
element.removeEventListener('event', eventListener, useCapture);
Format and addEventListener() function formula 1.
Cross-browser registration event handlers:
Just add a judgment statement and the code is as follows:


var EventUtil={
  // registered 
  addHandler: function(element, type, handler){
   if (element.addEventListener){
    element.addEventListener(type, handler, false);
   } else if (element.attachEvent){
    element.attachEvent("on" + type, handler);
   } else {
    element["on" + type] = handler;
   }
  },
  // Remove the registration 
  removeHandler: function(element, type, handler){
   if (element.removeEventListener){
    element.removeEventListener(type, handler, false);
   } else if (element.detachEvent){
    element.detachEvent("on" + type, handler);
   } else {
    element["on" + type] = null;
   }
  }       
 };

Above is the detailed content of this article, hope to be helpful to your study.


Related articles: