2019年9月5日 星期四

Javascript 事件處理

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="prjJavascrip.WebForm1" %>

<!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>

沒有留言:

張貼留言