事件冒泡
结构上(非视觉上)嵌套关系的元素,会存在事件的冒泡功能,
即同一事件,自子元素冒泡向父元素(自内向外)
源元素触发不算是冒泡
<body> <div style="width: 300px;height: 300px;background: red;"> <div class="test" style="width: 200px;height: 200px;background: blue;"> <div class="test1" style="width: 100px;height: 100px;background: black;"></div> </div> </div> <script type="text/javascript"> var warp = document.getElementsByTagName('div')[0]; var test = document.getElementsByClassName('test')[0]; var test1 = document.getElementsByClassName('test1')[0]; warp.addEventListener('click',function () {console.log('warp')},false); test.addEventListener('click',function () {console.log('test')},false); test1.addEventListener('click',function () {console.log('test1')},false); </script> </body>
以上是点击了 黑色的 div 触发的事件,
每个元素都绑定一个事件,点击最里层的子元素,会存在事件冒泡功能。
事件捕获
ele.addEventListener(type,fun,true)
结构上(非视觉上)嵌套关系的元素,会存在事件的捕获功能,
即同一事件,自父元素捕获至子元素(事件源元素)(自外向内)
源元素触发不算是捕获
低版本IE没有捕获事件
多个事件类型触发顺序,先捕获,后冒泡
focus,blur,change,submit,reset,select等事件不冒泡
取消冒泡
event.stopPropagation() W3C标准,但是 IE 9 以下不支持
示例:
box3.addEventListener('click',function (event) { console.log('box3'); event.stopPropagation(); },false)
event.cancelBubble = true 取消冒泡,兼容IE
示例:
box3.addEventListener('click',function () { console.log('box3'); event.cancelBubble = true; },false)
封装方法stopBubble,取消冒泡,兼容 ie
function stopBubble(event) { if(event.stopPropagation) { event.stopPropagation(); }else { event.cancelBubble = true; } }
示例:
box3.addEventListener('click',function (event) { console.log('box3'); function stopBubble() { if(event.stopPropagation) { event.stopPropagation(); }else { event.cancelBubble = true; } } stopBubble(event); },false)
阻止默认事件
写在处理函数的内部执行
常见的默认事件: 表单提交,a标签跳转,右键菜单...
1.
return false
eve.onclick = function() {} 这种方式的绑定事件才生效
例如取消右键菜单事件:
document.oncontextmenu = function () {
return false;
}
执行后右键就不会再弹出菜单。
2.
eve.preventDefault()
取消右键弹出菜单
ie9以下不兼容
document.oncontextmenu = function (eve) {
eve.preventDefault();
}
支持所有绑定事件的方法
3.
兼容IE9以下的浏览器,高版本 IE 不支持
eve.returnValue = false;
4.
封装一个方法,兼容所有浏览器组织默认事件
function stopDefault(event) { if(event.preventDefault) { event.preventDefault(); }else { event.returnValue = false; } }
使用方法:
a.onclick = function () { stopDefault(event); } function stopDefault(event) { if(event.preventDefault) { event.preventDefault(); }else { event.returnValue = false; } }