jQuery綁定事件

以怪力亂神 2018-11-15

展開全文

普通綁定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <script src="jquery-1.12.1.js"></script>
    <script>
        $(function () {

            //為按鈕綁定鼠標進入,鼠標離開,點擊事件
            //第一種寫法
//      $("#btn").mouseenter(function () {
//        $(this).css("backgroundColor","red");
//      });
//      $("#btn").mouseleave(function () {
//        $(this).css("backgroundColor","green");
//      });
//      $("#btn").click(function () {
//        alert("啊~我被點了");
//      });

            //第二種寫法:鏈式編程
//      $("#btn").mouseenter(function () {
//        $(this).css("backgroundColor","red");
//      }).mouseleave(function () {
//        $(this).css("backgroundColor","green");
//      }).click(function () {
//        alert("啊~我被點了");
//      });

            //第三種寫法:bind方法綁定事件
//      $("#btn").bind("click",function () {
//        alert("哦買雷電嘎嘎鬧");
//      });
//      $("#btn").bind("mouseenter",function () {
//        $(this).css("backgroundColor","red");
//      });
//      $("#btn").bind("mouseleave",function () {
//        $(this).css("backgroundColor","green");
//      });

            //第四種寫法:bind鏈式編程
//      $("#btn").bind("click",function () {
//        alert("哦買雷電嘎嘎鬧");
//      }).bind("mouseenter",function () {
//        $(this).css("backgroundColor","red");
//      }).bind("mouseleave",function () {
//        $(this).css("backgroundColor","green");
//      });
            //第五種寫法:使用鍵值對的方式綁定事件
//      $("#btn").bind({"click":function () {
//        alert("哦買雷電嘎嘎鬧");
//      },"mouseenter":function () {
//        $(this).css("backgroundColor","red");
//      },"mouseleave":function () {
//        $(this).css("backgroundColor","green");
//      }});
        });
    </script>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>

</body>
</html>

通過父元素綁定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            border: 2px solid green;
        }

        p {
            width: 150px;
            height: 50px;
            border: 1px solid red;
            cursor: pointer;
        }
    </style>
    <script src="jquery-1.12.1.js"></script>
    <script>
        //點擊按鈕為div中的p標簽綁定事件
        $(function () {
            $("#btn").click(function () {
                //為父級元素綁定事件,父級元素代替子級元素綁定事件
                //子級元素委托父級綁定事件

                //父級元素調用方法,為子級元素綁定事件
                $("#dv").delegate("p", "click", function () {
                    alert("啊!~,被點了");
                });
            });
        });

        //為元素綁定事件三種方式
        /*
        * 對象.事件名字(事件處理函數(shù));---$("#btn").click(function(){});
        * 對象.bind("事件名字",事件處理函數(shù));---$("#btn").bind("click",function(){});
        * 父級對象.delegate("子級元素","事件名字",事件處理函數(shù));---->$("#dv").delegate("p","click",function(){});
        *
        *
        * */
    </script>
</head>
<body>
<input type="button" value="為div綁定事件" id="btn"/>
<div id="dv">
    <p>這是p</p>
</div>
</body>
</html>

綁定相同事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      //為按鈕綁定多個相同事件
     $("#btn").click(function () {
       console.log("小蘇好猥瑣哦");
     }).click(function () {
       console.log("小蘇好美啊");
     }).click(function () {
       console.log("天冷了,注意身體");
     });

//      $("#btn").bind("click",function () {
//        console.log("哈哈,我又變帥了");
//      }).bind("click",function () {
//        console.log("我輕輕來,正如我輕輕走,揮一揮手,不帶走一個妹子");
//      });

      //bind方法綁定多個相同的事件的時候,如果使用的是鍵值對的方式,只能執(zhí)行最后一個
      // $("#btn").bind({"click":function () {
      //   console.log("如果有一天我邪惡了");
      // },"click":function () {
      //   console.log("請記住,我曾純潔過");
      // }});

    });

    //bind方法內部是調用的另一個方法綁定的事件

  </script>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>

</body>
</html>

不同方法的區(qū)別

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <script>
        /*
        *
        * 對象.事件名字(事件處理函數(shù));--->普通的寫法
        * 對象.bind(參數(shù)1,參數(shù)2);---->參數(shù)1:事件的名字,參數(shù)2:事件處理函數(shù)
        * 前兩種方式只能為存在的元素綁定事件,后添加的元素沒有事件
        *
        * 下面的兩種方式,可以為存在的元素綁定事件,后添加的元素也有事件
        * 父級元素調用方法,代理子級元素綁定事件
        * 父級元素對象.delegate("選擇器","事件名字",事件處理函數(shù));
        * 父級元素對象.on("事件名字","選擇器",事件處理函數(shù));
        *
        * 因為delegate方法中是調用的on的方法
        * 所以,以后直接用on就可以了
        *
        *
        *
        *
        * */
    </script>
</head>
<body>


</body>
</html>