jQuery on()方法系結事件

在之前的學習中，我們接觸了各種事件操作。實際上，在 jQuery 中，我們除了採用“基本事件”的方式來為元素新增事件之外，還可以採用“係結事件”的方式。

在 jQuery 中，我們可以使用 on() 方法為元素系結一個事件或者多個事件。jQuery 的 on() 方法，有點類似於 JavaScript 的 addEventListener() 方法。

語法：

$().on(type, fn)

上面是 on() 方法的簡略語法，這也是為了照顧初學的小夥伴，以免一下子被複雜的語法繞進去。新手只需要掌握這個語法就可以了。對於 on() 方法的完整語法，感興趣的小夥伴可以自行搜尋了解一下。

type 是必選引數，它是一個字串，表示事件型別。例如單擊事件是 "click"，按下事件是 "mousedown"，以此類推。fn 也是必選引數，它是一個匿名函數，即 function(){}。

jQuery on()方法為“已經存在的元素”係結事件

在 jQuery 中，我們可以使用 on() 方法為“已經存在的元素”係結事件。

舉例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#btn").on("click",function(){
                alert("C語言中文網，給你初戀般的感覺");
            })
        })
    </script>
</head>
<body>
    <input id="btn" type="button" value="按鈕">
</body>
</html>

預覽效果如圖 1 所示。

圖 1：為“已經存在的元素”係結事件