深入浅析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 相关文章推荐
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 Javascript
浅析js预加载/延迟加载
Sep 25 Javascript
ECMAScript6函数默认参数
Jun 12 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
Nov 09 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
解决Vue打包之后文件路径出错的问题
Mar 06 Javascript
js+css实现打字效果
Jun 24 Javascript
layui table单元格事件修改值的方法
Sep 24 Javascript
使用axios请求接口,几种content-type的区别详解
Oct 29 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 Javascript
JS实现的雪花飘落特效示例
Dec 03 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中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
PHP中SESSION使用中的一点经验总结
2012/03/30 PHP
深入php多态的实现详解
2013/06/09 PHP
Win下如何安装PHP的APC拓展
2013/08/07 PHP
php使用sql数据库 获取字段问题介绍
2013/08/12 PHP
PHP 生成微信红包代码简单
2016/03/25 PHP
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
JS实现的跨浏览器解析XML文件实例
2016/06/21 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
python搜索指定目录的方法
2015/04/29 Python
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
python读取图片任意范围区域
2019/01/23 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
Python Merge函数原理及用法解析
2020/09/16 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
农村文化建设标语
2014/10/07 职场文书
Python实现学生管理系统(面向对象版)
2021/06/24 Python
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技