Home > Developer > JavaScript
There are four main methods to bind Javascript events (the following operations are normal in IE, but other browsers are not guaranteed ):
[Note: onXXX is an event, fun is a function, and domId is a DOM object id. For the event type, see the appendix below.]
1. In DOM, bind with onXXX = "fun ();" directly
2. Bind DOM object. onXXX = fun in Javascript code
3. bind with DOM object. attachEvent ("onXXX", fun)
4. Bind it with <script for = "domId" event = "onXXX"> fun (); </script>
[Javascript]
<Html>
<Head>
<Title> event test </title>
</Head>
<Body onload = "init ()">
<! -- Binding method 1: In an element, set the binding method through onXXX (event) -->
<Button id = "btn1" onclick = "display ()"> binding method 1 </button>
<! -- Binding method 2: In Javascript code, you can obtain an element and set the binding method for the onXXX (event) of the element. -->
<Button id = "btn2"> binding method 2 </button>
<! -- Binding method 3: bind events (IE4 +) to elements through for and event ). For is followed by the element id, and event is a specific event -->
<Button id = "btn3"> binding method 3 </button>
<! -- Binding method 4: Use attachEvent to bind events (IE5 +) to elements ). The first parameter is the event name, and the second parameter is the binding method -->
<Button id = "btn4"> binding method 4 </button>
</Body>
</Html>
<Script type = "text/javascript">
Function init (){
Document. getElementById ("btn2"). onclick = display; // events bound to button2
Document. getElementById ("btn4"). attachEvent ("onclick", display); // bind events to button4
}
Function display (event ){
Var targ; // event-triggered Object Reference
If (! Event ){
Var event = window. event; // obtain the current event (IE)
}
If (event.tar get) {// IE has no target
Targ = evente.tar get;
} Else if (event. srcElement) {// applies to IE
Targ = event. srcElement;
}
// Operate the object that triggers the event
Alert (targ. tagName + "-" + targ. id + "-" + event. x + "-" + event. offsetX );
Targ. disabled = "disabled ";
}
<Script>
<Script for = "btn3" event = "onclick">
Display (); // bind events to button3
<Script>
[Javascript] view plaincopy
<Html>
<Head>
<Title> event test </title>
</Head>
<Body onload = "init ()">
<! -- Binding method 1: In an element, set the binding method through onXXX (event) -->
<Button id = "btn1" onclick = "display ()"> binding method 1 </button>
<! -- Binding method 2: In Javascript code, you can obtain an element and set the binding method for the onXXX (event) of the element. -->
<Button id = "btn2"> binding method 2 </button>
<! -- Binding method 3: bind events (IE4 +) to elements through for and event ). For is followed by the element id, and event is a specific event -->
<Button id = "btn3"> binding method 3 </button>
<! -- Binding method 4: Use attachEvent to bind events (IE5 +) to elements ). The first parameter is the event name, and the second parameter is the binding method -->
<Button id = "btn4"> binding method 4 </button>
</Body>
</Html>
<Script type = "text/javascript">
Function init (){
Document. getElementById ("btn2"). onclick = display; // events bound to button2
Document. getElementById ("btn4"). attachEvent ("onclick", display); // bind events to button4
}
Function display (event ){
Var targ; // event-triggered Object Reference
If (! Event ){
Var event = window. event; // obtain the current event (IE)
}
If (event.tar get) {// IE has no target
Targ = evente.tar get;
} Else if (event. srcElement) {// applies to IE
Targ = event. srcElement;
}
// Operate the object that triggers the event
Alert (targ. tagName + "-" + targ. id + "-" + event. x + "-" + event. offsetX );
Targ. disabled = "disabled ";
}
<Script>
<Script for = "btn3" event = "onclick">
Display (); // bind events to button3
<Script>
Appendix 1: event:
Onabort: image loading interrupted
Onblur: Elements lose focus
Onchange: The domain content is changed.
Onclick: Event handle called when a user clicks an object
Ondblclick: Event handle called when you double-click an object
Onerror: An error occurred while loading the document or image.
Onfocus: the element obtains the focus.
Onkeydown: a keyboard button is pressed
Onkeypress: a keyboard button is pressed and released
Onkeyup: a keyboard button is released
Onload: loading a page or image
Onmousedown: the mouse button is pressed.
Onmousemove: move the mouse
Onmouseout: move the mouse away from an element.
Onmouseover: move the mouse over an element.
Onmouseup: the mouse button is released.
Onreset: the reset button is clicked.
Onresize: the window or frame is resized.
Onselect: text selected
Onsubmit: Click the OK button
Onunload: User exit page
Appendix 2: IE event attributes:
CancelBubble: if the event handle wants to prevent the event from spreading to an inclusive object, it must be set to true.
FromElement: For mouseover and mouseout events, fromElement references the elements that move the mouse away.
KeyCode: For keypress events, this attribute declares the Unicode escape code generated by the hitting key. For keydown and keyup events, it specifies the virtual keyboard code of the key to be knocked. The virtual keyboard code may be related to the layout of the used keyboard.
OffsetX, offsetY: the x and y coordinates of the event location in the coordinate system of the event source element.
ReturnValue: If this attribute is set, its value has a higher priority than the return value of the event handle. Set this attribute to fasle to cancel the default action of the event source element.
SrcElement: references to the Window object, Document object, or Element object that generates the event.
ToElement: For mouseover and mouseout events, this attribute references the elements that move into the mouse.
X, y: The x coordinate and y coordinate of the event location. They are relative to the innermost element that is dynamically located using CSS.
Author: cqkxzyi
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
