liguofeng29’s blog

個人勉強用ブログだっす。

jQuery - イベントの紐付け(binding)

jQuery

jQueryは、javascriptのイベントバインドを簡略化している。

バインド関連メソッド

  • ready(fn) : ロードされたら呼ばれる関数紐付け

    • 代表的なのが、$(document).ready(fn) : body要素内にonloadがないこと。あればreadyは呼ばれない。

  • bind(type[,data], fn(eventObject))

    • デフォルト動作とバブルをキャンセルしたい場合、return false;
    • デフォルト動作キャンセルしたい場合、eventObject.preventDefalut()
    • バブルをキャンセルしたい場合、eventObject.stopPropagation()

  • delegate(selector, type[,eventData],handler(eventObject))

  • on(type[,selector][,data],handler(eventObject))

    • 1.7から使用
    • bind()とdelegate()の合体

  • one(type, data, fn) - bindと同じだが、一回だけ実行

  • trigger(type[,data]) - イベント発火

  • hover(over, out) : onmouseover,onmouseoutのイベントを紐づく
  • toggle(fn1, fn2[, fn3, fn4・・・]) : 順次実行
  • off(type[,selector],handler(eventObject)) : onの逆操作
  • unbind([type][,fn]) : bindの逆操作
  • undelegate(selector, eventType) : delegateの逆操作
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title> jQueryイベント紐付け </title>
</head>

<body>
    <input id="test1" type="button" value="button1" /><br />
    <input id="test2" type="button" value="button2(button1をtrigger)" /><br />

    <script type="text/javascript" src="jquery-1.12.0.min.js">
    </script>
    <script type="text/javascript">
    // documentにロード後
    $(document).ready(function()
    {
        $(document.body).append("documentがロード完了しました。<br>");
    });
    // clickイベント
    $("#test1").on("click", {
        book: "java"
    }, function(event)
    {
        $(document.body).append("button1がクリックされました。event.data : " + event.data.book + "<br>");
    });
    // trigger
    $("#test2").on("click", function(event)
    {
        $("#test1").trigger("click");
    });
    </script>
</body>

</html>