JS propagates events, cancels event default behavior, prevents event propagation

Forward to: http://www.cnblogs.com/fibonaccixue/p/5340279.html
1. Event handler

Normally, a return value of false tells the browser not to perform the default action associated with this event. For example, the onclick event handler of the form submit button can prevent the browser from submitting the form by returning false, and the onclick event handler of the a tag can prevent jumping to the href page by returning false. Similarly, the onkeypress event handler on the input field can filter keyboard input by returning false if the user enters inappropriate characters.

  事件处理程序的返回值只对通过属性注册的处理程序才有意义。

call sequence

A document element or other object can register multiple event handlers for a given event type. When the appropriate event occurs, the browser must call all event handlers according to the following rules:

Handlers registered by setting object properties or HTML attributes are always called first.
Handlers registered with addEventListener() are called in the order in which they were registered.
Handlers registered with attachEvent() may be called in any order, so code should not depend on the calling order.

Event Propagation
　　Most events "bubble up" to the root of the DOM tree after calling the event handler registered on the target element. Calls the event handler of the target's parent element, and then calls the event handler registered on the target's grandparent element. This goes all the way to the Document object and finally to the Window object.

　　Most events that occur on document elements bubble up, with notable exceptions being the focus, blur, and scroll events. The document element's load event bubbles up, but it stops bubbling on the Document object without propagating to the Window object. The load event of the Window object is fired only when the entire document is loaded.
1. Cancel the default behavior of events and prevent event propagation
  
  In browsers that support addEventListener(), you can cancel the default action of an event by calling the preventDefault() method of the event object. In IE before IE9, the same effect can be achieved by setting the returnValue property of the event object to false. The following piece of code is a combination of three techniques to cancel the event:

function cancelHandler(event) {
    var event = event || window.event;//兼容IE        
    //取消事件相关的默认行为    
    if (event.preventDefault)    //标准技术        
        event.preventDefault();
    if (event.returnValue)    //兼容IE9之前的IE        
        event.returnValue = false;
    return false;    //用于处理使用对象属性注册的处理程序
}

The default action related to canceling an event is just one of the event cancellations, and we can also cancel event propagation. In browsers that support addEventListener(), the stopPropagation() method of the event object can be called to prevent further propagation of the event. If other handlers are defined on the same object, the remaining handlers will still be called, but event handlers on any other objects will not be called after stopPropagation() is called. IE before IE9 does not support the stopPropagation() method, but sets the cancelBubble property of the event object to true to prevent further propagation of the event. Detailed explanation of preventDefault and stopPropagation in js First, let's explain the difference between the two methods of preventDefault and stopPropagation in js: What is the function of preventDefault method? We know that Baidu , for example, is the most basic thing in html. Its function is to click on the Baidu link to http://www.baidu.com, which is the default behavior of tags , and the preventDefault method can prevent its default behavior. happens and other things happen. Look at a piece of code and you will understand:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS阻止链接跳转</title>
<script type="text/javascript"> 
function stopDefault( e ) { 
if ( e && e.preventDefault ) 
   e.preventDefault(); 
    else 
   window.event.returnValue = false; 

    return false; 
} 
</script> 
</head>
<body>
<a href="http://www.baidu.com" id="testLink">百度</a> 
<script type="text/javascript"> 
var test = document.getElementById('testLink'); 
test.onclick = function(e) { 
   alert('我的链接地址是：' + this.href + ', 但是我不会跳转。'); 
   stopDefault(e); 
} 
</script>
</body>
</html>

At this time, clicking on the Baidu link will not open http://www.baidu.com, but just pop up an alert dialog box. The preventDefault method is explained here, what about the stopPropagation method? Before talking about the stopPropagation method, we must first explain the event proxy of js. Event delegation uses two features that are often overlooked in JavaSciprt events: event bubbling and target elements. When an event is fired on an element, say a mouse click on a button, the same event will be fired on all ancestors of that element. This process is called event bubbling; the event bubbles up from the original element to the very top of the DOM tree. For any event, the target element is the original element, which in our case is the button. Target Element It appears as a property in our event object. Using event delegates we can add event handlers to an element, wait for events to bubble up from its child elements, and easily determine which element the event originated from. The stopPropagation method is to prevent the bubbling of js events, see a piece of code. Prevent JS events from bubbling (cancelBubble, stopPropagation) function doSomething (obj,evt) { alert(obj.id); var e=(evt)?evt:window.event; if (window.event) { e.cancelBubble= true;// prevent bubbling under ie} else { //e.preventDefault(); e.stopPropagation();// prevent bubbling under other browsers} }

JS propagates events, cancels event default behavior, prevents event propagation

Guess you like