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 ...
随机推荐
- latex+bibtex+jabref(zz)
很好的的latex使用心得: bibtex现学现卖 http://derecks.blog.sohu.com/118984444.html latex+bibtex+jabref http://blo ...
- 汇文Libsys图书管理系统全版本权限绕过+getshell
由于一个很低级的代码错误,导致可以登录Libsys任意图书系统后台,并且由于代码未做过滤可直接getshell. 该图书管理系统的用户量很大,全国很大一部分院校都在使用此系统.经测试3.5-5.0版本 ...
- phpcms 网站迁移服务器
相信很多人不知道怎么去把PHPCMS V9进行搬家 在本地测试好的phpcms v9网站需要搬到服务器上,可以用以下方法: 1.上传所有的程序文件(如果主机支持压缩包在线解压,那么就打成zip的包,f ...
- OGNL和Struts2标签
OGNL和Struts2标签 你使用过的OGNL 页面获取并输出Action属性<s:property value="userName"/> 页面中获取request保 ...
- 图解equals与hashcode方法相等/不相等的互相关系
图解:比如equals相等的箭头指向hashcode相等,表示equals相等那么必有hashcode相等.而有两个箭头指向别人的表示可能是其中之一,比如hashcode相等,那么有可能equals相 ...
- .NET中的装饰器设计模式
- POJ 2513 Colored Sticks
Colored Sticks Time Limit: 5000MS Memory Limit: 128000K Total Submissions: 28036 Accepted: 7428 ...
- Eclipse设置：背景与字体大小和xml文件中字体大小调整
Eclipse中代码编辑背景颜色修改:代码编辑界面默认颜色为白色.对于长期使用电脑编程的人来说,白色很刺激我们的眼睛,所以改变workspace的背景色,可以使眼睛舒服一些.设置方法如下:1.打开wi ...
- codeforces 258div2 A Game With Sticks(DP)
题目链接:http://codeforces.com/contest/451/problem/A 解题报告:有n跟红色的棍子横着放,m根蓝色的棍子竖着放,它们形成n*m个交点,两个人轮流在里面选择交点 ...
- 他们在军训，我在搞 OI（四）
(怎么自动变成两天一更了?) ——因为我菜啊 T_T Day 5 今天上午刷得爽啊!5 道 NOIP,前四题直接 1A,然而最后一题还是 WA 了一发才 A... 第一题是个简单的贪心,题意大概是 n ...