JavaScript和JQuery中的事件\委托链\事件冒泡\事件捕获,兼容所有浏览器
有做过北大青鸟培训讲师经验的我，如今在一家公司做技术部经理的职位，发现有很多程序员的基本功相当糟糕，在组织企业内部培训时讲解了一些案例，总结了一些经典代码，希望对自己和有需要的人提供一些帮助吧：
JavaScript版本:
DOM0事件不支持委托链
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM0事件不支持委托链</title>
<script language="javascript" type="text/javascript">
window.onload = function () {
//DOM0事件不支持委托链
document.getElementById("child").onclick = function () {
output("abc");
};
document.getElementById("child").onclick = function () {
output("123");
};
document.getElementById("child").onclick = function () {
output("def");
};
document.getElementById("child").onclick = function () {
output("456");
};
}; function output(text) {
document.getElementById("content").innerHTML += text + "<br/>";
}
</script>
</head>
<body id="body">
<div id="parent">
<div id="child">
点击这里
</div>
</div>
<div id="content">
</div>
</body>
</html>
event01
DOM2事件支持委托链
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM2事件支持委托链</title>
<script language="javascript" type="text/javascript">
window.onload = function () {
//DOM2事件支持委托链
if (document.all) {
document.getElementById("child").attachEvent("onclick", function () {
output("IE:abc");
});
document.getElementById("child").attachEvent("onclick", function () {
output("IE:123");
});
document.getElementById("child").attachEvent("onclick", function () {
output("IE:def");
});
document.getElementById("child").attachEvent("onclick", function () {
output("IE:456");
});
} else {
document.getElementById("child").addEventListener("click", function () {
output("Other:abc");
});
document.getElementById("child").addEventListener("click", function () {
output("Other:123");
});
document.getElementById("child").addEventListener("click", function () {
output("Other:def");
});
document.getElementById("child").addEventListener("click", function () {
output("Other:456");
});
}
}; function output(text) {
document.getElementById("content").innerHTML += "注意IE和Other的顺序：" + text + "<br/>";
}
</script>
</head>
<body id="body">
<div id="parent">
<div id="child">
点击这里
</div>
</div>
<div id="content">
</div>
</body>
</html>
event02
采用DOM0方式添加所有html事件,支持取消事件冒泡
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>采用DOM0方式添加所有html事件,支持取消事件冒泡</title>
<script src="js/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
window.onload = function () {
//给所有DOM对象添加所有html的click事件，采用DOM0方式
var tags = document.getElementsByTagName("*");
for (var i = 0 ; i < tags.length ; i++) {
var tag = tags[i];
tag.onclick = onEvent;
}
};
function onEvent(event) {
//window.alert(event);//IE不支持
//return; //event = event ? event : window.event;
//window.alert(event);//都支持
//return; //window.alert(event.target);//IE不支持
//return; //event = event ? event : window.event;
//target = event.target ? event.target : event.srcElement;
//window.alert(target);//都支持
//return; //event = event ? event : window.event;
//target = event.target ? event.target : event.srcElement;
//output("事件源:" + target.id + "," + target.tagName + ",事件对象：" + this.id);//DOM0会产生冒泡
//return; event = event ? event : window.event;
target = event.target ? event.target : event.srcElement;
output("事件源:" + target.id + "," + target.tagName + ",事件对象：" + this.id);//DOM0会产生冒泡 //支持取消事件冒泡
if (event.cancelable) {
event.stopPropagation();//其他浏览器取消事件冒泡
} else {
event.cancelBubble = true;//IE取消事件冒泡
}
};
function output(text) {
document.getElementById("content").innerHTML += "" + text + "<br/>";
}
</script>
</head>
<body id="body">
<div id="parent">
<div id="child">
点击这里
</div>
</div>
<div id="content">
</div>
</body>
</html>
event03
采用DOM2方式添加所有html事件,支持取消事件冒泡
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>采用DOM2方式添加所有html事件,支持取消事件冒泡</title>
<script language="javascript" type="text/javascript">
window.onload = function () {
//给所有DOM对象添加所有html的click事件，采用DOM2方式
var tags = document.getElementsByTagName("*");
for (var i = 0 ; i < tags.length ; i++) {
(function () { //增加闭包，解决IE浏览器onEvent方法定义里面的this都指向了每一个不同的事件对象，而不是都指向了同一个content事件对象，
var tag = tags[i];
//DOM2方式
if (document.all) {
//IE浏览器
//tag.attachEvent("onclick", onEvent);//onEvent里面的this指向window
//tag.attachEvent("onclick", function () {
// onEvent.call(tag);//onEvent方法定义里面的this都指向了content，因为没有使用闭包
//});
tag.attachEvent("onclick", function () {
onEvent.call(tag);//使用闭包的方式解决this的问题，在var = tags[i];上面增加闭包的使用
});
} else {
tag.addEventListener("click", onMaoPaoEvent);//事件冒泡，false可以不写
//tag.addEventListener("click", onMaoPaoEvent, false);//事件冒泡
tag.addEventListener("click", onBuHuoEvent, true);//事件捕获
}
})();
}
};
function onEvent(event) {
event = event ? event : window.event;
target = event.target ? event.target : event.srcElement;
output("事件源:" + target.id + "," + target.tagName + ",事件对象：" + this.id);//DOM0会产生冒泡
return;
//同样支持取消事件冒泡
if (event.cancelable) {
event.stopPropagation();//其他浏览器取消事件冒泡
} else {
event.cancelBubble = true;//IE取消事件冒泡
}
};
function onMaoPaoEvent(event) {
event = event ? event : window.event;
target = event.target ? event.target : event.srcElement;
output("事件冒泡-->事件源:" + target.id + "," + target.tagName + ",事件对象：" + this.id);//DOM0会产生冒泡
return;
//同样支持取消事件冒泡
if (event.cancelable) {
event.stopPropagation();//其他浏览器取消事件冒泡
} else {
event.cancelBubble = true;//IE取消事件冒泡
}
};
function onBuHuoEvent(event) {
event = event ? event : window.event;
target = event.target ? event.target : event.srcElement;
output("事件捕获-->事件源:" + target.id + "," + target.tagName + ",事件对象：" + this.id);//DOM0会产生捕获
return;
//同样支持取消事件捕获
if (event.cancelable) {
event.stopPropagation();//其他浏览器取消事件冒泡
} else {
event.cancelBubble = true;//IE取消事件冒泡
}
};
function output(text) {
document.getElementById("content").innerHTML += "" + text + "<br/>";
}
</script>
</head>
<body id="body">
<div id="parent">
<div id="child">
点击这里
</div>
</div>
<div id="content">
</div>
</body>
</html>
event04
JQuery版本:
DOM0事件不支持委托链
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM0事件不支持委托链</title>
<script src="/js/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
//DOM0事件不支持委托链
$("#child")[].onclick = function (event) {
output("abc");
};
$("#child")[].onclick = function (event) {
output("");
};
$("#child")[].onclick = function (event) {
output("def");
};
$("#child")[].onclick = function (event) {
output("");
};
});
function output(text) {
$("#content").append(text + "<br/>");
}
</script>
</head>
<body id="body">
<div id="parent">
<div id="child">
点击这里
</div>
</div>
<div id="content">
</div>
</body>
</html>
jquery_event01
DOM2事件支持委托链
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM2事件支持委托链</title>
<script src="/js/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
//DOM2事件支持委托链
$("#child").bind("click", function (event) {
output("abc");
});
$("#child").bind("click", function (event) {
output("");
});
$("#child").bind("click", function (event) {
output("def");
});
$("#child").bind("click", function (event) {
output("");
});
//第二种方式也支持委托链
//$("#child").click(function (event) {
// output("abc");
//});
//$("#child").click(function (event) {
// output("123");
//});
//$("#child").click(function (event) {
// output("def");
//});
//$("#child").click(function (event) {
// output("456");
//});
});
function output(text) {
$("#content").append(text + "<br/>");
}
</script>
</head>
<body id="body">
<div id="parent">
<div id="child">
点击这里
</div>
</div>
<div id="content">
</div>
</body>
</html>
jquery_event02
采用DOM0方式添加所有html事件,支持取消事件冒泡
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>采用DOM0方式添加所有html事件,支持取消事件冒泡</title>
<script src="/js/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("*").each(function (index, item) {
item.onclick = function (event) {
event = event ? event : window.event;
target = event.target ? event.target : event.srcElement;
output("事件源:" + target.id + "," + target.tagName + ",事件对象：" + this.id);//DOM0会产生冒泡 //支持取消事件冒泡
if (event.cancelable) {
event.stopPropagation();//其他浏览器取消事件冒泡
} else {
event.cancelBubble = true;//IE取消事件冒泡
}
};
});
});
function output(text) {
$("#content").append(text + "<br/>");
}
</script>
</head>
<body id="body">
<div id="parent">
<div id="child">
点击这里
</div>
</div>
<div id="content">
</div>
</body>
</html>
jquery_event03
采用DOM2方式添加所有html事件,支持取消事件冒泡
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>采用DOM2方式添加所有html事件,支持取消事件冒泡</title>
<script src="/js/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("*").each(function (index, item) {
$(item).bind("click", function (event) {
output("事件源:" + event.target.id + "," + event.target.tagName + ",事件对象：" + event.currentTarget.id);//DOM2会产生冒泡
//支持取消事件冒泡
event.stopPropagation();
});
//第二种方式也支持
//$(item).click(function (event) {
// output("事件源:" + event.target.id + "," + event.target.tagName + ",事件对象：" + event.currentTarget.id);//DOM2会产生冒泡
// //支持取消事件冒泡
// //event.stopPropagation();
//});
});
});
function output(text) {
$("#content").append(text + "<br/>");
}
</script>
</head>
<body id="body">
<div id="parent">
<div id="child">
点击这里
</div>
</div>
<div id="content">
</div>
</body>
</html>
jquery_event04
JavaScript和JQuery中的事件\委托链\事件冒泡\事件捕获,兼容所有浏览器的更多相关文章
- jQuery中animate动画第二次点击事件没反应
jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...
- javascript 事件委托,jq,js模拟事件
<!DOCTYPE> <html> <head> <title></title> <script src="Scripts/ ...
- javascript和jquery中获取列表的索引
网页中的图片预览一般都需要获取图片列表的索引,或则图片对应的标签的索引,以此达到点击相应的标签获取索引,显示相应的图片 列表有很多种表达的方式,一种是 <ul> <li>苹果& ...
- JavaScript及jQuery中的各种宽高属性图解
文/poetries(简书作者)原文链接:http://www.jianshu.com/p/60332df38393 著作权归作者所有,转载请联系作者获得授权, 并标注“简书作者”. 作者声明:本 ...
- jQuery 学习笔记（5）（事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件）
1.事件绑定: .eventName(fn) //编码效率略高,但部分事件jQuery没有实现 .on(eventName, fn) //编码效率略低,所有事件均可以添加 注意点:可以同时添加多个相同 ...
- jquery 事件委托（利用冒泡）
将事件绑定在父元素上,格式$(父元素).on("事件名称","子元素选择器",function(方法体){}) <!DOCTYPE html> &l ...
- jquery中为动态增加的元素添加事件
// html代码 <ul id="main"> </ul> // js代码 $(function(){ // 动态添加html代码 $("#ma ...
- 对事件委托绑定click的事件的解绑
大家都知道解绑事件的jquery写法,很简单: $("xxx").unbind("click"); 然后对于事件委托式的事件绑定,亲测,这种解绑方法是无效的, ...
- 关于事件委托和时间冒泡（以及apply和call的事项）
搜索事件委托和事件冒泡,网上一大堆乱七八糟的解释,当然意思都对,没毛病. but,真的无聊. 事件冒泡:事件会从点击的元素开始依次向上流出,直到html,遇见事件监听则执行. 事件委托:原因——父元素 ...
随机推荐
- unity 3D游戏场景转换
//////////////////2015/07/07//////// /////////////////by xbw/////////////// ///////////////环境 unity ...
- 解决：HTTP 错误 404.2 - Not Found. 由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置，无法提供您请求的页面
错误重现: 在发布网站的过程中,虽然不是第一次发布了,但是还是遇到了很多的问题.为了以后可以轻松解决此类问题还是积累下来比较好. 问题:HTTP 错误 404.2 - Not Found. 由于 We ...
- 附 5 springboot之配置文件
本文转载自http://www.jianshu.com/p/80621291373b,作者:龙白一梦 我的boss 代码从开发到测试要经过各种环境,开发环境,测试环境,demo环境,线上环境,各种环境 ...
- 一个巧妙的方法实现elementUI的table的行选中
问题背景:点击上面的框,选中下面对象的行数据 刚开始考虑使用的是table的事件:toggleRowSelection,但是发现一个奇怪的现象 <div v-if="orderData ...
- SqlServer 在查询结果中如何过滤掉重复数据
问题背景 在一个多表查询的sql中正常情况下产生的数据都是唯一的,但因为数据库中存在错误(某张表中存在相同的外键ID)导致我这边查询出来的数据就会有重复的问题 下面结果集中UserID:15834存在 ...
- 利用js_API 执行对html文档元素的属性的CRUD操作
转自:http://my.oschina.net/felay/blog/303470 <!DOCTYPE html> <html> <head> <meta ...
- DispatcherTimer
1.IsEnabled 表示计时器是否已经启动. 2.DispatcherTimer处于当前线程的管理,不会新建一个线程专门用于计时操作,也就是说,当前线程可能会阻塞计时器.因此,Dispatcher ...
- 最新phpstudy2016安装教程及流程
最新phpstudy2016安装教程及流程,帮助站长快速搭建网站服务器平台! phpstudy软件简介 该程序包集成最新的Apache+Nginx+LightTPD+PHP+MySQL+phpMyAd ...
- linux可视化桌面安装
[root@VM_193_201_centos ~]# yum grouplist Loaded plugins: fastestmirror, langpacks There is no insta ...
- fcntl的区域锁定
文件中的某个部分被锁定了,但其他的程序可以访问这个文件的其他部分,称为文件段锁定或文件区域锁定.经常使用文件区域锁定是fcntl函数. #include <sys/types.h> #in ...