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 27 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
Sep 02 Javascript
实现web打印的各种方法介绍及实现代码
Jan 09 Javascript
JavaScript函数详解
Nov 17 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
Mar 16 Javascript
js获取时间精确到秒(年月日)
Mar 16 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
遍历json获得数据的几种方法小结
Jan 21 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 Javascript
面试中canvas绘制图片模糊图片问题处理
Mar 13 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
图书管理程序(二)
2006/10/09 PHP
php 采集书并合成txt格式的实现代码
2009/03/01 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
CI(CodeIgniter)框架配置
2014/06/10 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
图文介绍PHP添加Redis模块及连接
2015/07/28 PHP
zeroclipboard复制到剪切板的flash
2010/08/04 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
jQuery预加载图片常用方法
2015/06/15 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
Python中字典和JSON互转操作实例
2015/01/19 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
Django实现发送邮件找回密码功能
2019/08/12 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
美国知名的网上鞋类及相关服装零售商:Shoes.com
2017/05/06 全球购物
梅西酒窖:Macy’s Wine Cellar
2018/01/07 全球购物
给男朋友的道歉信
2014/01/12 职场文书
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
周年庆典主持词
2014/04/02 职场文书
协议书与合同的区别
2014/04/18 职场文书
2014预备党员批评与自我批评思想汇报
2014/09/20 职场文书
2015年学校总务工作总结
2015/07/20 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
angular异步验证器防抖实例详解
2022/03/31 Javascript
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL