事件對象:當事件發生時,浏覽器自動建立該對象,並包含該事件的類型、鼠標坐標等。
事件對象的屬性:格式:event.屬性。
一些說明:
event代表事件的狀態,例如觸發event對象的元素、鼠標的位置及狀態、按下的鍵等等;
event對象只在事件發生的過程中才有效。
firefox裡的event跟IE裡的不同,IE裡的是全局變量,隨時可用;firefox裡的要用參數引導才能用,是運行時的臨時變量。
在IE/Opera中是window.event,在Firefox中是event;
而事件的對象,在IE中是window.event.srcElement,在Firefox中是event.target,Opera中兩者都可用。
綁定事件
在JS中為某個對象(控件)綁定事件通常可以采取兩種手段:
首先在head中定義一個函數:
代碼如下:
<script type="text/javascript">
function clickHandler()
{
//do something
alert("button is clicked!");
}
</script>
綁定事件的第一種方法:
<input type="button" value="button1" onclick="clickHandler();"><br/>
綁定事件的第二種方法:
代碼如下:
<input type="button" id="button2" value="button2">
<script type="text/javascript">
var v = document.getElementById("button2");
v.onclick = clickHandler; //這裡用函數名,不能加括號
</script>
其他實例
實例1:
代碼如下:
<!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)">歡迎訪問</font>
</body>
</html>
實例2:
代碼如下:
<!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);
}
document.write("單擊...");
document.onmousedown = getEvent;
</script>
</body>
</html>