JavaScript advanced events, registration events, and a large number of examples (8)

I am going to work with you to learn how to handle events and events. This article is still widely used and I hope you will like it. 1. Move the mouse over the element and display the tooltip. 1. Basic events in level 0 DOM 1. events as Html attributes (associated functions) are the official handle 1 & lt; I... SyntaxHighlighter. all ();

I am going to work with you to learn how to handle events and events. This article is still widely used and I hope you will like it.
1. Move the mouse over the element and display the tooltip.
I. Basic events in level 0 DOM
1. events as Html attributes (associated functions) are the official handles.
1
2. Handle the event as a Javascript property
// Javascript code section
Document. f1.b1. onclick = function () {alert ('ai ');};
// You can also get the element you want to bind through Id
Document. getElementById ("B"). onclick = function () {alert ('love')} // obtain the element by specifying the Id
// HTML tag

All of them define the handle for the attribute of the element. So what is better?
Answer: It is the handle of Javascript attributes, because it effectively blends Javascript and Html, and makes the program more modular. Even if you want to modify the handle of document elements in the future, you do not need to go to Html static pages.
3. Event handle and this keyword (helpful for understanding W3C and Microsoft-defined Event)
Both the Html property definition handle and the Javascript property definition handle give a function an attribute of the document element. in other words, it is a new method for defining document elements. When an event is called, it is called as an (event generation) element, so this references the target element.
Level 2 DOM Advanced event processing
There are two models, one defined by W3C and the other defined by Microsoft. The W3C model supports all browsers on the market, except for IE, microsoft only supports Internet Explorer.
Event propagation: In the level 0 DOM event model, the browser assigns the event to the document element in which the event occurs. If an element has a suitable handle, it runs the handle.
In Level 2 DOM Advanced event mode, when an element is triggered, its ancestor element also has the opportunity to process the event.
Event propagation is divided into three phases: first, in the capture phase, the event is propagated from the Document object down the Document tree to the target node, if the target ancestor specifically registers the event capture handle.
Second, when this phase occurs on the target node itself, the appropriate event handle directly registered on the target will run.
Third, this stage is a bubble stage. At this stage, the event will be propagated back from the target element or blister back to the Document level of the Document Object.
1. I will use a long example to understand the application of advanced events.
Content: displays a tooltip when the mouse passes through the element.
CSS section: This file can be saved as a showmessage.css file.
. Showmessage {font-family: Tahoma; font-size: 12px; border: 1px solid #99ff00; width: 200px; height: 80px; color: # dd0f00; background-color: gray ;}
Javascript section:
// JScript source code

Function Tooltip (){
This. tooltip = document. createElement ("div"); // construct a DIV
This. tooltip. style. position = "absolute"; // you can specify a style.
This. tooltip. style. visibility = "hidden ";
This. tooltip. className = "showmessage ";
}

Tooltip. prototype. show = function (text, x, y) {// This method is used to show that text is the text to be displayed, x is the horizontal position in IE, and y is the vertical position.
This. tooltip. innerHTML = text;
This. tooltip. style. left = x + "px ";
This. tooltip. style. top = y + "px ";
This. tooltip. style. visibility = "visible ";
If (this. tooltip. parentNode! = Document. body)
Document. body. appendChild (this. tooltip );
};

Tooltip. prototype. hide = function () {// This method is used to hide
This. tooltip. style. visibility = "hidden ";
}
Tooltip. OFFSET_X = 10; // sets the deviation size.
Tooltip. OFFSET_Y = 20;
Tooltip. DEFINETIME = 500; // sets the interval of the driver function.
Tooltip. prototype. toolmessage = function (target, event ){
Var text = target. getAttribute ("info ");
If (! Text) return;
Var x = event. clientX + document.doc umentElement. scrollLeft, y = event. clientY + document.doc umentElement. scrollTop;

X + = Tooltip. OFFSET_X;
Y + = Tooltip. OFFSET_Y;

Var self = this;
Var timer = window. setTimeout (function () {self. show (text, x, y) ;}, Tooltip. DEFINETIME); // function Method for timed display

If (target. addEventListener) target. addEventListener ("mouseout", outHandler, false); // all registration events except IE are supported.
Else if (target. attachEvent) target. attachEvent ("onmouseout", outHandler); // supports IE
Else target. onmouseout = outHandler; // supports earlier versions.

Function outHandler (){
Self. hide (); // hide
Window. clearInterval (timer); // cancels the timer function.
If (target. removeEventListener) target. removeEventListener ("mouseout", outHandler, false); // cancel event registration
Else if (target. detachEvent) target. detachEvent ("onmouseout", outHandler); // cancel the event registration IE
Else target. onmouseout = null;
}
};

Tooltip. operator = new Tooltip (); // encapsulate
Tooltip. showmessage = function (target, event) {Tooltip. operator. toolmessage (target, event) ;}; // encapsulate by class attributes.
Html section:


Untitled Page