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 相关文章推荐
用JQuery 实现的自定义对话框
Mar 24 Javascript
JavaScript库 开发规则
Jan 31 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
Mar 28 Javascript
一个css与js结合的下拉菜单支持主流浏览器
Oct 08 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
JavaScript获取页面中表单(form)数量的方法
Apr 03 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
node中使用es5/6以及支持性与性能对比
Aug 11 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 Javascript
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
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中通过语义URL防止网站被攻击的方法分享
2011/09/08 PHP
PHP 图片上传代码
2011/09/13 PHP
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
PHP中绘制图像的一些函数总结
2014/11/19 PHP
thinkphp连贯操作实例分析
2014/11/22 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
索趣科技的答案
2007/02/07 Javascript
javascript 动态加载 css 方法总结
2009/07/11 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
跟老齐学Python之数据类型总结
2014/09/24 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
利用TensorFlow训练简单的二分类神经网络模型的方法
2018/03/05 Python
python opencv人脸检测提取及保存方法
2018/08/03 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
numpy中生成随机数的几种常用函数(小结)
2020/08/18 Python
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
纪念建党演讲稿范文
2014/01/13 职场文书
一年级家长会邀请函
2014/01/25 职场文书
幼儿园招生广告
2014/03/19 职场文书
关于运动会的广播稿
2014/09/22 职场文书
二年级语文下册复习计划
2015/01/19 职场文书
如何拟写通知正文?
2019/04/02 职场文书
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python