实例讲解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 相关文章推荐
实现复选框全选/全不选切换
Dec 23 Javascript
清空上传控件input file的值
Jul 03 Javascript
js控制的遮罩层实例介绍
May 29 Javascript
jquery日历控件实现方法分享
Mar 07 Javascript
js propertychange和oninput事件
Sep 28 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
jQuery获取剪贴板内容的方法
Jun 16 Javascript
基于原生JS实现图片裁剪
Aug 01 Javascript
Bootstrap CSS布局之列表
Dec 15 Javascript
jQuery中复合选择器简单用法示例
Mar 31 jQuery
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 Javascript
js 将多个对象合并成一个对象 assign方法的实现
Sep 24 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统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
PHP-CGI进程CPU 100% 与 file_get_contents 函数的关系分析
2011/08/15 PHP
详谈PHP文件目录基础操作
2014/11/11 PHP
php实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
深入浅析PHP无限极分类的案例教程
2016/05/09 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
PHP基于curl实现模拟微信浏览器打开微信链接的方法示例
2019/02/15 PHP
javascript编程起步(第六课)
2007/02/27 Javascript
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
JavaScript中的数学运算介绍
2014/12/29 Javascript
Node.js事件驱动
2015/06/18 Javascript
Angular 理解module和injector,即依赖注入
2016/09/07 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
jQuery Ajax前后端使用JSON进行交互示例
2017/03/17 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
详解HTML5 使用video标签实现选择摄像头功能
2017/10/25 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
2018/08/06 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
TensorFlow的权值更新方法
2018/06/14 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
2020/09/25 Python
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
区域销售经理职责
2013/12/22 职场文书
捐款活动总结
2014/08/27 职场文书
科级干部群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
工作简历自我评价
2015/03/11 职场文书
现场施工员岗位职责
2015/04/11 职场文书