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入门·对象属性方法大总结
Oct 01 Javascript
JavaScript 设计模式 安全沙箱模式
Sep 24 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
Mar 03 Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
layui自定义插件citySelect实现省市区三级联动选择
Jul 26 Javascript
Javascript实现关闭广告效果
Jan 29 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
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
javascript实现动态改变层大小的方法
2015/05/14 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
2020/07/12 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
Python break语句详解
2014/03/11 Python
python中requests模块的使用方法
2015/04/08 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
python Pillow图像处理方法汇总
2019/10/16 Python
Python 词典(Dict) 加载与保存示例
2019/12/06 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
Html5 web本地存储实例详解
2016/07/28 HTML / CSS
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
几个常见的消息中间件(MOM)
2014/01/08 面试题
大专生工程监理求职信
2013/10/04 职场文书
迷你西餐厅创业计划书范文
2013/12/31 职场文书
家长学校培训材料
2014/08/20 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书