jquery里面的绑定与解除绑定事件

最新推荐文章于 2024-05-18 18:58:15 发布

weixin_45021446

最新推荐文章于 2024-05-18 18:58:15 发布

阅读量180

点赞数

本文链接：https://blog.csdn.net/weixin_45021446/article/details/108075739

版权

// PS:现在都用on来绑定事件,用off来解除绑定，on代替了下列所有方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div,
        .div1{
            width: 300px;
            height: 300px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="divID"></div>
<p>Hit Me!</p>
<div class="div1"></div>
</body>
<script src="./../js/jquery-1.12.4.min.js"></script>
<script>
    function f1() {
        alert("hello, bind绑定事件");
    }
    // 通过bind绑定事件，而unbind解除bind绑定的事件，要与之对应
    // bind还支持链式调用
    $("#divID").bind("mouseenter", f1).css("backgroundColor", "green");
    $("#divID").unbind("mouseenter");
  
  	// PS：在JQ1.7版本之后已移除
    // 为DOM不存在的元素/动态加载的元素，绑定事件可以用live方法，而die解除live绑定的事件，要与之对应
    // $("body").append("<a id='anchor'>I go no where</a>");
    // function f2() {
    //     alert("hello, live绑定事件");
    // }
    // $("#anchor").live("click", f2);
    // $("#anchor").die("click");


    // delegate方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
    // 使用delegate方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
    // delegate还支持链式调用
    // undelegate是移除delegate的绑定事件
    function f3() {
        alert("hello, delegate绑定事件");
    }
    $("body").delegate("p", "click", f3).css("color", "green");
    $("body").undelegate("p", "click");
</script>
</html>