One, the most simple and backward compatibility the best event binding method is to bind the event to the attribute identified by the element. event property names consist of an event type plus an "on" prefix. These properties are also known as
Event Handlers<input type= "text" name= "first_name" onchange= "Converttoupper (This)" > or <input type= "text" Name= "first_name "Onchange=" JAVASCRIPT:JS Code "> or Dom.onclick = function (e) {//todo} II, JS method binding Event 1, Dom objectattacheventThe () method gives the DOM element an event (the method only supports the way bubbling events--ie bind events)elemobj.attachevent (Event, func)This method has a notable place: You cannot execute this statement until the element is loaded into the browser. The object's reference is not valid until the corresponding HTML key element is created by the browser. Therefore, you want to allow such a binding statement to run either at the bottom of the page or in a function called by the OnLoad event handler of the BODY element. 2. Dom ObjectAddEventListenerThe () method gives the DOM object an event that supports capturing events and bubbling events--w3c the way the event is bound.Elemobj.addeventlistener (on event, Func, Captureflag)The first parameter of this method is a string that declares the event type (without the "on" prefix), such as Click,mousedown, and KeyPress. The second parameter is a bound function. The third parameter is a Boolean value that is used to set whether the event is executed when the event is captured or when the event is bubbling. The event model of IE is executed when the event is bubbling by default, that is, when usecapture equals false, it is more secure to set Usecapture to false when handling events, and also to achieve a compatible browser effect. 3. Capturing and Bubbling events: Event Bubbling: Events are triggered from the current element object, and then the up-level elements are searched for the same object events and triggered (search straight to the document node). IE events are only this type of event by default. Event capture: Searches for events from the document node and then searches the underlying for the same object event and fires until the current element node. 4.
Stop event bubbling:Ie:window.event.cancelbubble=false; Other:e.stoppropagation (); Third, the event unbound ie:detachevent Other:removeeventlistener Four, commonly used examples
var button = document.getElementById ("ButtonID"); if (button.addeventlistener) { button.addeventlistener ("click", Eventfunction,false); } else if (button.attachevent) { button.attachevent ("onclick", eventfunction);
V, Window.event1, event represents the state of events, such as the element that triggered the object, the position and state of the mouse, the key pressed, and so on. The event object is only valid during the events. Some properties of an event are only meaningful for a particular event.
2. Properties:
| Altkey, Button, cancelbubble, ClientX, ClientY, Ctrlkey, Fromelement, KeyCode, OffsetX, OffsetY, PropertyName, Returnvalu E, ScreenX, ScreenY, Shiftkey, srcelement, Srcfilter, toelement, type, x, y |
3, Common Properties Detailed description: Altkey: Check the state of the ALT key shiftkey: Check the state of the SHIFT key Ctrlkey: Check the status of the CTRL key KeyCode: detect the keyboard event corresponding to the internal code srcelement: Returns the element that triggered the event button: Checks the pressed mouse button for the onmousedown,onmouseup and onmousemove events only. For other events, regardless of mouse state, returns 0 (for example, onclick) Type: Returns event name 4, compatibility
IE: There is window.event object//ff: There is no window.event object. You can pass an event object to a function's arguments. such as Onmousemove=domousemove (event) <script> function test (event) { var event = Event | | window.event; Do Something }</script><input type= "button" value= "click" onclick= "Test (event)"/>
JavaScript Event Binding
