编程 Javascript

实例讲解javascript注册事件处理函数

Posted in Javascript onJanuary 09, 2016

事件是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>

在以上代码中，点击按钮就会将div的背景颜色设置为绿色，这是因为代码为按钮的onclick事件注册了事件处理函数，此函数可以将div的背景颜色设置为绿色。下面就结合实例简单介绍一下如何为对象的事件注册事件处理函数：
方式一:
直接在HTML代码中注册事件处理函数，也就是直接通过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和IE9以上浏览器），要使用addEventListener()和removeEventListener()函数注册和删除注册处理函数。
语法格式如下:
element.addEventListener('event', eventListener, useCapture);
此函数具有三个参数，第一个参数是事件类型名称，第二个参数就是要注册的事件处理函数，第三个函数规定此处理函数是在事件传递过程中的捕获阶段被调用还是冒泡阶段被调用，在默认条件下，此属性值为false么也就是在冒泡阶段调用事件处理函数。
特别说明:第一个参数不能够带有on，例如点击事件不能写为"onclick"，而要写成"click"。
代码实例如下:

<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和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注册事件处理函数

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

在修改准备发的批量美化select+可修改select时，在非IE下发现了几个问题

Jan 09 Javascript

JS面向对象编程之对象使用分析

Aug 19 Javascript

基于jquery的无缝循环新闻列表插件

Mar 07 Javascript

用JavaScript实现一个代码简洁、逻辑不复杂的多级树

May 23 Javascript

jQuery操作Table技巧大汇总

Jan 23 Javascript

封装属于自己的JS组件

Jan 27 Javascript

jQuery Ajax 上传文件处理方式介绍(推荐)

Jun 30 Javascript

JS HTML5实现拖拽移动列表效果

Aug 27 Javascript

微信小程序实现锚点定位楼层跳跃的实例

May 18 Javascript

JS 中可以提升幸福度的小技巧(可以识别更多另类写法)

Jul 28 Javascript

Electron vue的使用教程图文详解

Jul 05 Javascript

Vue时间轴 vue-light-timeline的用法说明

Oct 29 Javascript

详解javascript事件冒泡

Jan 09 #Javascript

js父页面中使用子页面的方法

Jan 09 #Javascript

jquery调整表格行tr上下顺序实例讲解

Jan 09 #Javascript

实例讲解js验证表单项是否为空的方法

Jan 09 #Javascript

小心！AngularJS结合RequireJS做文件合并压缩的那些坑

Jan 09 #Javascript

javascript跑马灯抽奖实例讲解

Apr 17 #Javascript

jQuery页面刷新(局部、全部)问题分析

Jan 09 #Javascript