【修真院小课堂】——如何阻止时间冒泡冒泡与默认事件
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
1.背景介绍
1.什么是事件?
事件是文档或浏览器窗口中发生的特定的交互瞬间。
2.知识剖析
1.什么是冒泡事件?
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序, 如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播, 从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。
2.什么是默认事件?
浏览器的一些默认的行为。例如:点击超链接跳转,滑动滚轮控制滚动条
3.常见问题
如何阻止事件冒泡和默认事件
4.解决方案
阻止事件冒泡——EVENT.STOPPROPAGATION()
阻止事件冒泡——CANCELBUBBLE
阻止默认事件——EVENT.PREVENTDEFAULT()
阻止默认事件——RETURNVALUE
5.编码实现
1.阻止事件冒泡
//IE9+,其他主流浏览器
// var event = event || window.event;
// event.stopPropagation();
//火狐未实现
// window.event.cancelBubble = true;
//不建议滥用,jq中可以同时阻止冒泡和默认事件
// return false;
//兼容模式
// stopBubble(event);
function stopBubble(e) {
//如果提供了事件对象,则这是一个非IE浏览器
if (e && e.stopPropagation){
// 因此它支持W3C的stopPropagation()方法
e.stopPropagation();
}else{
//否则,我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
}
2.阻止默认事件
//全支持
// event.preventDefault();
//该特性已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性。
// window.event.returnValue = false;
//不建议滥用,jq中可以同时阻止冒泡和默认事件
// return false;
// 兼容
// stopDefault(event);
6.拓展思考
1.什么是事件捕获?
事件捕获:事件由根元素获取并沿DOM树向下分发 最不具体的逐级传递到最具体的 举例 html -> body -> div -> span
2.不是所有的事件都能冒泡。
以下事件不冒泡:blur、focus、load、unload。
3.事件冒泡作用?
允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。
7.参考文献
参考资料http://www.cnblogs.com/Essence/p/4266618.html
参考资料:https://www.jb51.net/article/42492.htm
8.更多讨论
Q1.冒泡事件与捕获事件的区别?
A1:
1.事件冒泡:事件由子元素获取并沿DOM树向上传播
2.事件捕获:事件由根元素获取并沿DOM树向下分发
事件冒泡:最集体的--逐级传递到最不具体的 span -> div -> body ->html
时间捕获:最不具体的逐级传递到最具体的 html -> body -> div -> span
Q2:用冒泡还是捕获?
A2:为了兼容IE低版本浏览器最好用冒泡,而且事件的默认方式是冒泡;
Q3:事件代理(委托)的原理及优缺点?
A3: 原理:利用冒泡原理,将元素的事件绑定到父级元素上;