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,遇见事件监听则执行. 事件委托:原因——父元素 ...
随机推荐
- 【STL学习】堆相关算法详解与C++编程实现（Heap）
转自:https://blog.csdn.net/xiajun07061225/article/details/8553808 堆简介 堆并不是STL的组件,但是经常充当着底层实现结构.比如优先级 ...
- Python爬虫之selenium爬虫，模拟浏览器爬取天猫信息
由于工作需要,需要提取到天猫400个指定商品页面中指定的信息,于是有了这个爬虫.这是一个使用 selenium 爬取天猫商品信息的爬虫,虽然功能单一,但是也算是 selenium 爬虫的基本用法了. ...
- GIT 恢复已删除的提交
在Git中一切的操作都是可以恢复的,包括已经删除的提交,今天在做一个项目时就遇到了这种问题,也不知道是怎么回事不小心就把上午提交的所有代码都删除了,于是赶紧通过git log来查看日志,但奇怪的是当时 ...
- (链表)反转链表Reverse List
逆转链表是简单而又简单的链表问题,其问题的方法之一可以设置三个指针,一个指向当前结点,一个指向前驱结点,一个指向后继指针 代码如下: class Solution { public: ListNode ...
- VMware12 中安装MS-DOS 7.10
按一下步骤进行安装: 选择虚拟机,然后如下图选择“ 编辑虚拟机设置 ”. 弹出的编辑框中,选择“CD/DVD”中的“使用ISO镜像文件”,然后选择“浏览”,打开MS-DOS7.10.iso的ISO镜像 ...
- 把mysql数据库生成数据字典，直接可用
便于查看数据库表.字段,做一个数据字典是很有必要的,下面只需要简单更改下配置就可以用了,样式也是挺好的. <?php header('content-type:text/html;charset ...
- 批量上传插件(flash,html5,jquery)
1.jQuery File Upload 官网:http://blueimp.github.com/jQuery-File-Upload/ 在线示例:http://blueimp.github.com ...
- 算法笔记_176:历届试题 最大子阵(Java)
目录 1 问题描述 2 解决方案 1 问题描述 问题描述 给定一个n*m的矩阵A,求A中的一个非空子矩阵,使这个子矩阵中的元素和最大. 其中,A的子矩阵指在A中行和列均连续的一块. 输入格式 输入 ...
- 算法笔记_172:历届试题 波动数列(Java)
目录 1 问题描述 2 解决方案 1 问题描述 问题描述 观察这个数列: 1 3 0 2 -1 1 -2 ... 这个数列中后一项总是比前一项增加2或者减少3. 栋栋对这种数列很好奇,他想知道长度 ...
- MySQL auto_increment_increment 和 auto_increment_offset
参考这一篇文章:(不过我对这一篇文章有异议) http://blog.csdn.net/leshami/article/details/39779509 1:搭建测试环境 create table t ...