JavaScript事件处理模型 — 事件冒泡、捕获
事件冒泡
结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）
事件捕获
结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自底向上） IE没有捕获事件
触发顺序
先捕获，后冒泡 focus，blur，change，submit，reset，select 等事件不冒泡
例子： CodePen链接
这里有3个嵌套的div，每一个div都绑定了一个点击时间
<div class="outer"><div class="center"><div class="inner"></div></div></div>var oOuter = document.getElementsByClassName('outer')[0];var oCenter = document.getElementsByClassName('center')[0];var oInner = document.getElementsByClassName('inner')[0];var isCatchStyle = false;oOuter.addEventListener('click', function(){console.log('outer');}, isCatchStyle);oCenter.addEventListener('click', function(){console.log('center');}, isCatchStyle);oInner.addEventListener('click', function(){console.log('inner');}, isCatchStyle);
这三个重叠的div从内到外分别为 inner，center，outer
我们知道，addEventListener（type, function , isCatchStyle）方法的第三个参数设置为true就在捕获过程中执行，反之就在冒泡过程中执行处理函数。
当第三个参数是false，事件在冒泡过程被捕获，我们点击最内层绿色div，可以看到绑定事件的执行顺序是从内向外的。
当第三个参数是true，事件在捕获过程被触发，我们点击最内层绿色div，可以看到绑定事件的执行顺序是从外向内的。
取消冒泡和阻止默认事件
取消冒泡：
W3C标准 event.stopPropagation();但不支持ie9以下版本 IE独有
event.cancelBubble = true;
封装取消冒泡的函数 stopBubble(event)
function stopBubble(event){if(event.stopPropagation){event.stopPropagation();} else {event.cancelBubble = true;}}
阻止默认事件:
默认事件 — 表单提交，a标签跳转，右键菜单等
1.return false; 以对象属性的方式注册的事件才生效
例子： 右键点击页面执行一个函数但不执行默认事件（出现菜单）
document.oncontextmenu = function (){console.log('a');return false;}
2.event.preventDefault(); W3C标准，IE9以下不兼容
3.event.returnValue = false; 兼容IE 封装阻止默认事件的函数 cancelHandler(event);
封装一个方法，记住方法调用完了在外面还是要return false；
function cancelHander(event){if(event.preventDefault){event.preventDefault();} else {event.returnValue = false;}}
阻止a标签的跳转和跳到页面顶部的常用写法：
<a href="javascript:void(false)">点我没反应</a>
àì夳堔傛蜴生んèń
阳光穿透心脏的1/2处
╰+哭是因爲堅強的太久メ
系统管理员
不念不忘少年蓝@
亦凉
还没有评论，来说两句吧...