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,遇见事件监听则执行. 事件委托:原因——父元素 ...
随机推荐
- java.lang.ClassNotFoundException: Didn't find class "stu.love.neihan.MainActivity" on path: DexPathL
java.lang.ClassNotFoundException: Didn't find class "stu.love.neihan.MainActivity" on path ...
- 系列文章 -- OpenCV入门教程
<OpenCV3编程入门>内容简介&勘误&配套源代码下载 [OpenCV入门教程之十八]OpenCV仿射变换 & SURF特征点描述合辑 [OpenCV入门教程之 ...
- Lambda表达式 简介 语法 示例 匿名内部类
在AS中使用 Lambda 表达式 Demo地址:https://github.com/baiqiantao/MultiTypeTest.git Gradle(Project级别)中添加classpa ...
- FM同步数据库中结构已经发生变化的表
接触Cognos很久了,最近遇到一个小问题. 在FM模型设计的过程中,有一张表jd_f_order.之后为了更全面的分析这个数据,在这个事实表中引入了一个新的字段商品类型字段,结构如图 但是由于jd_ ...
- 微信小程序开发：设置消息推送
开发设置中,启用并设置消息推送配置后,用户发给小程序的消息以及开发者需要的事件推送,都将被微信转发至该服务器地址中. 不过照着说明去操作,即使按照最简单的明文方式去设置,还是提示Token验证失败.仔 ...
- [Algorithm] Find first missing positive integer
Given an array of integers, find the first missing positive integer in linear time and constant spac ...
- [Sass] Level 3: Mixin -- Ex
When to use MIXIN? Better way to use MIXIN is when you deal with browser prefiex, for example: @mixi ...
- MySQL监控和预警
https://blog.csdn.net/zhaowenbo168/article/details/53219860 1.摘要 本人从事Java Web开发,在项目开发中会用到很多中间件,本文主要介 ...
- （LeetCode 153）Find Minimum in Rotated Sorted Array
Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 migh ...
- 【ACM】杭电ACM题一直WA求高手看看代码
数据测试了好几个都没问题,可以就是WA不让过,检测了2个小时还是没发现有什么问题T_T!!求高手看看代码,小弟在此谢谢各位哦! #include <stdio.h> #include &l ...