对jQuery中的事件绑定和解绑·整理（二）

最新推荐文章于 2022-07-28 15:31:26 发布

你们看不见我丶

最新推荐文章于 2022-07-28 15:31:26 发布

阅读量233

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_43476293/article/details/106905452

版权

jQuery 事件注册

1、jQuery 为我们提供了方便的事件注册机制，是开发人员的福音。
优点: 操作简单，且不用担心事件覆盖等问题。
缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。
关于用法下面直接上代码吧：
（小伙伴们在使用jQuery之前记得先引入jQuery文件，上一篇文章已经讲到如何去官网下载了）

<body>
    <div></div>
    <script>
        $(function() {
            $('div').click(function() {
                $(this).css('background', 'red');
            });
            $('div').mouseenter(function() {
                $(this).css('background', 'blue');
            });
        })
    </script>
</body>

2、因为普通注册事件方法的不足，jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等，其中最好用的是: on()。

事件处理 on() 绑定事件

优势1：可以绑定多个事件，多个事件处理程序

$('div').on({//多个事件以对象的形式书写
			click: function(){},
			mouseover: function(){},
			mouseout: function(){}
});

//如果事件处理程序相同
$('div').on('click mouseover', function(){
	$(this).css('background', 'red');
});

优势2：可以事件委派。即把原来要加给子元素的事件绑定在父元素的身上。

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        /$(function() {
            $('ul').on('click', 'li', function() {
                // $(this).html('点到我了');
                $(this).css('backgroundColor', 'red').siblings().css('backgroundColor', '');
            });
        });
        
        // 对比原生js代码用事件委托：
        // var ul = document.querySelector('ul');
        // ul.addEventListener('click', function (e) {
        //     for (var i = 0; i < ul.children.length; i++) {
        //         ul.children[i].style.backgroundColor = '';
        //     }
        //     e.target.style.backgroundColor = 'red';
        // });
    </script>
</body>

事件处理 off() 解绑事件

当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件解绑
jQuery 为我们提供了多种事件解绑方法：die() / undelegate() / off() 等，甚至还有只触发一次的事件绑定方法 one()
下面先来说一下off()

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        $(function() {
            $('ul').on('click', 'li', function() {
                $(this).css('backgroundColor', 'red').siblings().css('backgroundColor', '');
            });
		off解绑事件
		//解绑ul身上所有事件
		$('ul').off();
		//解绑ul身上点击事件
		$('ul').off('click');
		//解绑li的点击事件
		$('ul').off('click', 'li');
        });
    </script>

</body>

只会触发一次的one()方法

			one() 但是它只能触发事件一次
            $('div').one('click', function() {
                alert("我时只会触发一次的one()方法");
            })

事件处理 trigger() 自动触发事件
有些时候，在某些特定的条件下，我们希望某些事件能够自动触发

<body>
    <div></div>
    <input type="text">
      
    <script>
    $(function() {
      // 绑定事件
      $("div").on("click", function() {
        alert("div");
      });

      // 自动触发事件
      // 1. 元素.事件()
      // $("div").click();会触发元素的默认行为
      
      // 2. 元素.trigger("事件")
      // $("div").trigger("click");会触发元素的默认行为
      $("input").trigger("focus");
      
      // 3. 元素.triggerHandler("事件") 不会触发元素的默认行为
      $("input").on("focus", function() {
        $(this).val("你好吗");
      });
      // 一个会获取焦点，一个不会
      $("div").triggerHandler("click");
      // $("input").triggerHandler("focus");
    });
	// 注意： 默认行为解释：  当触发了text文本框获取焦点事件之后，会有一个默认行为就是光标停留
	// 事件发生之后，会执行俩逻辑：1.事件处理程序，2.事件默认行为（如果有）
	// 这里的默认行为，文本框获取焦点之后的默认光标停留行为
    </script>
</body>