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 ...
随机推荐
- MyBatis查询传一个参数时报错：There is no getter for property named 'sleevetype' in 'class java.lang.Integer
用MyBatis进行查询,传入参数只有一个时(非Map)如int,报错 There is no getter for property named 'sleevetype' in 'class jav ...
- Nginx 服务器性能参数设置
Nginx服务器性能调优 Nginx 配置文件 1.根据CPU内核数设置worker进程个数,以12核CPU为例,设置11个worker进程: worker_processes 11; worker_ ...
- LinkedList和ArrayList的区别/何时使用LinkedList和ArrayList
1.ArrayList是实现了基于动态数组的数据结构,LinkedList基于链表的数据结构. 2.对于随机访问get和set,ArrayList觉得优于LinkedList,因为LinkedList ...
- 下载安装resin-3.X服务器并配置到myeclipse
前提是先安装jdk,具体自己安装. 1.到resin官网http://www.caucho.com/download/下载相应压缩包,比如resin-3.2.0.zip 2.解压下载的resin-3. ...
- linux用命令行来执行php程序
<?php $start = microtime(true); for($i=0 ; $i <10000 ; $i ++){ // echo '正在执行第'.$i.'个操作! '.PHP_ ...
- 混合应用中的javascript实践
混合应用中的javascript实践 混合应用(hybird app) 在几年前便进入大众视野,近来更是越发风生水起,深受人民群众的喜爱. 目录 概念 什么是混合应用 混合方式 交互 方法注入 参数传 ...
- javascript，css延迟加载器
/** * js/css LazyLoad * * 变量hash记录已经加载过的资源,避免重复加载 * * Z.loadScript('a.js', function() { ... }) * * Z ...
- Nginx安装与配置文件解析
导读 Nginx是一款开放源代码的高性能HTTP服务器和反向代理服务器,同时支持IMAP/POP3代理服务,是一款自由的软件,同时也是运维工程师必会的一种服务器,下面我就简单的说一下Nginx服务器的 ...
- node.js+websocket实现简易聊天室
(文章是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) websocket提供了一种全双工客户端服务器的异步通信方法,这种通信方法使用ws或者wss协议,可 ...
- [BZOJ1064][Noi2008]假面舞会
[BZOJ1064][Noi2008]假面舞会 试题描述 一年一度的假面舞会又开始了,栋栋也兴致勃勃的参加了今年的舞会.今年的面具都是主办方特别定制的.每个参加舞会的人都可以在入场时选择一 个自己喜欢 ...