<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script>
var over = function (element) {
element.style.color = "red";
}
var out = function (element) {
element.style.color = "black";
}
//javascript動態的註冊事件處理器
function init() {
var btn = document.getElementById("btn");
btn.onclick = function () {
alert("Clicked");
}
//javascript動態的註冊事件處理器
var btn2 = document.getElementById("btn2");
var handler = function () { //準備一個事件處理器(對應事件的函式)
alert("Clicked");
}
btn2.addEventListener("click"/*事件的名稱*/, handler);
var btn3 = document.getElementById("btn3");
var handler3 = function (e) {
//1.使用者點擊了按鈕, 觸發click事件
//2.瀏覽器主動收集和事件有關的資訊, 並製造出Event Object事件物件
//var eventObj = 事件物件;
//3.呼叫已經註冊的事件處理器(事件處理函式)
//handler(eventObj);
alert(e.clientX+","+e.clientY);
}
btn3.addEventListener("click"/*事件的名稱*/, handler3);
document.addEventListener("keydown", function (e) {//匿名函式:用來直接當作事件處理器
alert(e.keyCode);
});
}
</script>
</head>
<%--onload下載時觸發事件--%>
<body onload="init();">
<form id="form1" runat="server">
<div>
<button id="btn">按我一下 </button>
</div>
<div>
<button id="btn2">再按我一下 </button>
</div>
<div>
<button id="btn3">事件event </button>
</div>
<div>
<button onclick="alert('Clicked');">Clicked</button>
<span onmouseover="this.style.color='red'"
onmouseout="this.style.color='black'">Test</span>
</div>
<div>
<%--this代表span物件--%>
<span onmouseover="over(this);"
onmouseout="out(this);">HELLO</span>
</div>
</form>
</body>
</html>
沒有留言:
張貼留言