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 清空form表单中某种元素的值
Dec 26 Javascript
Array的push与unshift方法性能比较分析
Mar 05 Javascript
jquery异步请求实例代码
Jun 21 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
Oct 17 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
Jun 14 Javascript
AngularJS实现动态编译添加到dom中的方法
Nov 04 Javascript
JS正则子匹配实例分析
Dec 22 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
Js利用正则表达式去除字符串的中括号
Nov 23 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一些服务器端特性的配置加强php的安全
2006/10/09 PHP
PHP源码之 ext/mysql扩展部分
2009/07/17 PHP
mysql总结之explain
2012/02/27 PHP
百度地图API应用之获取用户的具体位置
2014/06/10 PHP
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
php读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
js实现简单的打印表格
2020/01/15 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
python实现ip查询示例
2014/03/26 Python
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
python分布式环境下的限流器的示例
2017/10/26 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
python全栈要学什么 python全栈学习路线
2019/06/28 Python
python获取引用对象的个数方式
2019/12/20 Python
Python之Class&amp;Object用法详解
2019/12/25 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
政风行风建设整改方案
2014/10/27 职场文书
大四学生个人总结
2015/02/15 职场文书