August 16 = 411-420

15.2.4 event bubbling

When a viewer executes an action on a page, multiple elements on the page can actually respond to the event. If you click a button on the page and the button is within the <div> element, then the actual

You have clicked this button and the <div> element.

Code example:

// Script code

VaR gotclick = function (WHO)

{

Document. getelementbyid ("Results"). innerhtml + = who + "clicked ";

}

// Html code

<Div onclick = "gotclick ('div elemental ')">

<Button onclick = "gotclick ('button elemental ')"> bubble test </button>

</Div>

<Div id = "Results">

</Div>

When you click the button element, the content of the DIV element whose ID is results will show "button element clicked" and "Div element clicked ".

To cancel the bubble, add the following code to the event script.

Event. cancelbubble = true;

 

15.2.5 redirection event

The event bubbling mechanism strictly redirects the event from the child node to the parent node. However, in some cases, we do not want the event to be triggered by strictly following the DOM tree, but want the event to jump between different nodes,

In this case, you can use the event redirection mechanism of Internet Explorer.

Code example:

// Script code

VaR gotclick = function (WHO)

{

Document. getelementbyid ("Results"). innerhtml + = who + "clicked ";

// Stop bubbles

Event. cancelbubble = true;

// Redirect to The onclick event with the ID forward Element

Document. getelementbyid ("Forward"). fireevent ("onclick", event );

}

// Html code

<Div onclick = "gotclick ('div elemental ')">

<Button onclick = "gotclick ('button elemental ')"> test </button>

</Div>

<Input type = "button" id = "Forward" value = "Redirect button" onclick = "gotclick ('redirect button ')"/>

<Div id = "Results">

</Div>

Click the test button. In the DIV element with ID results, "button element clicked" and "Redirect button clicked" are displayed ".

 

15.2.6 cancel default event Behavior

We have introduced a method to cancel the default event behavior: You can cancel the default event behavior by setting the return value of the event processing function to false. Internet Explorer also provides

To cancel the default event behavior: Set the returnvalue attribute of the event object to false.

Code example:

// Script code

VaR clicktest = function ()

{

// Use the confirmation dialog box to obtain a Boolean Value

VaR OK = confirm ("Jump to link ");

// Modify the attribute value of event. returnvalue

Event. returnvalue = OK;

}

Document. getelementbyid ("atest"). onclick = clicktest;

// Html code

<A id = "atest" href = www.baidu.com> jump to a tag </a>