实例讲解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 相关文章推荐
基于jQuery试卷自动排版系统
Jul 18 Javascript
面向对象Javascript核心支持代码分享
May 23 Javascript
jQuery实现为图片添加镜头放大效果的方法
Jun 25 Javascript
jQuery地图map悬停显示省市代码分享
Aug 20 Javascript
JavaScript操作HTML元素和样式的方法详解
Oct 21 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 Javascript
node.js 发布订阅模式的实例
Sep 10 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
JavaScript原型对象原理与应用分析
Dec 27 Javascript
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 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得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
php中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
php中的登陆login实例代码
2016/06/20 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
网页整体变灰白色(兼容各浏览器)实例
2013/04/21 Javascript
node+express+jade制作简单网站指南
2014/11/26 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
jQuery插件实现图片轮播特效
2016/06/16 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
electron 安装,调试,打包的具体使用
2019/11/06 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
python中while循环语句用法简单实例
2015/05/07 Python
Python 做曲线拟合和求积分的方法
2018/12/29 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
Python3 assert断言实现原理解析
2020/03/02 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
详解Canvas事件绑定
2018/06/27 HTML / CSS
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
一道输出判断型Java面试题
2014/10/01 面试题
2014年扶贫帮困工作总结
2014/12/09 职场文书
python pygame入门教程
2021/06/01 Python
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL