jquery事件

于 2018-07-03 20:55:54 发布
阅读量222 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/onepunchmen00/article/details/78879068
版权

添加事件 



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>

<body>
    <h2>title</h2>
    <div class="item">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <ul>
        <li class="item1">新闻标题-1</li>
        <li class="item2">新闻标题-2</li>
        <li class="item3">新闻标题-3</li>
        <li class="item4">新闻标题-4</li>
        <li class="item5">新闻标题-5</li>
        <li class="item6">新闻标题-6</li>
        <li class="item7">新闻标题-7</li>
        <li class="item8">新闻标题-8</li>
        <li class="item9">新闻标题-9</li>
    </ul>
    <div id="p1">
        <div id="p1-1">
            <div id="p1-1-1">
                <div id="p1-1-1-1">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet architecto beatae delectus enim ipsum iusto laborum, libero minus perspiciatis quae quidem rem sed soluta velit veniam voluptatem voluptates voluptatibus. Repudiandae.
                    </p>
                </div>
            </div>
        </div>
    </div>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {

        //        $('p')
        //            .on('click', null, null, function (e) {
        //                console.log('p clicked');
        //            })
        //            .on('click', function (e) {
        //                console.log('p clicked2');
        //            })
        //            .on('click', { foo: 'bar' }, function (e) {
        //                console.log('p clicked3 %o', e.data); //不用管%o  e.data显示数据
        //            })
        //            .on('mouseover', function (e) {
        //                console.log('p mouseover');
        //            })
        //            .on('mouseover', function (e) {
        //                console.log('p mouseover2');
        //            })
        //            .on('click mouseover', function (e) {
        //                console.log('p click or mouseover');
        //            })

        //        $('ul').on('click', 'li.item2', function () {
        //            console.log('li clicked');
        //        })

        //        $('li').on('click', function (e) {
        //            console.log('Clicked: %o', $(this));
        //        })

        //        $('ul').on('click', 'li', function (e) {
        //            console.log('Clicked: %o', $(e.target));
        //        })

        //        $('div').on('click', function () {
        //            console.log(this.id);
        //        })
        //        $('p').on('click', function (e) {
        //            e.stopPropagation()
        //            console.log('clicked p');
        //        })

        //        $('p').on({
        //            click: function () {
        //                console.log('click');
        //            },
        //            mouseover: function () {
        //                console.log('mouseover');
        //            }
        //        })
//一次性事件 和on参数一样
        $('p').one('click', function(e) {
            console.log('clicked p');
        });
    });
    </script>
</body>

</html>



移除事件off


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>

<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur assumenda debitis fugiat laboriosam magni modi sequi, sint ullam! Ad consequatur cum excepturi modi nam quos. Dolor est laudantium minima ratione.</p>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {

        var clicked2 = function(e) {
            console.log('clicked2');
        };

        $('p').on('click', function(e) {
            console.log('clicked');
        }).on('click', clicked2).on('mouseover', function(e) {
            console.log('mouseover');
        });

        //        $('p').off('click')
        //        $('p').off('mouseover')
        //        $('p').off('click mouseover')//可以移除多个 用空号隔开事件
        //        $('p').off('click', clicked2)
    });//还可以直接.off（）不传参 直接移除所有事件了
    </script>
</body>

</html>


事件实例对象


stopImmediatePropagation 不仅阻止冒泡还阻止后续事件的绑定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>

<body>
    <div id="p1">
        <div id="p1-1">
            <div id="p1-1-1">
                <div id="p1-1-1-1">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet architecto beatae delectus enim ipsum iusto laborum, libero minus perspiciatis quae quidem rem sed soluta velit veniam voluptatem voluptates voluptatibus. Repudiandae.
                    </p>
                </div>
            </div>
        </div>
    </div>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {
        $('div').on('click', function(e) {
            console.log('clicked: %o', $(this));
        });
        $('p').on('click', function(e) {
            e.stopPropagation();
            console.log('clicked1: p');
            console.log(e.isPropagationStopped());//检测是否阻止冒泡
        });
        $('p').on('click', function(e) {
            console.log('clicked2: p');
        });
    });
    </script>
</body>

</html>

*jquery为了良好的兼容性，它的事件模型里面没有事件的捕获，只支持事件冒泡；

如果调用了preventDefault，isDefaultPrevented方法会返回true，否则返回false；

preventDefault 方法阻止了浏览器的默认事件处理，比如点击超链接跳转，点击表单的提交按钮刷新页面等等。


触发事件

trigger  triggerHandler

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>

