event bubbling
Elements with structurally ( non-visually ) nested relationships will have the bubbling function of events,
That is, the same event, bubbling from the child element to the parent element (from the inside out)
Source element triggering does not count as bubbling
<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>
The above is the event triggered when the black div is clicked,
Each element is bound to an event, and when the innermost child element is clicked, there will be an event bubbling function.
event capture
ele.addEventListener(type,fun,true)
Elements with a structural ( non-visual ) nested relationship will have an event capture function,
That is, the same event is captured from the parent element to the child element (event source element) (from outside to inside)
Source element triggering is not a capture
Lower versions of IE do not capture events
Multiple event types trigger sequence, first capture, then bubble
Events such as focus,blur,change,submit,reset,select do not bubble
cancel bubbling
event.stopPropagation() W3C standard, but not supported below IE 9
Example:
box3.addEventListener('click',function (event) {
console.log('box3');
event.stopPropagation();
},false)
eve nt. cancelBubble = true cancels bubbling, compatible with IE
Example:
box3.addEventListener('click',function () {
console.log('box3');
event.cancelBubble = true;
},false)
Encapsulation method stopBubble, cancel bubbling, compatible with ie
function stopBubble (event) {
if(event.stopPropagation) {
event.stopPropagation();
}else {
event.cancelBubble = true;
}
}
Example:
box3.addEventListener('click',function (event) {
console.log('box3');
function stopBubble () {
if(event.stopPropagation) {
event.stopPropagation();
}else {
event.cancelBubble = true;
}
}
stopBubble (event);
},false)
Block default events
Written inside the handler function to execute
Common default events: form submission, a tag jump, right-click menu...
1.
return false
eve.onclick = function() {} Binding events in this way take effect
For example to cancel the right-click menu event:
document.oncontextmenu = function () {
return false;
}
After executing the right click, the menu will no longer pop up.
2.
eve.preventDefault()
Cancel the right-click popup menu
Not compatible with ie9 and below
document.oncontextmenu = function (eve) {
eve.preventDefault();
}
All methods of binding events are supported
3.
Compatible with browsers below IE9, higher versions of IE are not supported
eve.returnValue = false;
4.
Encapsulates a method that is compatible with all browsers to organize default events
function stopDefault(event) {
if(event.preventDefault) {
event.preventDefault();
}else {
event.returnValue = false;
}
}
Instructions:
a.onclick = function () {
stopDefault(event);
}
function stopDefault(event) {
if(event.preventDefault) {
event.preventDefault();
}else {
event.returnValue = false;
}
}