-jq-事件委托-bind绑定事件-bind绑定事件-append（）-事件委托：delegate(‘目标子元素选择器‘,‘事件类型‘,回调函数)

最新推荐文章于 2023-04-14 22:13:48 发布

喵帕斯_喵太

最新推荐文章于 2023-04-14 22:13:48 发布

阅读量141

点赞数

分类专栏： jquery 文章标签： javascript

本文链接：https://blog.csdn.net/miaopasi_poi/article/details/116667359

版权

jquery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

01- jq-事件委托

<body>
    <ul>
        <li>隔壁老王1</li>
        <li>隔壁老王2</li>
        <li>隔壁老王3</li>
        <li>隔壁老王4</li>
        <li>隔壁老王5</li>
        <li>隔壁老王6</li>
        <li>隔壁老王7</li>
        <li>隔壁老王8</li>
        <li>隔壁老王9</li>
        <li>隔壁老王10</li>
    </ul>

    <script>
        $(function () {
            const $ul = $('ul')

            // 1. 简单事件注册
            /* $ul.mouseenter(function () {
            $(this).css({ backgroundColor: 'green' })
        }) */

            // 绑定鼠标移出事件
            /* $ul.mouseleave(function () {
            $(this).css({ color: '#fff' })
        }) */

            // jq中有事件列队：jq中不会使用on注册事件：事件一定可以同时存在多个相同类型的事件

            // bind绑定事件：bind('事件类型',回调函数)
            /*  $ul.children().bind('mouseenter mouseleave', function () {
             console.log('here')
             $(this).css({ backgroundColor: 'green' })
         }) */
            // 可以绑定多个事件：bind('事件1  事件2 ',共用一个回调函数)

            /*  $ul.append($('<li>新老王</li>')) */
            // bind缺点：不会给动态产生的元素绑定事件

            // 事件委托：delegate('目标子元素选择器','事件类型',回调函数)

            // 原生（事件对象.target）结合jq
            /*  $ul.mouseover(function (e) {
             // console.log(e.target)
             if (e.target.nodeName == 'LI') {
                 $(e.target).css({ backgroundColor: 'green' })
             }
 
         }) */

            // jq简化了原生的事件委托
            $ul.delegate('li', 'mouseover', function () {
                // 永远只触发当前ul中的li的事件：别的都不会触发
                // console.log(this)
                $(this).css({ backgroundColor: 'green' })
            })
        })
    </script>
</body>

注意：
1.bind绑定事件：bind(‘事件类型’,回调函数)
1.1.可以绑定多个事件：bind('事件1 事件2 ',共用一个回调函数)
1.2. bind缺点：不会给动态产生的元素绑定事件
2.0.事件委托：delegate(‘目标子元素选择器’,‘事件类型’,回调函数)
2.1.永远只触发当前ul中的li的事件：别的都不会触发

喵帕斯_喵太

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
-jq-事件委托-bind绑定事件-bind绑定事件-append（）-事件委托：delegate(‘目标子元素选择器‘,‘事件类型‘,回调函数)

01- jq-事件委托<body> <ul> <li>隔壁老王1</li> <li>隔壁老王2</li> <li>隔壁老王3</li> <li>隔壁老王4</li> <li>隔壁老王5</li> <li>隔壁老王6</li>
复制链接

扫一扫

专栏目录