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,遇见事件监听则执行. 事件委托:原因——父元素 ...
随机推荐
- OpenCV学习(34) 点到轮廓的距离
在OpenCV中,可以很方便的计算一个像素点到轮廓的距离,计算距离的函数为: double pointPolygonTest(InputArray contour, Point2f pt, bool ...
- Python并发编程-redis-3.0.5 源码安装
1.简介 Remote Dictionary Server(Redis)是一个基于 key-value 键值对的持久化数据库存储系统.redis 和 Memcached 缓存服务很像,但它支持存储的 ...
- mybatis异常 ：元素内容必须由格式正确的字符数据或标记组成。
今天同事写一个查询接口的时候,出错:元素内容必须由格式正确的字符数据或标记组成. 错误原因:mybatis查询的时候,需要用到运算符 小于号:< 和 大于号: >,在mybatis配置文 ...
- 游戏服务器框架：Leaf/go
Leaf 是一个使用 Go 语言开发的开源游戏服务器框架,注重运行效率并追求极致的开发效率.Leaf 适用于几乎所有的游戏类型.其主要的特性: 良好的使用体验.Leaf 总是尽可能的提供简洁和易用的接 ...
- THINKPHP URL模块大小写导致404问题
最近我使用THINKPHP开发了一个项目在本地的集成开发环境wampserver做开发时并没有出现问题 上传到linux系统也没有出现问题,但当上传到windows平台上就出现了问题"文件4 ...
- C++中用完需要释放掉内存的几个类
BSTR BSTR bstrXML = NULL; //用完以后,或者 catch段中 if(bstrXML) ::SysFreeString(result); VARIANT VARIANT v ...
- jquery ui autocomplete 模拟百度搜索自动提示
直接上代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=" ...
- lua接收图片并进行md5处理
需要luacurl(http://luacurl.luaforge.net/)和MD5两个库函数 curl = require("luacurl") require("m ...
- Vector 多字段排序的Java实现
要求实现: Vector 多字段排序,其中首元素不参与排序,第一二三字段升序,空排到前面. //这里是Vector的元素定义 public class AVectorElement { private ...
- 【转载】Remote System Explorer Operation总是运行后台服务，卡死eclipse解决办法
原来是eclipse后台进程在远程操作,就是右下角显示的“Remote System Explorer Operation”.折腾了半天,在Stack Overflow找到答案(源地址).把解决方案翻 ...