<body>
    <ul>
        <li class="item1">新闻标题-1</li>
        <li class="item2">新闻标题-2</li>
        <li class="item3">新闻标题-3</li>
        <li class="item4">新闻标题-4</li>
        <li class="item5">新闻标题-5</li>
        <li class="item6">新闻标题-6</li>
        <li class="item7">新闻标题-7</li>
        <li class="item8">新闻标题-8</li>
        <li class="item9">新闻标题-9</li>
    </ul>
    <button id="all">全部标记为已读</button>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {
        $('li').on('click', function(e, arg1, arg2) {
            console.log('%o 已读', $(this));
            console.log(arg1);
            console.log(arg2);
            return $(this);
        });

        $('#all').on('click', function() {
            console.log($('li').trigger('click', [1, 2]));
            console.log($('li').triggerHandler('click'));
        });
    });
    </script>
</body>

</html>





快捷方法（一些事件可以直接写handler）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>

<body>
    <ul>
        <li class="item1">新闻标题-1</li>
        <li class="item2">新闻标题-2</li>
        <li class="item3">新闻标题-3</li>
        <li class="item4">新闻标题-4</li>
        <li class="item5">新闻标题-5</li>
        <li class="item6">新闻标题-6</li>
        <li class="item7">新闻标题-7</li>
        <li class="item8">新闻标题-8</li>
        <li class="item9">新闻标题-9</li>
    </ul>
    <button id="all">全部标记为已读</button>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {
        $('li').click(function(e) {
            console.log('%o 已读', $(this));
        });
        //        $('li').dblclick(function (e) {
        //            console.log('%o 又读', $(this));
        //        })


        $('#all').on('click', function() {
            console.log($('li').click());
        });
    });
    </script>
</body>

</html>


hover：弥补mouseover mouseout不足

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
    .outer {
        width: 200px;
        height: 200px;
        padding: 20px;
        color: #fff;
        background-color: green;
    }
    
    .inner {
        width: 100px;
        height: 100px;
        margin: 30px auto;
        padding: 20px;
        color: #fff;
        background-color: orange;
    }
    
    #outer2 {
        margin-top: 50px;
    }
    </style>
</head>

<body>
    <div class="outer" id="outer1">
        Outer 1
        <div class="inner" id="inner1">Inner 1</div>
    </div>
    <div class="outer" id="outer2">
        Outer 2
        <div class="inner" id="inner2">Inner 2</div>
    </div>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {
        function report(event) {
            event.stopPropagation();
            console.log(event.type + ' on ' + event.target.id);
        }

        $('#outer1').on('mouseover mouseout', report);
        $('#inner1').on('mouseover mouseout', report);
        $('#outer2').hover(report);//是上面方法的快捷方法
        $('#inner2').hover(report);
    });
    </script>
</body>

</html>


自定义事件

同样可以用on和trigger

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>

<body>
    <ul>
        <li class="item1">新闻标题-1</li>
        <li class="item2">新闻标题-2</li>
        <li class="item3">新闻标题-3</li>
        <li class="item4">新闻标题-4</li>
        <li class="item5">新闻标题-5</li>
        <li class="item6">新闻标题-6</li>
        <li class="item7">新闻标题-7</li>
        <li class="item8">新闻标题-8</li>
        <li class="item9">新闻标题-9</li>
    </ul>
    <button id="all">全部标记为已读</button>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {

        $('li').on('markAsRead', function(e) {
            console.log('%o 已读', $(this));
        });

        $('li').on('click', function(e) {
            $(this).trigger('markAsRead');
        });

        $('#all').on('click', function() {
            $('li').trigger('markAsRead');
        });
    });
    </script>
</body>

</html>


*自定义事件不是真正意义上的事件，可以把它理解为自定义函数，触发自定义事件就相当于调用自定义函数。



命名空间

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>

<body>
    <ul>
        <li class="item1">新闻标题-1</li>
        <li class="item2">新闻标题-2</li>
        <li class="item3">新闻标题-3</li>
        <li class="item4">新闻标题-4</li>
        <li class="item5">新闻标题-5</li>
        <li class="item6">新闻标题-6</li>
        <li class="item7">新闻标题-7</li>
        <li class="item8">新闻标题-8</li>
        <li class="item9">新闻标题-9</li>
    </ul>
    <button id="even">点击偶数</button>
    <button id="odd">点击奇数</button>
    <button id="all">全部点击</button>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {

        $('li:odd').on('click.even', function(e) {
            console.log('%o 偶数', $(this));
        });

        $('li').eq(0).on('click.even.0', function(e) {
            console.log('%o 0', $(this));
        });

        $('li:even').on('click.odd', function(e) {
            console.log('%o 奇数', $(this));
        });

        $('#even').on('click', function() {
            $('li').trigger('click.even');
        });

        $('#odd').on('click', function() {
            $('li').trigger('click.odd');
        });

        $('#all').on('click', function() {
            //            $('li').trigger('click');
            $('li').trigger('click.even.0');
        });

        //        $('li').off('.even')
    });
    </script>
</body>

</html>


花江夏树
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值