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 学习笔记 错误处理
Jul 30 Javascript
JS获取整个页面文档的实现代码
Dec 15 Javascript
javascript时区函数介绍
Sep 14 Javascript
让angularjs支持浏览器自动填表
Nov 10 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
Yii2使用Bootbox插件实现自定义弹窗
Apr 02 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
JavaScript中transform实现数字翻页效果
Mar 08 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
May 29 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 Javascript
JavaScript 防盗链的原理以及破解方法
Dec 29 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 curl选项列表(超详细)
2013/07/01 PHP
php递归函数中使用return的注意事项
2014/01/17 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
php的ddos攻击解决方法
2015/01/08 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
javascript 多浏览器 事件大全
2010/03/23 Javascript
js 小数取整的函数
2010/05/10 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
js创建一个input数组并绑定click事件的方法
2014/06/12 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
基于webpack 实用配置方法总结
2017/09/28 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
详解javascript void(0)
2020/07/13 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
python使用Apriori算法进行关联性解析
2017/12/21 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
python 正则表达式贪婪模式与非贪婪模式原理、用法实例分析
2019/10/14 Python
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
聚美优品广告词改编
2014/03/14 职场文书
2014年党建工作总结
2014/11/11 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
档案接收函格式
2015/01/30 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书