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 ...
随机推荐
- memcached安装和php-memcached扩展安装.update.2014-08-15
服务器端主要是安装memcache服务器端,目前的最新版本是 memcached-1.3.0 .下载官网:http://www.danga.com另外,Memcache用到了libevent这个库用于 ...
- Entity Framework 简单增删改操作
前言 在 Entity Framework 简单查询操作 中主要是学习了在Entity Framework中的几种不同模式的查询操作,现在主要来学习一下简单的增加.删除.修改操作. 增加 在EF中添加 ...
- WP8版微信5.4发布 新增夜间模式 暂没小视频
经过近一个月的内测,WP8版的微信终于更新了v 5.4版本.新增聊天中的照片墙.识别图片二维码.夜间模式等功能,还对资源占用情况进行了优化,让程序可以更流畅的在低配置设备上运行. 不过,WP8版微信5 ...
- Hadoop之 hdfs 系统
一.NameNode维护着2张表: 1.文件系统的目录结构,以及元数据信息 2.文件与数据块列表的对应关系 存放在fsimage中,在运行的时候加载到内存中的. 操作日志写到edits中 二.Da ...
- nginx-upload-module模块实现文件断点续传
导读 每当我们想简单的实现文件上传功能,而又不使用其他的语言(比如PHP.Java),或者想实现文件的断点续传.这个时候Nginx的一个模块nginx-upload-module就能满足我们的需求. ...
- NOIP 2011 Day 1 部分题解 (Prob#1 and Prob#2)
Problem 1: 铺地毯 乍一看吓cry,地毯覆盖...好像是2-dims 线段树,刚开头就这么难,再一看,只要求求出一个点,果断水题,模拟即可.(注意从标号大的往小的枚举,只要有一块地毯符合要求 ...
- Scrapy and Selenium
How to scrapy js? scrapy结合webkit抓取js生成的页面 http://www.cnblogs.com/Safe3/archive/2011/10/19/2217965.ht ...
- http协议学习系列
深入理解HTTP协议(转) http://www.blogjava.net/zjusuyong/articles/304788.html http协议学习系列 1. 基础概念篇 1.1 介绍 H ...
- 《ASP.NET1200例》C# WINFORM程序的三层架构如何建立的。
先添加-新建项目-windows应用程序,然后在右边的解决方案资源管理器上面,在当前的解决方案上面右击,点,添加-新建项目-类库,分别建立.DAL,BLL,Model三个项目,然后,在DAL项目上右击 ...
- VIM中的折叠命令
参考:http://blog.csdn.net/bruce0532/article/details/8497284 za:在折叠与展开间自由转换 zf:创建折叠 示例:zf 3j #本行及以下3 ...