Examples to explain javascript registration event processing function

Examples to explain javascript registration event processing function_javascript skills

WBOY

Release： 2016-05-16 15:20:43

Original

1390 people have browsed it

Events are the core content of JavaScript, and their importance will not be introduced here. After the event is triggered, an event processing function is needed to handle it. For example, we can define that when a button is clicked, the background of a div will be set to green. Then let's first take a look at how to achieve this effect. The code example is as follows:

<html> 
<head> 
<meta charset=" utf-8"> 
<title>javascript如何注册事件处理函数</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">点击查看效果</button> 
</body>
</html>

Copy after login

In the above code, clicking the button will set the background color of the div to green. This is because the code registers an event handler function for the onclick event of the button. This function can set the background color of the div to green. Let’s briefly introduce how to register event processing functions for object events with examples:
Method 1:
Register the event processing function directly in the HTML code, that is, set the event processing function directly through the HTML attribute. The code to be executed by the event processing function is the HTML attribute value. This method is used at the beginning of the article. The advantages and disadvantages are as follows:

1. Easy to understand and use.
2. All major browsers support this method.
3. Mixed with HTML code, making the page very complicated and inconsistent with the principle of separation of performance and content.
4. Only one event handler of the same type can be registered on the same object.

Method 2:
Event handle mode, the so-called event handle is the event processing function, and the specified event of the specified object corresponds to an event handler. To register an event processing function in this way, you must first obtain a reference to the object, and then assign the event handle to the corresponding event processing function attribute of the object. In fact, method one is also a kind of event handler method.
The code example is as follows:

<html> 
<head> 
<meta charset=" utf-8"> 
<title>javascript如何注册事件处理函数</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">点击查看效果</button>
</body>
</html>

Copy after login

In the above code, first use document.getElementById("bt") to obtain the reference of the button object, and then assign the event handle (event handler function) to the onclick event attribute of the button object, so that onclick will be triggered when the button is clicked. event, and then execute the code in the event handler. The advantages and disadvantages are as follows:

1. Simple and easy to understand.
Supported by 2 browsers.
3. Only one event handler of the same type can be registered on the same object.

Method 3:
It is a more advanced event registration method, that is, event listener. This method solves the problem that only one handler function for a specified type of event can be registered in a specified object. However, there are certain compatibility issues, which are introduced below:
1).IE browser:
In IE browser, you can use the attachEvent() and detachEvent() methods to register event handling functions for the specified object and to delete the registered event handling functions.
The syntax format is as follows:
element.attachEvent("onevent",eventListener)
This function has two parameters, the first parameter is the name of the event type, and the second parameter is the event handler function to be registered.
The code example is as follows:

<html> 
<head> 
<meta charset=" utf-8"> 
<title>javascript如何注册事件处理函数</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">点击查看效果</button>
</body>
</html>

Copy after login

The above code uses the attachEvent() function to register the onclick event handler for the button, but it is only valid in IE browser. Use the detachEvent() function to detach the originally registered event processing function. The syntax format is as follows:
element.detachEvent("onevent",eventListener)
The format is the same as the attachEvent() function.
Special note: The first parameter must contain on. For example, the click event must be written as "onclick".
2). Standard browser:
In standard browsers (including IE9 and IE9 and above browsers), use the addEventListener() and removeEventListener() functions to register and delete registration processing functions.
The syntax format is as follows:
element.addEventListener('event', eventListener, useCapture);
This function has three parameters. The first parameter is the event type name. The second parameter is the event handler function to be registered. The third function specifies whether this handler function is called during the capture phase of the event delivery process or bubbles up. The stage is called. Under default conditions, the value of this property is false, which means that the event handler is called during the bubbling stage.
Special note: The first parameter cannot contain on. For example, the click event cannot be written as "onclick", but must be written as "click".
The code example is as follows:

<html> 
<head> 
<meta charset=" utf-8"> 
<title>javascript如何注册事件处理函数</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">点击查看效果</button>
</body>
</html>

Copy after login

以上代码在IE9和IE9以上或者其他标准浏览器中，点击按钮可以将div的背景颜色设置为绿色。使用removeEventListener()函数可以解除原来注册的事件处理函数，语法格式如下:
element.removeEventListener('event', eventListener, useCapture);
格式和addEventListener()函数式一样的。
跨浏览器注册事件处理函数:
只要加个判断语句即可，代码如下:

var EventUtil={
  //注册
  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;
   }
  },
  //移除注册
  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;
   }
  }       
 };

Copy after login

以上就是本文的详细内容，希望对大家的学习有所帮助。