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互斥锁分享
Feb 02 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
每天一篇javascript学习小结(Date对象)
Nov 13 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
Oct 28 Javascript
EasyUI学习之Combobox级联下拉列表(2)
Dec 29 Javascript
bootstrap Table服务端处理分页(后台是.net)
Oct 19 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
Vue数据双向绑定底层实现原理
Nov 22 Javascript
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 Javascript
正则表达式基础与常用验证表达式
Jun 16 Javascript
VUE递归树形实现多级列表
Jul 15 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加密解密字符串示例
2016/10/13 PHP
php读取本地json文件的实例
2018/03/07 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
JavaScript与jQuery实现的闪烁输入效果
2016/02/18 Javascript
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
Vue打包后出现一些map文件的解决方法
2018/02/13 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
JS限制输入框输入的实现代码
2018/07/02 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
Python实现网站注册验证码生成类
2017/06/08 Python
Python中django学习心得
2017/12/06 Python
Python机器学习之决策树算法实例详解
2017/12/06 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
python3爬虫中异步协程的用法
2020/07/10 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
教师节学生演讲稿
2014/09/03 职场文书
新闻发布会活动策划方案
2014/09/15 职场文书
个人授权委托书
2014/09/15 职场文书
2015年十月一日放假通知
2015/08/18 职场文书
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android