Event object: When an event occurs, the browser automatically creates the object and contains the type of the event, mouse coordinates, etc.
Properties of event object: Format: event.properties.
Some instructions:
event represents the status of the event, such as the element that triggers the event object, the position and status of the mouse, the key pressed, etc.
The event object is only valid during the event.
The event in firefox is different from that in IE. The event in IE is a global variable that is available at any time; the event in firefox must be booted with parameters, and is a temporary variable at runtime.
In IE/Opera it is window.event, and in Firefox it is event;
The object of the event is window.event.srcElement in IE, event.target in Firefox, and both are available in Opera.
Binding events
In JS, you can usually take two methods to bind events to an object (control):
First define a function in the head:
The code copy is as follows:
<script type="text/javascript">
function clickHandler()
{
//do something
alert("button is clicked!");
}
</script>
The first way to bind events:
<input type="button" value="button1" onclick="clickHandler();"><br/>
The second way to bind events:
The code copy is as follows:
<input type="button" id="button2" value="button2">
<script type="text/javascript">
var v = document.getElementById("button2");
v.onclick = clickHandler; // Use function name here, no brackets are added
</script>
Other examples
Example 1:
The code copy 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>
Example 2:
The code copy 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>