1. keyCode | which | charCode
KeyCode is supported in IE, and which and charCode are not supported.
KeyCode is supported in Firefox. Except for function keys, other key values are always 0. which and charCode attributes are supported in Firefox.
To obtain key values compatible with IE and Firefox, use the following methods:
Transfer an event when calling a function
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" & g t;
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> Demo </title>
<Script type = "text/javascript">
Function test_event (e ){
Var e = e | event;
CurrKey = e. keyCode | e. which | e. charCode;
Document. getElementById ("key"). value = currKey;
}
</Script>
</Head>
<Body>
<Input type = "text" onkeyup = "test_event (event)"/>
<Input type = "text" id = "key">
</Body>
</Html>
Do not pass the event when calling the function.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> Demo </title>
<Script type = "text/javascript">
Function test_event (e ){
Var e = arguments. callee. caller. arguments [0] | event;
CurrKey = e. keyCode | e. which | e. charCode;
Document. getElementById ("key"). value = currKey;
}
</Script>
</Head>
<Body>
<Input type = "text" onkeyup = "test_event ()"/>
<Input type = "text" id = "key">
</Body>
</Html>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. event. srcElement | event.tar get
In IE, the event object has the srcElement attribute, but does not have the target attribute. In Firefox, the event object has the target attribute, but the srcElement attribute does not exist.
The solution is simple:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> Demo </title>
<Style type = "text/css">
. Focus
{}{
Color: Red;
}
</Style>
<Script type = "text/javascript">
Function test_event (event ){
Var evt = event. srcElement | event.tar get;
Evt. className = "focus ";
}
</Script>
</Head>
<Body>
<Input type = "text" id = "text1" value = "text1" onfocus = "test_event"/>
<Input type = "text" id = "text2" value = "text2" onfocus = "test_event"/>
<Input type = "text" id = "text3" value = "text3" onfocus = "test_event"/>
</Body>
</Html>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3. event. x, event. y | event. pageX, event. pageY
In IE, the event object has the event. x and event. y attributes, but not in Firefox. Firefox has the event. pageX and event. PageY attributes, but IE does not. Solution:
Var mx = event. x? Event. x: event. pageX;
4. attachEvent () | addEventListener ()
IE supports the attachEvent () method, while Firefox supports the addEventListener () method.
AttachEvent ("eventType", fun)
EventType refers to the event type, and fun refers to the function that calls the event.
AddEventListener ("eventType", fun, flag)
The first two parameters of the addEventListener method are the same as those of the attachEvent method. The flag parameter is a Boolean value indicating whether the node listens for events in the so-called capture mode in the DOM. For a typical event listener, the third parameter should be false ).
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> Demo </title>
<Script type = "text/javascript">
Function test (){
Var str = "to be compatible with IE and Firefox, you need to write more code! ";
Alert (str );
}
Function test_event (){
Var obj = document. getElementById ("btn ");
If (document. all ){
Obj. attachEvent ("onclick", test );
}
// Note the first parameter of the two methods. One is "onclick" and the other is "click"
Else {
Obj. addEventListener ("click", test, false );
}
}
Window. onload = test_event;
</Script>
</Head>
<Body>
<Input type = "button" value = "test button" id = "btn"/>
</Body>
</Html>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The common event attributes or methods I know are the four above. Although the above things are not complex, I will often forget them. jQuery helps us solve these problems well. Through jQuery, we do not need to judge whether the browser supports the XX attribute or the XX method.
First, let's take a look at the attributes and methods of jQuery objects.
The following shows the attributes supported by jQuery event objects in the expanded Browser:
Example of attribute Name Description
Type event type. if you use an event handler to process multiple events, you can use this attribute to obtain the event type, such as click. $ (""). click (function (event) {alert (event. type );});
Target gets the event trigger DOM object $ ("a [href = http://google.com]"). click (function (event) {alert(event.tar get. href );});
Additional parameters are input when the data event is called. $ (""). each (function (I) {$ (this ). bind ('click', {index: I}, function (e) {alert ('My index is '+ e. data. index );});});
RelatedTarget indicates the DOM element $ ("a"). mouseout (function (event) {alert (event. relatedTarget);}) that leaves or enters the trigger event );});
The DOM object of the current trigger event before currentTarget bubbles, equivalent to this. $ ("p "). click (function (event) {alert (event. currentTarget. nodeName );});
Result: P
In a pageX/Y mouse event, the horizontal/vertical coordinates of the event relative to the page origin. $ (""). click (function (event) {alert ("Current mouse position:" + event. pageX + "," + event. pageY );});
Result: The value returned by the previous event processing function $ ("p "). click (function (event) {return "hey"}); $ ("p "). click (function (event) {alert (event. result );});
Result: "hey"
TimeStamp specifies the timeStamp when a timeStamp event occurs. var last; $ ("p "). click (function (event) {if (last) alert ("time since last event" + event. timeStamp-last); last = event. timeStamp ;});
Name Description Example
PreventDefault () cancels events that may cause any semantic operation. for example, the <a> element href link loading, form submission, and click causes the status switch of the check box. $ (""). click (function (event) {event. preventDefault (); // do something });
Whether isdefapreprevented () has been called
PreventDefault ()
Method $ (""). click (function (event) {alert (event. isDefaultPrevented (); event. preventDefault (); alert (event. isDefaultPrevented ());});
StopPropagation () cancel event bubbling $ ("p"). click (function (event) {event. stopPropagation (); // do something });
Whether isPropagationStopped () has been called
StopPropagation ()
Method $ ("p "). click (function (event) {alert (event. isPropagationStopped (); event. stopPropagation (); alert (event. isPropagationStopped ());});
StopImmediatePropagation () cancels the execution of other event processing functions and cancels event bubbling.
If the same event is bound to multiple event handlers, no other event handlers will be called after this method is called in one of the event handlers. $ ("p "). click (function (event) {event. stopImmediatePropagation () ;}); $ ("p "). click (function (event) {// This function won't be executed });
IsImmediatePropagationStopped () is it called?
StopImmediatePropagation ()
Method $ ("p "). click (function (event) {alert (event. isImmediatePropagationStopped (); event. stopImmediatePropagation (); alert (event. isImmediatePropagationStopped ());});
In these functions, stopPropagation () is the longest and certainly used function. It is equivalent to the event. cancelBubble = true operation of the original event object to cancel the bubble.
From: http://hi.baidu.com/happygmq/blog/item/d83f725091b9cc2f42a75baa.html
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
