js 事件监听 兼容浏览器
js 事件监听 兼容浏览器 ie 用 attachEvent w3c(firefox/chrome) 用 addEventListener
删除事件监听 ie 用 detachEven removeEventListener
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<script type="text/javascript">
/*问题：我们可不可以对同一对象的同一事件绑定多个处理程序？
dom.onclick = function fn1() {}
dom.onclick = function fn2() {} 答：可以，采用事件监听的方式*/
// ie版
/* window.onload= function () {
document.getElementById("img1").attachEvent('onclick',function(){
alert(111);
});
document.getElementById("img1").attachEvent('onclick',function(){
alert(222);
});
}*/
// w3c版
/* window.onload= function () {
document.getElementById("img1").addEventListener('click',function(){
alert(111);
});
document.getElementById("img1").addEventListener('click',function(){
alert(222);
});
}*/ function $(id){
return document.getElementById(id);
}
function fn1(){
alert(111);
}
function fn2(){
alert(222);
}
//事件兼听 兼容浏览器版
function addEvent(obj,type,callback){
if(obj.addEventListener){
obj.addEventListener(type,callback); //w3c
}else{
obj.attachEvent('on'+type,callback); // ie onclick 多了一个on
}
}
//删除事件监听 兼容浏览器版
function removeEvent(obj,type,callback){
if(obj.removeEventListener){ //obj.removeEventListener 这里没有（） 【重点】
obj.removeEventListener(type,callback); //w3c
}else{
obj.detachEvent('on'+type,callback); // ie onclick 多了一个on
}
} window.onload= function () {
addEvent($("img1"),'click',fn1);
addEvent($("img1"),'click',fn2);
$("button1").onclick=function(){
removeEvent($("img1"),'click',fn1);
}
} </script>
</head>
<body>
<img src="data:image/1.jpg" id="img1"/>
<input type="button" id="button1">
</body>
</html>
js 事件监听 兼容浏览器的更多相关文章
- js事件监听机制(事件捕获)总结
在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...
- js事件监听机制(事件捕获)
在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...
- js 事件监听 冒泡事件
js 事件监听 冒泡事件 的取消 [自己写框架时,才有可能用到] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitiona ...
- js事件监听-addEventListener (w3c标准) 和 attachEvent（ie）
研究了一个小时,没看懂这两个属性 window.onload = function(){ var oDiv = document.getElementById("J_myDiv") ...
- js事件监听
/* 事件监听器 addEventListener() removeEventListener() 传统事件绑定: 1.重复添加会,后添加的后覆盖前面的. */ 示例代码中的html结构: <b ...
- js 事件监听封装
var eventUtil={//添加句柄 //element,节点 //type,事件类型 //handler,函数 addHandler:function(element,type,handler ...
- 前端学习历程--js事件监听
一.事件监听使用场景 1.事件触发多个方法的时候,后一个方法会把前一个方法覆盖掉. window.onload = function(){ var btn = document.getElement ...
- Js事件监听封装（支持匿名函数）
先看demo:http://liutian1937.github.io/demo/EventListen.html/*绑定事件与取消绑定*/ var handleHash = {}; var bind ...
- js input监听兼容事件
$('#phoneNumber').on('input',function() { var valueP = $(this).attr('value'); if(valueP.length == 11 ...
随机推荐
- 使用Ｉ/O 系统调用－－copy.c
作为Linux/Unix 系统编程入门,小生按照自己可以理解的方式,改写了源copy.c源代码来自:Linux/UNIX 系统编程手册 上册 P57 #include <stdio.h>/ ...
- Python序列的切片操作与技巧
切片操作 对于具有序列结构的数据来说,切片操作的方法是:consequence[start_index: end_index: step]. start_index: 表示是第一个元素对象,正索引位置 ...
- sql server 复制需要有实际的服务器名称才能连接到服务器（转载）
今天在做sql server 2005 复制的时候,提示复制需要有实际的服务器名称才能连接到服务器……的消息,一开始不知道什么意思!后来在网上查了一下才知道,原来是以前我把机器改过名 字.用selec ...
- APN APN指一种网络接入技术，是通过手机上网时必须配置的一个参数，它决定了手机通过哪种接入方式来访问网络。
apn 锁定 本词条由“科普中国”百科科学词条编写与应用工作项目 审核 . APN指一种网络接入技术,是通过手机上网时必须配置的一个参数,它决定了手机通过哪种接入方式来访问网络. 对于手机用户来说,可 ...
- seajs之seajs-debug坑
最近遇到两个关于seajs-debug的坑 一个与preload有关,详情见https://github.com/seajs/seajs-debug/issues/15 一个与map时间戳有关,详情见 ...
- 繁华模拟赛 Vicent坐电梯
/*n<=5000这样就不能用O(n)的转移了,而是要用O(1)的转移.注意我们每次的转移都来自一个连续的区间,而且我们是求和区间求和?前缀和!令sum[step][i]表示f[ste ...
- IE下的haslayout特性
什么是hasLayout?hasLayout是IE特有的一个属性.很多的ie下的css bug都与其息息相关.在ie中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织 ...
- java笔记--适配器模式的运用
适配器模式的运用 --如果朋友您想转载本文章请注明转载地址"http://www.cnblogs.com/XHJT/p/3884785.html "谢谢-- 主要应用: 可以在符合 ...
- ThinkPHP 分页实现
TP3.2框架手册,有一个数据分页,不过每次都要写太多的代码,还有中文设置等有些麻烦,做为程序开发者,有必要整理下: O.先看效果图 一.分页方法 /** * TODO 基础分页的相同代码封装,使前台 ...
- Iphone和iPad适配, 横竖屏
竖屏情况下: [UIScreen mainScreen].bounds.size.width = 320 [UIScreen mainScreen].bounds.size.width = 568 横 ...