• 事件(event)是使用者對瀏覽器或網頁做出某個動作
  • 事件處理程序(even handlers)定義事件發生時要做的事情(例如點擊後跳出視窗)
  • 事件處理方式:
    • HTML屬性的事件處理程序
    • JS屬性的事件處理程序
    • W3C DOM處理程序

不好的方法:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>01eventHandler.html</title>

    <script>

        function f1() {

            alert("方法一")

        }

 

        function f2() {

            alert("方法二")

        }

 

        function f3() {

            alert("方法三")

        }

 

 

    </script>

</head>

<body>

    <!-- method 1 HTML屬性的事件處理程序-->

    <h1 id="m1" onclick="f1();">方法一</h1><!--方法寫在上面的script中,用onclick(點擊)呼叫方法-->

 

    <!-- method 2 JS屬性的事件處理程序-->

    <h1 id="m2" \>方法二</h1>

    <script>

        document.getElementById("m2").onclick = f2(); //注意這一行不能寫在上面的script中,因為他會找不到標籤m2是甚麼

        //document.getElementById("m2")回傳一個物件,再用「物件.屬性(onclick)(也就是屬性事件)呼叫方法

        //注意f2後面不可以有(),那樣會一開啟就執行而不是點擊後才執行(然後才執行m3那一行)

        //f2這個方法存進onclick這個屬性裡

    </script>

 

    <!-- method 3 W3 DOM處理程序-->

   

    <h1 id="m3" >方法三</h1>

     <script>

         document.getElementById("m3").addEventListener("click", f3, false);

         //document.getElementById("m3")是一個物件

         //物件.方法(addEventListener)

         //addEventListener這個方法執行需有三個參數(最後一個可省略,後篇寫)

         //addEventListener(事件名稱event,方法(把方法註冊進事件裡)function,uescapture)

 

         //addEventListenerIE8()以下無法使用,要使用以下方法:

         //document.getElementById("m3").attachEvent("onclick", f3)

         //但這個方法IE11不支援

    </script>

 

 

</body>

</html>



改進板1:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>01eventHandler.html</title>

    <script>

        function f1() {

            alert("方法一")

        }

 

        function f2() {

            alert("方法二")

        }

 

        function f3() {

            alert("方法三")

        }

        function init() {

            //因為不建議把<script>寫到下面去,所以可以把下面的body加上onload來執行

            //代表會先把body裡的標籤都跑過一遍再來執行此方法

            document.getElementById("m2").onclick = f2;

            document.getElementById("m3").addEventListener("click", f3, false);

            //document.getElementById("m3").attachEvent("onclick",f3)

            //↑IE8用的老方法,IE11不認識

        }

 

    </script>

</head>

<body onload="init();">

    <!--body加上onload="init();,代表一開始就先執行標籤,之後再執行init();-->

    <!--但不建議使用此方法,因為不好把介面端跟後制端分開-->

 

    <!-- method 1 HTML屬性的事件處理程序-->

    <h1 id="m1" onclick="f1();">方法一</h1>

    <!--方法寫在上面的script-->

 

    <!-- method 2 JS屬性的事件處理程序-->

    <h1 id="m2">方法二</h1>

 

    <!-- method 3 W3 DOM處理程序-->

    <h1 id="m3">方法三</h1>

 

 

</body>

</html>



<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>01eventHandler.html</title>

    <script>

        function f1(){

        alert("方法一")

        }

 

        function f2() {

            alert("方法二")

        }

 

        function f3() {

            alert("方法三")

        }

        window.onload = function () {

            //因為不建議把<script>寫到下面去,所以用 window.onload,代表會先執行下面body中的標籤再執行此方法

            document.getElementById("m2").onclick = f2;//不要加括號,會變成一打開視窗就執行

            document.getElementById("m3").addEventListener("click", f3, false);

            //document.getElementById("m3").attachEvent("onclick",f3)

        }

 

        //function init() {

        //    document.getElementById("m2").onclick = f2;

        //}

        //window.onload = init;

        //搞剛一點也可以這樣寫,跟上面是一樣的意思

 

 

    </script>

</head>

<body>

    <!-- method 1 HTML屬性的事件處理程序-->

    <h1 id="m1" onclick="f1();">方法一</h1><!--方法寫在上面的script-->

 

    <!-- method 2 JS屬性的事件處理程序-->

    <h1 id="m2" \>方法二</h1>

 

    <!-- method 3 W3 DOM處理程序-->

    <h1 id="m3" >方法三</h1>

 

 

</body>

</html>

 

arrow
arrow
    全站熱搜

    乙方 發表在 痞客邦 留言(0) 人氣()