深入浅析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 each()小议
Mar 18 Javascript
dojo随手记 gird组件引用
Feb 24 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
Jun 27 Javascript
iframe窗口高度自适应的实现方法
Jan 08 Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
Mar 01 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
Jun 25 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
Nov 03 Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
Dec 27 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
了解javascript中let和var及const关键字的区别
May 24 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的十大要点(上)
2009/02/04 PHP
PHP JS Ip地址及域名格式检测代码
2013/09/27 PHP
PHP GD库生成图像的几个函数总结
2014/11/19 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
PDO::inTransaction讲解
2019/01/28 PHP
Thinkphp5框架异常处理操作实例分析
2020/06/03 PHP
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
微信小程序实现点赞、取消点赞功能
2018/11/02 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
python的else子句使用指南
2016/02/27 Python
python简单线程和协程学习心得(分享)
2017/06/14 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
对Python3之方法的覆盖与super函数详解
2019/06/26 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
社区母亲节活动记录
2014/03/06 职场文书
英语复习计划
2015/01/19 职场文书
授权委托书
2015/01/28 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
Python编解码问题及文本文件处理方法详解
2021/06/20 Python