Home > Developer > JavaScript
JavaScript learning notes: JS event objects and javascript learning notes
Event object: when an event occurs, the browser automatically creates the object, including the event type and mouse coordinates.
Attribute of the event object: Format: event. attribute.
Notes:
Event indicates the event status, such as the element that triggers the event object, the location and status of the mouse, and the key that is pressed;
The event object is valid only when an event occurs.
The event in firefox is different from that in IE. The global variables in IE are available at any time. In firefox, parameter guidance is used, and temporary variables are used at runtime.
Window. event in IE/Opera and event in Firefox;
The event object is "invalid event.srcelement" in ie, event.tar get in firefox, and both are available in Opera.
Bind event
In JS, You can bind events to an object (Control) by two methods:
First, define a function in head:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Function clickHandler ()
{
// Do something
Alert ("button is clicked! ");
}
</Script>
The first method to bind events:
<Input type = "button" value = "button1" onclick = "clickHandler ();"> <br/>
The second method to bind events:
Copy codeThe Code is as follows:
<Input type = "button" id = "button2" value = "button2">
<Script type = "text/javascript">
Var v = document. getElementById ("button2 ");
V. onclick = clickHandler; // The function name is used here and cannot be enclosed by brackets.
</Script>
Other instances
Instance 1:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Title> eventTest.html </title>
<Meta http-equiv = "keywords" content = "keyword1, keyword2, keyword3">
<Meta http-equiv = "description" content = "this is my page">
<Meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
<! -- <Link rel = "stylesheet" type = "text/css" href = "./styles.css"> -->
<Script>
Function mOver (object ){
Object. color = "red ";
}
Function mOut (object ){
Object. color = "blue ";
}
</Script>
</Head>
<Body>
<Font style = "cursor: help"
Onclick = "window. location. href = 'HTTP: // www.baidu.com '"
Onmouseover = "mOver (this)" onmouseout = "mOut (this)"> welcome </font>
</Body>
</Html>
Instance 2:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Title> eventTest2.html </title>
<Meta http-equiv = "keywords" content = "keyword1, keyword2, keyword3">
<Meta http-equiv = "description" content = "this is my page">
<Meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
<! -- <Link rel = "stylesheet" type = "text/css" href = "./styles.css"> -->
</Head>
<Body>
<Script type = "text/javascript">
Function getEvent (event ){
Alert ("event type:" + event. type );
}
Document. write ("click ...");
Document. onmousedown = getEvent;
</Script>
</Body>
</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
