深入浅析JavaScript中对事件的三种监听方式


Posted in Javascript onSeptember 29, 2015

事件(Event)是JavaScript应用跳动的心脏,也是把所有东西粘在一起的胶水,当我们与浏览器中Web页面进行某些类型的交互时,事件就发生了。

第一种监听方式,也是最普遍使用的方式,是直接在代码上加载事件,产生效果:

<table>
<tr onmouseover='this.style.backgroundColor="red"' onmouseout='this.style.backgroundColor=""'><td>text1</td><td>text2</td></tr>
<tr onmouseover='this.style.backgroundColor="red"' onmouseout='this.style.backgroundColor=""'><td>text3</td><td>text4</td></tr>
<tr onmouseover='this.style.backgroundColor="red"' onmouseout='this.style.backgroundColor=""'><td>text5</td><td>text5</td></tr>
</table>

第二种监听方式,是使用DOM的方式获取对象,并加载事件:

<table>
<tr><td>text1</td><td>text2</td></tr>
<tr><td>text3</td><td>text4</td></tr>
<tr><td>text5</td><td>text5</td></tr>
</table>
<script>
doms = document.getElementsByTagName('tr');
for(i=0;i<doms.length;i++)
{
  doms[i].onmouseover = function()
  {
    this.style.backgroundColor = "red";
  }
  doms[i].onmouseout = function()
  {
    this.style.backgroundColor = "";
  }
}
</script>

第三种监听方式,是使用标准的addEventListener方式和IE私有的attachEvent方式,因为IE的attachEvent方式在参数传递时的缺陷,这个问题被搞得稍许有些复杂了:

<table>
<tr><td>text1</td><td>text2</td></tr>
<tr><td>text3</td><td>text4</td></tr>
<tr><td>text5</td><td>text5</td></tr>
</table>
<script>
doms = document.getElementsByTagName('tr');
function show_color(where)
{
  this.tagName ? where = this : null
  where.style.backgroundColor = "red";
}
function hide_color(where)
{
  this.tagName ? where = this : null
  where.style.backgroundColor = "";
}
function for_ie(where,how)
{
  return function()
  {
    how(where);
  }  
}
for(i=0;i<doms.length;i++)
{
  try
  {
    doms[i].addEventListener('mouseover',show_color,false);
    doms[i].addEventListener('mouseout',hide_color,false);
  }
  catch(e)
  {
    doms[i].attachEvent('onmouseover',for_ie(doms[i],show_color));
    doms[i].attachEvent('onmouseout',for_ie(doms[i],hide_color));
  }
}
</script>

在绑定多个相同的事件的时候,前两种方法会产生覆盖,而第三中方法则会同时执行多个事件。

Javascript 相关文章推荐
Javascript Tab 导航插件 (23个)
Jun 11 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
JavaScript中的对象的extensible属性介绍
Dec 30 Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
canvas实现图像放大镜
Feb 06 Javascript
基于Node的React图片上传组件实现实例代码
May 10 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
JavaScrip关于创建常量的知识点
Dec 07 Javascript
关于jquery中attr()和prop()方法的区别
May 28 jQuery
vue-cli配置全局sass、less变量的方法
Jun 06 Javascript
基于vue实现简易打地鼠游戏
Aug 21 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 #Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 #Javascript
pace.js页面加载进度条插件
Sep 29 #Javascript
js强制把网址设为默认首页
Sep 29 #Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 #Javascript
JQuery实现左右滚动菜单特效
Sep 28 #Javascript
JS动态日期时间的获取方法
Sep 28 #Javascript
You might like
php下删除字符串中HTML标签的函数
2008/08/27 PHP
通过PHP current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
php生成Android客户端扫描可登录的二维码
2016/05/13 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
JS批量修改PS中图层名称的方法
2014/01/26 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
jQuery Ajax调用WCF服务详细教程
2015/03/31 Javascript
Javascript中数组方法汇总(推荐)
2015/04/01 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
javascript的BOM
2016/05/03 Javascript
jquery实现左右无缝轮播图
2020/07/31 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
JS实现的tab切换并显示相应内容模块功能示例
2019/08/03 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
js实现自动播放匀速轮播图
2020/02/06 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
Python下载懒人图库JavaScript特效
2015/05/28 Python
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
python实现飞机大战微信小游戏
2020/03/21 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
使用matplotlib的pyplot模块绘图的实现示例
2020/07/12 Python
Python学习笔记之装饰器
2020/08/06 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
世界上最大的艺术和工艺用品商店:MisterArt.com
2018/07/13 全球购物
Puma印度官网:德国运动品牌
2019/10/06 全球购物
公司出纳岗位职责
2013/12/07 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python