jquery 事件bind,on,live,delegate 的一些总结

最新推荐文章于 2020-07-17 10:29:46 发布

李书明

最新推荐文章于 2020-07-17 10:29:46 发布

阅读量285

点赞数 1

分类专栏： jquery

本文链接：https://blog.csdn.net/lsmxx/article/details/103468129

版权

jquery 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

这里使用的jquery是1.11.3

常见 DOM 事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

以“click" 事件为例，讲解如何使用这些事件

使用方式一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.11.3.min.js"></script>
    <script>
        $(function () {
            $('#btn').click(function () {
                console.log('clicking me')
            })
        })
    </script>
</head>
<body>
<button id="btn">click me</button>
</body>
</html>

使用方式二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.11.3.min.js"></script>
    <script>
        $(function () {
            $('#btn').bind('click',function () {
                console.log('clicking me')
            })
        })
    </script>
</head>
<body>
<button id="btn">click me</button>
</body>
</html>

使用方式三

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.11.3.min.js"></script>
    <script>
        $(function () {
            $('#btn').on('click', function () {
                console.log('clicking me')
            })
        })
    </script>
</head>
<body>
<button id="btn">click me</button>
</body>
</html>

使用方式四

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.11.3.min.js"></script>
    <script>
        $(function () {
            $('body').delegate('#btn', 'click', function () {
                console.log('clicking me')
            })
        })
    </script>
</head>
<body>
<button id="btn">click me</button>
</body>
</html>

已经弃用的 live

live()支持jquery1.8-

以上几种使用方式有什么区别呢？

从jquery1.7后推荐使用on绑定事件，on()是bind(), live(), delegate()方法的替代品。

值得注意的是：on不仅仅作用于当前绑定的元素，对于未来有脚本语言创建的元素也会有同样的作用。

继续看示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #demo p{
            cursor: pointer;
        }
    </style>
    <script src="jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="demo">
    <button id="btn">添加新的p元素</button>
    <p>第一个p元素</p>
    <p>第二个p元素</p>
    <p>第三个p元素</p>
    <p>第四个p元素</p>
    <p>第五个p元素</p>
</div>
<script>
    $(function () {
        $("#btn").click(function () {
            $("#demo").append("<p>这是一个新的p元素</p>");
        });
        
        $('#demo p').click(function () {
            alert($(this).text());
        })

        // 或者使用以下方式
        // $('#demo p').bind('click', function () {
        //     alert($(this).text());
        // })
    })

</script>
</body>
</html>

上面代码运行的测试结果是：

对于已存在的<p>元素，'click'事件是起作用的；但对于新添加的<p>元素，我们写的'click'事件并不感冒

无论直接绑定click，还是使用bind 绑定click，结果都一样

如果使用”on“绑定click，结果又如何?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #demo p{
            cursor: pointer;
        }
    </style>
    <script src="jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="demo">
    <button id="btn">添加新的p元素</button>
    <p>第一个p元素</p>
    <p>第二个p元素</p>
    <p>第三个p元素</p>
    <p>第四个p元素</p>
    <p>第五个p元素</p>
</div>
<script>
    $(function () {
        $("#btn").click(function () {
            $("#demo").append("<p>这是一个新的p元素</p>");
        });

         $('#demo p').on('click', function () {
             alert($(this).text());
         })
    })

</script>
</body>
</html>

上面的代码，测试结果同bind一样：对于新添加的元素<p>，并不能执行click事件

其实，我们对on的使用并不完全了解

jquery文档中bind和on函数绑定事件的用法：

.bind(events [,eventData], handler)

.on(events [,selector] [,data], handler)

从文档中可以看出，.on方法比.bind方法多一个参数'selector'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #demo p{
            cursor: pointer;
        }
    </style>
    <script src="jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="demo">
    <button id="btn">添加新的p元素</button>
    <p>第一个p元素</p>
    <p>第二个p元素</p>
    <p>第三个p元素</p>
    <p>第四个p元素</p>
    <p>第五个p元素</p>
</div>
<script>
    $(function () {
        $("#btn").click(function () {
            $("#demo").append("<p>这是一个新的p元素</p>");
        });

        //正确的使用方式
        $('#demo').on('click','p',function () {
            alert($(this).text())
        })
    })
</script>
</body>
</html>

.on(events [,selector] [,data], handler)

那么这个selector参数的好处是什么?

好处在于.on方法进行事件委托，子元素把事件委托给父元素进行事件处理；

这样的好处

1.万一子元素非常多，给每个子元素都添加一个事件，会影响到性能；

2.为动态添加的元素也能绑上指定事件；

李书明

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery 事件bind,on,live,delegate 的一些总结

这里使用的jquery是1.11.3常见 DOM 事件：鼠标事件键盘事件表单事件文档/窗口事件 click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave ...
复制链接

扫一扫