Book: "Pro JavaScript techniques proficient in JavaScript" Default heavy-duty browser behavior

The default behavior of the browser can be attributed to the fact that the browser automatically executes all these behaviors without explicit instructions. The following are examples of different types of default behaviors for different events:

1. Click the <A> element to redirect to the URL of its href feature.

2. Press Ctrl + S on the keyboard to save the HTML file of the website.

3. submitting HTML <form> will submit data to the specified URL and redirect the browser to this address.

4. Move the mouse to a tool bar with ALT or title (depending on the browser) , and the description is displayed.

Even if the event is blocked from bubbling or no event is bound at all, the browser will still execute all these actions. this will cause major problems in your script. if you want the form to be submitted to be unconventional, or do you want <A> elements to behave differently, not their original intentions? Because canceling event bubbling does not prevent default behavior, you need some specific code to directly handle it. like canceling a bubble event, there are two ways to prevent default behaviors: the specific method of IE and W3C. both methods are displayed in code list 6-8. this function carries an event object parameter that is passed into the event handler function and should be used at the end of the time handler function, for example: Return stopdefault (E ); ------ because the handler must return false at the same time (false itself is also returned from stopdefault)

Code List 6-8 common functions to prevent default browser behavior

Function stopdefault (e ){

// Prevent default browser behavior (W3C)

If (E & E. preventdefault)

E. preventdefault ();

// Shortcuts for blocking browser behavior in IE

Else

Window. event. returnvalue = false;

Return false;

}

You can use the stopevent function to prevent any default behavior of the browser. this allows you to write some clever interactions for users, as shown in the code list 6-9. this Code allows all links to be loaded in a built-in <IFRAME>, instead of re-loading the entire page. in this way, users can stay on a page, so they may have a better interactive experience in some situations.

Code List 6-9 use stopdefault () to reload the browser function

// Assume that an IFRAME already exists on the page and its ID is 'iframe'

VaR IFRAME = Document. getelementbyid ("iframe ");

// Locate all <A> elements on the page

VaR A = Document. getelementsbytagname ("");

For (VAR I = 0; I <A. length; I ++ ){

// Bind the click handler for <A>

A [I]. onclick = function (e ){

// Set the IFRAME address

IFRAME. src = This. href;

// Prevent the browser from accessing the website pointed to by <A> (this is a default behavior)

Return stopdefault (E );

};

}