实例讲解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 相关文章推荐
小议Javascript中的this指针
Mar 18 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 Javascript
很全面的JavaScript常用功能汇总集合
Jan 22 Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 Javascript
如何使用jquery实现文字上下滚动效果
Oct 12 Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 Javascript
VUE element-ui 写个复用Table组件的示例代码
Nov 18 Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 Javascript
深入理解 ES6中的 Reflect用法
Jul 18 Javascript
jquery轮播图插件使用方法详解
Jul 31 jQuery
详解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获取随机数字和字母的方法详解
2013/06/06 PHP
解析htaccess伪静态的规则
2013/06/18 PHP
php url路由入门实例
2014/04/23 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
Dom与浏览器兼容性说明
2010/10/25 Javascript
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
2018/01/09 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
2020/05/23 Javascript
vue基于Echarts的拖拽数据可视化功能实现
2020/12/04 Vue.js
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
Python之循环结构
2019/01/15 Python
django的auth认证,authenticate和装饰器功能详解
2019/07/25 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
陈欧广告词
2014/03/14 职场文书
环保建议书200字
2014/05/14 职场文书
新书发布会策划方案
2014/06/09 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android