javascript 跨浏览器开发经验总结(五) js 事件


Posted in Javascript onMay 19, 2010

简单事件模型和高级事件模型

简单事件模型和高级事件模型简单事件,就是事件与页面元素直观的绑定在一起的形式,如:

<div onclick="alert(this.innerHTML);"> 
element.onclick = function(){alert(this.innerHTML);}

只要不是用了个别浏览器独有的事件,一般的click,mouseover事件等在各浏览器中都可以这么使用。

但是当一个事件需要绑定多个监听,或者需要动态注册/移出监听时,简单事件模型就不够用了,需要使用高级事件模型(IE和其他浏览器在使用高级事件模型时就有区别了):

//注册 
function addEventHandler(element, evtName, callback, useCapture) { 
//DOM标准 
if (element.addEventListener) { 
element.addEventListener(evtName, callback, useCapture); 
} else { 
//IE方式,忽略useCapture参数 
element.attachEvent('on' + evtName, callback); 
} 
} //移除 
function removeEventHandler(element, evtName, callback, useCapture) { 
//DOM标准 
if (element.removeEventListener) { 
element.removeEventListener(evtName, callback, useCapture); 
} else { 
//IE方式,忽略useCapture参数 
element.dettachEvent('on' + evtName, callback); 
} 
}

标签中onclick事件与href属性的调用顺序关系
在a标签响应点击事件时,会先进行onclick事件的响应,再执行href中的跳转方法。如以下标签点击后会先后提示“button”和“href”:

<a href=”javascript:alert(“href”);” onclick="alert(this.innerHTML);"> button </a>

但是,最好不要在href中定义具体的javascript方法,因为这个是定义跳转的链接地址的属性,如果需要先后执行两个javascript方法,应该这样写:

<a href=”#” onclick="alert(this.innerHTML); alert(“href”);"> button </a>

但是上面的写法中如果onclick绑定的响应方法中并没有提交请求跳转至别的页面,那么会发现当前网页做了一次刷新,因为以上代码中href=“#”表示跳转到当前页的顶部,但是并没有发出新的html请求。有的时候,我们并不希望页面在响应onclick事件后又跳回顶部(尤其是页面高度较长,出现滚动条,并且该链接位于页面底部时,跳转至顶部后用户还需要拖动滚动条找回原来位置继续操作时),那么应该在onclick后返回false值,阻止继续进行href定义的动作,如:

<a href=”#” onclick="alert(this.innerHTML); alert(“href”);return false;"> button </a>

或者将#替换成空的javascript语句:

<a href=”javascript:void(0)” onclick="alert(this.innerHTML); alert(“href”);"> button </a>

onload事件的调用顺序

有的时候在页面初始化时需要调用一些脚本来设置页面元素的初始状态,最标准的做法是用<body onload=””>方式或者document.onload方式调用。onload的事件的触发会在页面元素渲染完毕之后调用,这样就保证了不会出现脚本执行时找不到未渲染的页面元素的情况。如果是在<head>区域的<script>块中执行脚本,并使用了页面元素时,就很有可能出现找不到元素的错误。如果是在<body>区域的<script>块中执行脚本,只能使用该<script>块之前的页面元素,因为<body>区域的元素基本是顺序解析的。

onchange事件

<input>元素和<select>的<option>元素都支持onchangge事件,但是经常我们会发现元素的内容值变化了却没有触发onchangge事件。这是因为onchange事件的触发还有另一个条件:当前元素处于失去焦点(onblur)的状态。所以,onchange事件只能捕获用户操作时的值变化,对于使用javascript脚本动态改变元素value的情况,它是捕获不到的。

事件截获

因除了IE之外的浏览器不能识别window.event所以要使用以下方式来获取当前事件和事件发生的目标元素:
var evt = e?e:(window.event?window.event:null);
var el = evt.srcElement?evt.srcElement:evt.target;

这里有一些其它相关的文章,非常值得参考下
JavaScript Event事件学习第一章 Event介绍
javascript 跨浏览器的事件系统

Javascript 相关文章推荐
JavaScript实现动态创建CSS样式规则方案
Sep 06 Javascript
Javascript中call与apply的学习笔记
Sep 22 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
Nov 27 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
May 05 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
JS实现碰撞检测的方法分析
Jan 19 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
vue实现简单的星级评分组件源码
Nov 16 Javascript
JS阻止事件冒泡的方法详解
Aug 26 Javascript
Angular 多模块项目构建过程
Feb 13 Javascript
Javascript生成器(Generator)的介绍与使用
Jan 31 Javascript
js 复制或插入Html的实现方法小结
May 19 #Javascript
15 个 JavaScript Web UI 库
May 19 #Javascript
JavaScript 以对象为索引的关联数组
May 19 #Javascript
JavaScript 语言的递归编程
May 18 #Javascript
JS 树形递归实例代码
May 18 #Javascript
document.getElementById方法在Firefox与IE中的区别
May 18 #Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
May 18 #Javascript
You might like
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
PHP递归创建多级目录
2015/11/05 PHP
Yii框架实现邮箱激活的方法【数字签名】
2016/10/18 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
javascript 时间比较实现代码
2009/10/28 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
随鼠标上下滚动的jquery代码
2013/12/05 Javascript
使用Nodejs开发微信公众号后台服务实例
2014/09/03 NodeJs
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
javascript cookie的简单应用
2016/02/24 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
常用的javascript设计模式
2017/01/11 Javascript
vue观察模式浅析
2018/09/25 Javascript
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
Vue 实现拨打电话操作
2020/11/16 Javascript
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
详解Python中的__new__()方法的使用
2015/04/09 Python
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
Python数据库小程序源代码
2019/09/15 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
python飞机大战游戏实例讲解
2020/12/04 Python
Does C# support multiple inheritance? (C#支持多重继承吗)
2012/01/04 面试题
4s店机修工岗位职责
2013/12/20 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
2014年学生会工作总结
2014/11/07 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle