JS事件注册方法：HTML属性、事件句柄与监听器对比

事件处理函数注册概述

事件机制是JavaScript的核心组成部分，其重要性不言而喻。当事件被触发后，必须通过相应的事件处理函数来进行响应。例如，若希望点击按钮时将某个div的背景色变为绿色，首先需要了解如何实现这一效果，具体代码实现如下所示：


<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>

方式一：HTML属性注册

上述代码中，点击按钮即可将div背景色设为绿色，这是因为代码为按钮的onclick事件注册了处理函数，该函数负责修改div的背景色。接下来结合实例简要介绍如何为对象事件注册处理函数：方式一：直接在HTML代码中注册事件处理函数，即通过HTML属性设置处理函数，属性值即为要执行的代码。文章开头示例即采用此方式。其优缺点如下：

1. 逻辑直观，使用简便。
2. 所有主流浏览器均支持此方式。
3. 代码与HTML结构混合，导致页面结构繁杂，违背表现与内容分离的设计原则。
4. 同一对象上只能注册一个同类型事件的处理函数。

方式二：事件句柄方式

方式二：事件句柄方式，即指定对象特定事件对应一个事件处理函数。使用此方式注册处理函数时，需先获取对象引用，再将处理函数赋值给对象对应的事件属性。实际上，方式一也属于事件句柄方式的一种变体。代码实例如下：


<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>

上述代码中，首先通过document.getElementById("bt")获取按钮对象引用，随后将事件句柄（即处理函数）赋值给按钮的onclick属性。这样在点击按钮时触发onclick事件，并执行句柄中的代码。其优缺点如下：

1. 简单直观，易于理解。
2. 所有浏览器均支持。
3. 同一对象上只能注册一个同类型事件的处理函数。

方式三：事件监听器与跨浏览器兼容

方式三：这是一种更为高级的事件注册方式，称为事件监听器。该方式解决了同一对象只能注册一个同类型事件处理函数的限制，但存在浏览器兼容性问题，下面分别介绍： 1). IE浏览器：在IE浏览器中，可使用attachEvent()和detachEvent()方法为指定对象注册或移除事件处理函数。语法格式如下： element.attachEvent("onevent",eventListener) 该函数包含两个参数，第一个参数为事件类型名称，第二个参数为要注册的事件处理函数。代码实例如下：


<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>

上述代码使用attachEvent()函数为按钮注册onclick事件处理函数，但仅在IE浏览器中有效。使用detachEvent()函数可移除已注册的处理函数，语法格式如下： element.detachEvent("onevent",eventListener) 其格式与attachEvent()函数一致。特别说明：第一个参数必须包含“on”前缀，例如点击事件应写为"onclick"。 2). 标准浏览器：在标准浏览器中（包括IE9及以上版本），需使用addEventListener()和removeEventListener()函数来注册或移除处理函数。语法格式如下： element.addEventListener('event', eventListener, useCapture); 该函数包含三个参数，第一个参数为事件类型名称，第二个参数为要注册的事件处理函数，第三个参数规定处理函数是在捕获阶段还是冒泡阶段调用，默认值为false，即在冒泡阶段调用。特别说明：第一个参数不能包含“on”前缀，例如点击事件应写为"click"而非"onclick"。代码实例如下：


<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>

上述代码在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;
   }
  }       
 };

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

JavaScript注册事件处理函数的三种方式详解

事件处理函数注册概述

方式一：HTML属性注册

方式二：事件句柄方式

方式三：事件监听器与跨浏览器兼容

实用工具推荐