Javascript事件监听
FireFox : addEventListener()方法
IE : attachEvent()方法
为HTML元素添加一个事件监听, 而不是直接对元素的事件属性（如：onclick、onmouseover）赋值。
为HTML元素添加一个事件监听:
1.利用元素事件属性添加事件处理函数
2.attachEvent方法添加事件处理函数
这两种方法处理事件还是有很大区别的！事件属性只能赋值一种方法，即：
button1.onclick = function() { alert(1); };
button1.onclick = function() { alert(2); };
这样后面的赋值语句就将前面的onclick属性覆盖了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Javascript事件监听示例</title>
</head>
<body>
<button id="Button1">测试</button>
<script type="text/javascript">
/// <summary>
/// 添加事件监听
/// </summary>
/// <param name="target">载体</param>
/// <param name="type">事件类型</param>
/// <param name="func">事件函数</param>
function addEventHandler(target, type, func) {
if (target.addEventListener)
target.addEventListener(type, func, false);
else if (target.attachEvent)
target.attachEvent("on" + type, func);
else target["on" + type] = func;
}
/// <summary>
/// 移除事件监听
/// </summary>
/// <param name="target">载体</param>
/// <param name="type">事件类型</param>
/// <param name="func">事件函数</param>
function removeEventHandler(target, type, func) {
if (target.removeEventListener)
target.removeEventListener(type, func, false);
else if (target.detachEvent)
target.detachEvent("on" + type, func);
else delete target["on" + type];
}
var Button1 = document.getElementById("Button1");
var Button1Click = function() { alert(1); };
addEventHandler(Button1, "click", Button1Click);
addEventHandler(Button1, "click", function() { alert(2); } );
addEventHandler(Button1, "click", function() { alert(3); } );
removeEventHandler(Button1, "click", function() { alert(2); } ); // 移不出
removeEventHandler(Button1, "click", Button1Click); // 可以移除
</script>
</body>
</html>
而添加事件监听就可以并行。
特别是当团队合作时，事件并行的需求增多，比如：监听document对象的鼠标事件或者window对象的载入事件等。
使用事件属性则会造成事件覆盖掉(第二次会覆盖第一次的)。
添加事件监听:不仅可以对同一事件添加多个处理函数对象，而且不会彼引覆盖，也不会覆盖通过属性添加的函数对象。
他们会按序运行，在IE中：先添加的后运行，而在FF中先添加的先运行。
经过测试IE(8)中先显示3再显示2，而firefox(3)中则先显示2再显示3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Javascript事件监听</title>
</head>
<body>
<button id="Button1">
测试
</button>
<script type="text/javascript">
function addEventHandler(target, type, func){
if (target.addEventListener)
target.addEventListener(type, func, false);
else
if (target.attachEvent)
target.attachEvent("on" + type, func);
else
target["on" + type] = func;
}
function removeEventHandler(target, type, func){
if (target.removeEventListener)
target.removeEventListener(type, func, false);
else
if (target.detachEvent)
target.detachEvent("on" + type, func);
else
delete target["on" + type];
}
var Button1 = document.getElementById("Button1");
Button1.onclick = function(){
alert("addByAttr1");
}
Button1.onclick = function(){
alert("addByAttr2");
}
var Button1Click = function(){
alert(1);
};
addEventHandler(Button1, "click", Button1Click);
addEventHandler(Button1, "click", function(){
alert(2);
});
addEventHandler(Button1, "click", function(){
alert(3);
});
removeEventHandler(Button1, "click", function(){ //移不出(原因：此处为一个新的匿名对象，其实是移除了该匿名对象)
alert(2);
});
removeEventHandler(Button1, "click", Button1Click);//能移除(原因：此处为对象引用，移除引用对象)
</script>
</body>
</html>
JS监听关闭浏览器事件:http://wenku.baidu.com/view/4158f76aaf1ffc4ffe47ac67.html
Javascript事件监听的更多相关文章
- javascript事件监听与事件委托
事件监听与事件委托 在js中,常用到element.addEventListener()来进行事件的监听.但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响.此时,我们可以用事件 ...
- JavaScript事件监听以及addEventListener参数分析
事件监听 在Javascript中事件的监听是用来对某些操作做出反应的方法.例如监听一个按钮的pressdown, 或者获取鼠标左键按下时候鼠标的位置.这些都需要使用监听来完成.监听的函数很简单:ad ...
- 在Javascript中监听flash事件(转)
在Javascript中监听flash事件,其实有两种做法: 1.在特定的环境下(例如专门制作的flash),大家约定一个全局函数,然后在flash的事件中用ExternalInterface.cal ...
- JavaScript的事件监听、捕获和冒泡
在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调函数来进行相关的操作. 而JavaScript中事件监听的方法总共有三种,分别如下: element. ...
- （12）JavaScript之[事件][事件监听]
事件 /** * 事件: * onload 和 onunload 事件在用户进入或离开页面时被触发 * * onchange事件常结合对输入字段的验证来使用 * onmouseover 和 onmou ...
- Javascript事件模型系列（三）jQuery中的事件监听方式及异同点
作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...
- javascript的事件监听与捕获和冒泡
在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调来进行相关的操作. 而js中事件监听方法总共有三种,分别如下所示: element.addEventL ...
- Node.js 教程 05 - EventEmitter(事件监听/发射器 )
目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEm ...
- 让 select 的 option 标签支持事件监听（如复制操作）
这标题,让option支持事件监听,应该不难的呀,有什么好讲的? 其实还是有的,默认在浏览器代码是无法直接对option标签进行操作的,不仅包括JS事件监听,还是CSS样式设置 查了一些资料,姑且认为 ...
随机推荐
- python常用代码积累
一.文件操作 1.判断一个目录是否存在,若不存在则创建 if not os.path.isdir(new_path): os.makedirs(new_path) 2.新建一个文件 f=open(&q ...
- [置顶] 深入浅出Spring（四） Spring实例分析
上次的博文中 深入浅出Spring(二) IoC详解 和 深入浅出Spring(三) AOP详解中,我们分别介绍了一下Spring框架的两个核心一个是IoC,一个是AOP.接下来我们来做一个Sprin ...
- 算法笔记_137:二分图的最大匹配(Java)
目录 1 问题描述 2 解决方案 1 问题描述 何为二分图的最大匹配问题? 引用自百度百科: 首先得说明一下何为匹配: 给定一个二分图G,在G的一个子图M中,M的边集{E}中的任意两条边都不依附于 ...
- unix 网络编程 第五章
个人对unix 网络编程中的代码进行了精简,保留了主要和关键部分. 1 tcpserve01 程序见 https://github.com/juniperdiego/Unix-network-prog ...
- 使用maven拆分项目
在开发环境中,有时需要专人负责专门的模块,其他模块不需接触,这就需要将项目拆分,如下 fund_demo项目具有三个模块,现将主业务core模块单独提出另建一个项目fund_core,拆分时需要注意相 ...
- java工具类之按对象中某属性排序
import java.lang.reflect.Field; import java.lang.reflect.InvocationTargetException; import java.lang ...
- 用C语言实现循环左移和循环右移
有天重建一段代码时,遇到了循环右移指令,不知道用C语言怎么实现,后来得到小伟指点,感谢.. me 15:56:38004BD2C9 8B55 F8 MOV EDX,DWORD PTR SS:[EBP- ...
- FATFS
(一),什么是文件管理系统 答:数据在PC上是以文件的形式储存在磁盘中的.这些数据的形式一般为ASCII码或二进制形式.简单点说就是:管理磁盘上的文件的方法的代码! 如:我们写到SD卡上面的数据 ...
- mysql启动错误之mysql启动报1067错误如何解决
MYSQL启动报1067错误,系统日志中是“服务 mysql 意外停止” Mysql日志中则是:Plugin 'FEDERATED' is disabled. 解决方法: 1.在MY.INI文件中的 ...
- PCIe调试心得_DMA part1
作者 :East FPGA那点事儿 1.PCIe的DMA介绍在PCIe中需要使用DMA的项目,一定要先看XAPP1052,里面包含一个DMA的参考设计,对初学者有极大的帮助. XAPP1052中包含 ...