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 ...
随机推荐
- Get与Post比较
- golang社工库数据扫描程序
https://github.com/xiaojiong/scanfile 演示站点: http://www.weigongkai.com/ 7G数据 2s完成扫描 package scanfil ...
- html中input输入框屏蔽鼠标右键
<label> <input id="ckdestinationId" type="text" oncontextmenu="ret ...
- mybatis 使用resultMap实现数据库的操作
resultType:直接表示返回类型 resultMap:对外部resultMap的引用 二者不能同时使用 创建一个实体类Role和User public class Role { private ...
- Visual Studio Online Integrations-Collaboration
原文:http://www.v ...
- artEditor增加表单提交功能
摘要: artEditor.js是一款移动端的富文本编辑器,支持图片上传,后面会增加表情.小视频等功能.最近有朋友反馈artEditor是否支持表单提交,当然是支持的,在未开发该功能之前,你可以像下面 ...
- cocos基础教程(10)纹理缓存技术
Cocos2d通过调用CCTextureCache或者CCSpriteFrameCache来缓存精灵的纹理. 当这个精灵调用CCTextureCache 或 CCSpriteFrameCache的方法 ...
- LA 3401 - Colored Cubes
解题报告:有n(1<=n<=4)个立方体,每个立方体的每一个面涂有一种颜色,现在要将这些立方体的某些面的颜色重新涂一下,使得这n个立方体旋转到某一种状态下,对应的面的颜色都相同. 这题可以 ...
- [HDU5015]233 Matrix
[HDU5015]233 Matrix 试题描述 In our daily life we often use 233 to express our feelings. Actually, we ma ...
- 转SISD、MIMD、SIMD、MISD计算机的体系结构的Flynn分类法
1. 计算平台介绍 Flynn于1972年提出了计算平台的Flynn分类法,主要根据指令流和数据流来分类,共分为四种类型的计算平台,如下图所示: 单指令流单数据流机器(SISD) SISD机器是一种传 ...