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实现将Excel导入数据库和从数据库中导出为Excel
实现的功能: 用Java实现从Excel导入数据库,如果存在就更新 将数据库中的数据导出为Excel 1.添加jxl.jar mysql-connector-java.1.7-bin.jar包到项目的 ...
- iOS: 音效和音乐的播放，封装的工具类
在iOS中音频播放从形式上可以分为音效播放和音乐播放.前者主要指的是一些短音频播放,通常作为点缀音频,对于这类音频不需要进行进度.循环等控制.后者指的是一些较长的音频,通常是主音频,对于这些音频的播放 ...
- C#操作AD及Exchange Server总结(一)
这篇博客的目的:根据亲身项目经历,总结对AD及Exchange Server的操作,包括新建AD用户,设置密码,为AD用户创建邮箱等. 本文完全原创,转载请说明出处,希望对大家有用. 文档目录: 测试 ...
- [leetcode]Copy List with Random Pointer @ Python
原题地址:https://oj.leetcode.com/problems/copy-list-with-random-pointer/ 题意: A linked list is given such ...
- IPC$ 测试与防范
物理机系统:Win7 虚拟机系统:Win2003 Netstat –an 查看本机端口 Netstat –ano 查看本机端口+PID 通过本机上操作(比如登录网站),然后命令,查看对方IP以及端口 ...
- [Node.js] Load balancing a Http server
Let's see how to do load balancing in Node.js. Before we start with the solution, you can do a test ...
- [Node.js]28. Level 5: Express Server
Now let's create an express server which queries out for this search term and just returns the json. ...
- 一段遍历4X4表格，取出每个单元格内容组合成文本的JS代码
遍历表格的JS容易忘,留个随笔以备忘. var tableData=""; var table=document.getElementById("XXTableId ...
- Linux：编译动态库时遇到的错误relocation R_X86_64_32 against `a local symbol'
编译动态库时遇到如下错误: ... ... relocation R_X86_64_32 against `a local symbol' can not be used when making a ...
- NYoj-119-士兵杀敌（3）-RMQ算法
士兵杀敌(三) 时间限制:2000 ms | 内存限制:65535 KB 难度:5 描写叙述 南将军统率着N个士兵,士兵分别编号为1~N,南将军常常爱拿某一段编号内杀敌数最高的人与杀敌数最低的人进 ...