jQuery 事件

2023-09-24 11:59:27

1. jQuery 事件注册
2. jQuery 事件处理
- off() 解绑事件
- trigger() / triggerHandler() 自动触发事件
3. jQuery 事件对象

1. jQuery 事件注册

普通事件注册

语法：

element.事件(function(){
    //事件处理程序
})

可以注册多个事件，不用担心事件覆盖等问题。

普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法(暂未知，待补充)。

其他事件和原生基本一致。
比如mouseover、 mouseout、 blur、 focus、 change、 keydown、 keyup、 resize、 scroll 等

演示代码

<body>
    <div></div>
    <script>
        $(function() {
            $("div").click(function() {
                $(this).css("background", "purple");
            });
            $("div").mouseenter(function() {
                $(this).css("background", "skyblue");
            });
        })
    </script>
</body>

on() 事件注册

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

on() 方法在匹配元素上绑定一个或多个事件的事件处理函数

语法：

element.on(events,[selector],fn)

events:一个或多个用空格分隔的事件类型，如"click"或"keydown" 。
selector: 元素的子元素选择器 "selector"。
fn:回调函数即绑定在元素身上的侦听函数。

多事件绑定

可以绑定多个事件，多个不同的相对应处理事件处理程序，事件与侦听函数包装成一个对象作为参数传进on()，如下：

$("div").on({
	mouseover: function(){
        //事件处理程序
    },
	mouseout: function(){
        //事件处理程序
    },
	click: function(){
        //事件处理程序
    }
});

如果事件处理程序相同，可以绑定多个事件并共用一个侦听函数。如下：

$("div").on("mouseover mouseout", function() {
	$(this).toggleClass("current");
});

事件委托

因为 on() 方法支持事件冒泡，所以可以事件委派操作。

事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

可以通过指定子元素来触发父元素事件，且一旦指定了这个子元素，就只能是这个子元素来促发，其他子元素无法触发父元素的事件。如果没有指定，子元素们都可触发父元素事件。

<ul>
    <li class="one">1</li>
    <li class="two">2</li>
    <li class="three">3</li>
</ul>
<script>
    /*
    $("ul").on("click",function() {
		alert("hello world!");
	});
	点击 1 ， 2， 3都会执行监听函数
    */
	$("ul").on("click", "li", function() {
		alert("hello world!");
	});
    //点击 1 ， 2， 3都会执行监听函数
    
    /*
    $("ul").on("click", ".one", function() {
		alert("hello world!");
	});
	只有点击1 才会执行监听函数
	*/
</script>

在此之前有bind(), live() delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。

动态创建的元素的事件绑定

动态创建的元素， $("selector").click() 没有办法绑定事件， on() 可以给动态生成的元素绑定事件

<div></div>
<script>
    /*
    动态元素不可直接绑定事件
    $("div p").click(function(){
        alert("无法给子元素p绑定事件")
    })
    $("div p").on("click",function(){
    	//...
    })
    */
	$("div").on("click","p", function(){
		alert("俺可以给动态生成的元素绑定事件")
	});
	$("div").append($("<p>我是动态创建的p</p>"));
</script>

one() 绑定事件

用one() 绑定的事件被触发后指挥执行一次监听函数，下次触发不再执行。

$(selector).one("click",function(){
    //事件处理程序
})

2. jQuery 事件处理

off() 解绑事件

事件解绑：当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件解绑。

jQuery 提供了多种事件解绑方法：die() / undelegate() / off() 等

off() 方法可以移除通过 on() 方法添加的事件处理程序

解绑元素所有事件处理程序
```
$(selector).off();
//eg:
$("p").off();
```

只解绑元素上面的指定的事件

$(selector).off(event);
//eg:
$("p").off("click");

解绑事件委托

$(selector).off(event, selector)
//eg:
$("ul").off("click", "li");

trigger() / triggerHandler() 自动触发事件

在有些情景下，需要自动触发事件，有如下三种方式，都为一次性的

$(selector).event(); // 第一种简写形式
//eg:
$("div").on("click", function() {
	alert(11);
});
$("div").click();

$(selector).trigger(event) // 第二种自动触发模式
//eg:
$("div").on("click", function() {
   alert(11);
});
$("div").trigger("click");

$(selector).triggerHandler(event) // 第三种自动触发模式
//eg:
$("input").on("focus", function() {
	$(this).val("表单控件光标会闪烁");
});
$("input").triggerHandler("focus");

triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别。

3. jQuery 事件对象

jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。

$(selector).on(events,[selector],function(event) {})

注意：jQuery中的 event 对象使用，可以借鉴 API 和 DOM 中的 event 。

码农公寓