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 相关文章推荐
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 Javascript
JS中不为人知的五种声明Number的方式简要概述
Feb 22 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
详解JavaScript的另类写法
Apr 11 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
Jan 04 Javascript
js实现楼层导航功能
Feb 23 Javascript
js+css实现打字效果
Jun 24 Javascript
vue组件的写法汇总
Apr 12 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
基于vue的验证码组件的示例代码
Jan 22 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/10/12 PHP
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
php发送post请求函数分享
2014/03/06 PHP
php实现的http请求封装示例
2016/11/08 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
js的表单操作 简单计算器
2011/12/29 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
2016/05/17 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
JavaScript中Require调用js的实例分享
2017/10/27 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
Python处理session的方法整理
2019/08/29 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
Python中and和or如何使用
2020/05/28 Python
python如何实现递归转非递归
2021/02/25 Python
css3中仿放大镜效果的几种方式原理解析
2020/12/03 HTML / CSS
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
五一服装活动方案
2014/01/11 职场文书
护理专业优质毕业生自荐书
2014/01/31 职场文书
优秀党员获奖感言
2014/02/18 职场文书
食品流通安全承诺书
2014/05/22 职场文书
会计岗位说明书
2014/07/29 职场文书
2015年社会实践个人总结
2015/03/06 职场文书
金陵十三钗观后感
2015/06/04 职场文书
生日寿星公答谢词
2015/09/29 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python
pandas 实现将NaN转换为None
2021/05/14 Python
微信小程序实现聊天室功能
2021/06/14 Javascript