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匿名函数的问题分析
Mar 30 Javascript
javascript操作JSON的要领总结
Dec 09 Javascript
Node.js中使用计时器定时执行函数详解
Aug 15 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
js去字符串前后空格的实现方法
Feb 26 Javascript
详解JavaScript中|单竖杠运算符的使用方法
May 23 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 Javascript
js前端如何写一个精确的倒计时代码
Oct 25 Javascript
vue cli3适配所有端方案的实现
Apr 13 Javascript
Node.js API详解之 assert模块用法实例分析
May 26 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 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
德劲1103的维修打理经验
2021/03/02 无线电
PHP脚本的10个技巧(3)
2006/10/09 PHP
杏林同学录(七)
2006/10/09 PHP
php下实现折线图效果的代码
2007/04/28 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
Vue-cli3简单使用(图文步骤)
2019/04/30 Javascript
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
python的re模块应用实例
2014/09/26 Python
Python冒泡排序注意要点实例详解
2016/09/09 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
python中map的基本用法示例
2018/09/10 Python
Python实现Dijkstra算法
2018/10/17 Python
一百行python代码将图片转成字符画
2021/02/19 Python
如何不用安装python就能在.NET里调用Python库
2019/07/12 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
python中实现词云图的示例
2020/12/19 Python
利用css3-animation实现逐帧动画效果
2016/03/10 HTML / CSS
卫校中专生的自我评价
2014/01/15 职场文书
环境工程专业自荐信范文
2014/03/18 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
党员个人对照检查材料
2014/10/01 职场文书
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL
python实现对doc、txt、xls等文档的读写操作
2022/04/02 Python