Events-Event Object

Posted on 2016-07-11 Edited on 2023-11-24 In jQuery Views: Disqus:

一、event.currentTarget

其屬性可以先當作成「this」屬性來用。

二、event.data

其用法最常見跟.on()方法配合，給.on()方法當作參數傳入使用。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>event.data demo</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <button> 0 </button>
    <button> 1 </button>
    <button> 2 </button>
    <button> 3 </button>
    <button> 4 </button>

    <div id="log"></div>

    <script>
        var logDiv = $("#log");

        for (var i = 0; i < 5; i++) {
            $("button").eq(i).on("click", { myValue: i }, function (event) {
                var msgs = [
                  "button = " + $(this).index(),
                  "event.data.value = " + event.data.myValue,
                  "i = " + i
                ];
                logDiv.append(msgs.join(", ") + "<br>");
            });
        }
    </script>

</body>
</html>

三、event.delegateTarget

用法跟event.currentTarget與this屬性差不多，但作用的對相是該元素的ancestor

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
        .box {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>sss</p>
    </div>
    <script>
        $(".box").on("click", "p", function (event) {
            $(event.delegateTarget).css("background-color", "red");
        });
    </script>
</body>
</html>

四、event.isDefaultPrevented()

回傳event.preventDefault()方法是否被呼叫。

$( "a" ).click(function( event ) {
  alert( event.isDefaultPrevented() ); // false
  event.preventDefault();
  alert( event.isDefaultPrevented() ); // true
});

五、event.isImmediatePropagationStopped()

用來判斷event.stopImmediatePropagation()方法是否被呼叫。

六、event.isPropagationStopped()

用來判斷event.stopPropagation()方法是否被呼叫。

七、event.metaKey

如果是Windows作業系統的話，用來判斷是否在事件觸發時也按了windows鍵。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>event.metaKey demo</title>
    <style>
        body {
            background-color: #eef;
        }

        div {
            padding: 20px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <button value="Test" name="Test" id="checkMetaKey">Click me!</button>
    <div id="display"></div>

    <script>
        $("#checkMetaKey").click(function (event) {
            $("#display").text(event.metaKey);
        });
    </script>

</body>
</html>

八、event.namespace

用來顯示出該觸發事件是掛在哪個namespace之下。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>event.namespace demo</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <button>display event.namespace</button>
    <p></p>

    <script>

        $("button").click(function (event) {
            $("p").trigger("test.somethings");
            $("p").trigger("test.something");
        });

        $("p").on("test.somethings", function (event) {
            alert(event.namespace);
        });
        $("p").on("test.something", function (event) {
            alert(event.namespace);
        });
    </script>

</body>
</html>

九、event.pageX

用來指出滑鼠相對於document的X座標。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>event.pageX demo</title>
    <style>
        body {
            background-color: #eef;
        }

        div {
            padding: 20px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <div id="log"></div>

    <script>
        $(document).on("mousemove", function (event) {
            $("#log").text("pageX: " + event.pageX + ", pageY: " + event.pageY);
        });
    </script>

</body>
</html>

十、event.pageY

用來指出滑鼠相對於document的Y座標。

十一、event.preventDefault()

用來取消一元素的預設事件，如下範例取消<a>超連結的預設觸發事件。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>event.preventDefault demo</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <a href="http://jquery.com">default click action is prevented</a>
    <div id="log"></div>

    <script>
        $("a").click(function (event) {
            event.preventDefault();
            $("<div>")
              .append("default " + event.type + " prevented")
              .appendTo("#log");
        });
    </script>

</body>
</html>

十二、event.relatedTarget

指出觸發事件的相對節點。

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
        div {
            background-color: red;
        }
    </style>
</head>
<body>
    <div><a href="">aaa</a></div>
    <script>
        $("a").mouseout(function (event) {
            alert(event.relatedTarget.nodeName); // "DIV"
        });
    </script>
</body>
</html>

十三、event.result

event.result用來接收本身觸發事件的回傳值。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>event.result demo</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <button>display event.result</button>
    <p></p>

    <script>
        $("button").click(function (event) {
            return "hey";
        });
        $("button").click(function (event) {
            $("p").html(event.result);
        });
    </script>

</body>
</html>

十四、event.stopImmediatePropagation()

會停止該selector所有正在執行的event，也會停止bubbling event

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>event.stopImmediatePropagation demo</title>
    <style>
        p {
            height: 30px;
            width: 150px;
            background-color: #ccf;
        }

        div {
            height: 50px;
            width: 150px;
            background-color: #cfc;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    <p class="p1">paragraph</p>
    <div class="d1">division</div>
    <p class="p2">paragraph</p>
    <div class="d2">division</div>
    <div class="d3"><p class="p3">paragraph</p></div>
    <div class="d4"><p class="p4">paragraph</p></div>
    <div class="d5"><p class="p5">paragraph</p></div>

    <script>
        $(".p1").click(function (event) {
            event.stopImmediatePropagation();
        });
        $(".p1").click(function (event) {
            // This function won't be executed
            $(this).css("background-color", "#f00");
        });
        $(".d1").click(function (event) {
            // This function will be executed
            $(this).css("background-color", "#0f0");
        });

        $(".p2").click(function (event) {
            event.stopPropagation();
        });
        $(".p2").click(function (event) {
            // This function will be executed
            $(this).css("background-color", "#f00");
        });
        $(".d2").click(function (event) {
            // This function will be executed
            $(this).css("background-color", "#0f0");
        });

        $(".p3").click(function (event) {
            event.stopPropagation();
        });
        $(".p3").click(function (event) {
            // This function will be executed
            $(".p3").css("background-color", "#f00");
        });
        $(".d3").click(function (event) {
            // This function will be executed
            $(".d3").css("background-color", "#0f0");
        });

        $(".p4").click(function (event) {
            event.stopImmediatePropagation();
        });
        $(".p4").click(function (event) {
            // This function won't be executed
            $(".p4").css("background-color", "#f00");
        });
        $(".d4").click(function (event) {
            // This function will be executed
            $(".d4").css("background-color", "#0f0");
        });

        $(".p5").click(function (event) {
        });
        $(".p5").click(function (event) {
            // This function will be executed
            $(".p5").css("background-color", "#f00");
        });
        $(".d5").click(function (event) {
            // This function will be executed
            $(".d5").css("background-color", "#0f0");
        });
    </script>
</body>
</html>

十五、event.stopPropagation()

會停止父元素的event，也會停止bubbling event

請參考如上範例。

十六、event.target

指出目前觸發事件的節點。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>event.target demo</title>
    <style>
        span, strong, p {
            padding: 8px;
            display: block;
            border: 1px solid #999;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <div id="log"></div>
    <div>
        <p>
            <strong><span>click</span></strong>
        </p>
    </div>

    <script>
        $("body").click(function (event) {
            $("#log").html("clicked: " + event.target.nodeName);
        });
    </script>

</body>
</html>

十七、event.timeStamp

是一個時間函數，最常用來評估一個觸發事件的效能。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>event.timeStamp demo</title>
    <style>
        div {
            height: 100px;
            width: 300px;
            margin: 10px;
            background-color: #ffd;
            overflow: auto;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <div>Click.</div>

    <script>
        var last, diff;
        $("div").click(function (event) {
            if (last) {
                diff = event.timeStamp - last;
                $("div").append("time since last event: " + diff + "<br>");
            } else {
                $("div").append("Click again.<br>");
            }
            last = event.timeStamp;
        });
    </script>

</body>
</html>

十八、event.type

描述事件的名稱。

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <a href="#">aaa</a>

    <script>
        $("a").click(function (event) {
            alert(event.type); // "click"
        });
    </script>
</body>
</html>

十九、event.which

用來偵測滑鼠或鍵盤所按下的代碼。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>event.which demo</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <input id="whichkey" value="type something">
    <div id="log"></div>

    <script>
        $("#whichkey").on("keydown", function (event) {
            $("#log").html(event.type + ": " + event.which);
        });
    </script>

</body>
</html>