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的鼠标拖动效果代码
May 30 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 Javascript
Jquery实现显示和隐藏的4种简单方式
Aug 28 Javascript
jQuery中:first选择器用法实例
Dec 30 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
javascript实现控制的多级下拉菜单
Jul 05 Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
Aug 10 Javascript
jQuery按需加载轮播图(web前端性能优化)
Feb 17 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
Sep 23 Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
Jquery选择器 $实现原理
2009/12/02 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
微信小程序 toast 详解及实例代码
2016/11/09 Javascript
解析js如何获取css样式
2016/12/11 Javascript
Node.js学习入门
2017/01/03 Javascript
js实现炫酷的左右轮播图
2017/01/18 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
Django数据库操作的实例(增删改查)
2017/09/04 Python
django session完成状态保持的方法
2018/11/27 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
.dcm格式文件软件读取及python处理详解
2020/01/16 Python
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
印尼购物网站:iLOTTE
2019/10/16 全球购物
机械电子工程专业自荐书
2014/06/10 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
Elasticsearch 索引操作和增删改查
2022/04/19 Python