jQuery事件相关

最新推荐文章于 2021-12-29 08:06:14 发布

金胜涛

最新推荐文章于 2021-12-29 08:06:14 发布

阅读量121

点赞数

分类专栏：前端 javascript jquery

本文链接：https://blog.csdn.net/weixin_44054088/article/details/89576115

版权

前端同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

javascript

15 篇文章 0 订阅

订阅专栏

jquery

4 篇文章 0 订阅

订阅专栏

jQuery事件绑定

<body>
    <button></button>
    <script>
        /**jQuery中有两种事件绑定的方式
         * 1、eventName（fn）
         * 编码效率略高/部分事件jQuery没有实现，所以不能添加
         * 2、on（eventName，fn）
         * 编码效率略低/所有js事件都可以添加 
         
         注意点：两种方法都可以给元素添加多个相同或不同的事件，不会覆盖
         * **/
        $('button').click(function(){
            alert('123');
        })

        $('button').on('click',function(){
            alert('456');
        })
    </script>
</body>

jQuery事件解绑

$(‘DOM元素’).off()

**注意：**off()方法如果不传递参数，会移除所有的事件

$(‘DOM元素’).off(‘click’)

**注意：**如果传递一个参数，会移除所有指定类型的事件

$(‘DOM元素’).off(‘click’,fun)

**注意：**如果传递两个参数，会移除所有指定类型的指定事件

jQuery事件冒泡和默认行为

阻止事件冒泡的方法

方法一：在需要阻止冒泡的元素的事件处理函数中加入

return false；

        $('.content').click(function(){
            console.log('content');
            return false;
        })

方法二：调用event对象下的stopPropagation（）方法

 $('.box').click(function(eve){
            console.log('box');
            eve.stopPropagation();
        })

阻止默认事件的方法

<body>
    <a href="http://www.baidu.com">注册</a>
    <script>
        $('a').click(function(eve){
            alert('注册界面');
            //方法一
            // return false;

            //方法二
            eve.preventDefault();
        })
    </script>
</body>

jQuery事件自动触发

自动触发事件的两种方法

方法一：$(‘DOM元素’).trigger(‘事件名’)

方法二：$(‘DOM元素’).triggerHandler(‘事件名’)

以上两种方法的区别：

1、如果利用trigger自动触发事件，会触发事件冒泡

如果用triggerHandler自动触发事件，不会触发事件冒泡

2、如果利用trigger自动触发事件，会触发默认行为

如果用triggerHandler自动触发事件，不会触发默认行为

jQuery自定义事件

想要自定义事件必须满足两个条件：

1、事件必须是通过 ‘on’ 绑定的

2、事件必须通过trigger来触发

        <script>
            $('div').on('myClick',function(){
                console.log('123');
            })
            $('div').trigger('myClick');
        </script>

jQuery事件命名空间

注意：

1、利用trigger触发子元素带命名空间的事件，那么父元素带相同命名空间的事件也会被触发，而父元素没有命名空间的事件不会被触发

2、利用trigger触发子元素不带命名空间的事件，那么子元素和父元素所有相同类型的事件都会被触发

jQuery事件委托

什么是事件委托：子元素的事件由父元素代替执行

<body>
    <ul>
        <li>我是第一个li</li>
        <li>我是第二个li</li>
        <li>我是第三个li</li>
    </ul>
    <button>点击添加一个li</button>
    <script>
        // $('li').on('click', function () {
        //     console.log($(this).html());
        // })

    	//delegate() 事件委托方法
        $('ul').delegate('li','click',function(){
            console.log($(this).html());
        })

        $('button').click(function(){
            $('ul').append('<li>我是新增的li</li>')
        })
    </script>
</body>

**注意：**在jQuery中如果通过核心函数找到的元素不止一个，那么在添加事件的时候，jQuery会遍历所有找到的元素，给所有找到的元素添加事件

jQuery移入移除事件

1、移入：mouseover/移出：mouseout

子元素移入移出时会触发父元素的事件

$('div').mouseover(function(){});
$('div').mouseout(function(){});

2、移入：mouseenter/移出：mouseleave

子元素移入移出时不会触发父元素的事件（推荐使用）

$('div').mouseenter(function(){});
$('div').mouseleave(function(){});

3、hover：同时监听移入和移出事件

//鼠标移入时触发前一个function 移出时触发后一个function，也可以只传一个function，效果一样
$('div').hover(function(){},function(){});

金胜涛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery事件相关

jQuery事件绑定<body> <button></button> <script> /**jQuery中有两种事件绑定的方式 * 1、eventName（fn） * 编码效率略高/部分事件jQuery没有实现，所以不能添加 * 2、on（eventName，f...
复制链接

扫一扫

专栏目录