实例讲解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 相关文章推荐
一个js控制的导航菜单实例代码
Dec 03 Javascript
JS实现模仿微博发布效果实例代码
Dec 16 Javascript
jQuery is()函数用法3例
May 06 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
JSON字符串转换JSONObject和JSONArray的方法
Jun 03 Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
Dec 27 Javascript
解决angularjs中同步执行http请求的方法
Aug 13 Javascript
vue input实现点击按钮文字增删功能示例
Jan 29 Javascript
js控制随机数生成概率代码实例
Mar 21 Javascript
解决vant-UI库修改样式无效的问题
Nov 03 Javascript
Vue实现菜单切换功能
Nov 08 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
You might like
浅析PHP水印技术
2007/02/14 PHP
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
CI框架文件上传类及图像处理类用法分析
2016/05/18 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
修改Laravel自带的认证系统的User类的命名空间的步骤
2019/10/15 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
javascript 表单规则集合对象
2009/07/21 Javascript
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
2020/11/18 Vue.js
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
[41:54]2018DOTA2亚洲邀请赛 4.1 小组赛A组加赛 TNC vs Liquid
2018/04/03 DOTA
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
Django REST framework视图的用法
2019/01/16 Python
Python各种扩展名区别点整理
2020/02/27 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
如何用Django处理gzip数据流
2021/01/29 Python
配置管理计划的主要内容有哪些
2014/06/20 面试题
幼儿园开学家长寄语
2014/01/19 职场文书
就业表自我评价分享
2014/02/06 职场文书
保险专业大学生职业规划书
2014/03/03 职场文书
导师对论文的学术评语
2015/01/04 职场文书
高中16字霸气押韵班级口号集锦!
2019/06/27 职场文书