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("啊!~,被点了");
                });
            });
        });

        //为元素绑定事件三种方式
        /*
        * 对象.事件名字(事件处理函数);---$("#btn").click(function(){});
        * 对象.bind("事件名字",事件处理函数);---$("#btn").bind("click",function(){});
        * 父级对象.delegate("子级元素","事件名字",事件处理函数);---->$("#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方法绑定多个相同的事件的时候,如果使用的是键值对的方式,只能执行最后一个
      // $("#btn").bind({"click":function () {
      //   console.log("如果有一天我邪恶了");
      // },"click":function () {
      //   console.log("请记住,我曾纯洁过");
      // }});

    });

    //bind方法内部是调用的另一个方法绑定的事件

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

</body>
</html>

不同方法的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <script>
        /*
        *
        * 对象.事件名字(事件处理函数);--->普通的写法
        * 对象.bind(参数1,参数2);---->参数1:事件的名字,参数2:事件处理函数
        * 前两种方式只能为存在的元素绑定事件,后添加的元素没有事件
        *
        * 下面的两种方式,可以为存在的元素绑定事件,后添加的元素也有事件
        * 父级元素调用方法,代理子级元素绑定事件
        * 父级元素对象.delegate("选择器","事件名字",事件处理函数);
        * 父级元素对象.on("事件名字","选择器",事件处理函数);
        *
        * 因为delegate方法中是调用的on的方法
        * 所以,以后直接用on就可以了
        *
        *
        *
        *
        * */
    </script>
</head>
<body>


</body>
</html>