jQuery事件 - 掘金

jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制

jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力

注册事件

简单事件绑定

click，单击事件
mouseenter，鼠标进入事件
mouseleave，鼠标离开事件
scroll，滚动事件

**缺点：**一次只能绑定一个事件

on方法

on 方法 jQuery1.7之后，jQuery用on统一了所有事件的处理方法。

语法：jQuery对象.on('events'[,selector][,data],'fn')

参数详解

events，事件类型，绑定事件的名称可以是由空格分隔的多个事件
selector，选择器，执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
fn，事件处理函数

<div id="box">
    <span></span>
	<span></span>
</div>

<script>
// 表示给 id为box的元素 绑定代理事件，但必须是它的内部元素span才能触发这个事件
// 只有点击span的时候才会触发这个事件
$('#box').on('click', 'span', function () {
    console.log(this); //span
});

// 表示给 id为box的元素 绑定代理事件，并且由自己触发。
// 点击box就会触发
 $('#box').on('click',function () {
     console.log(this); //div
 })
</script>

解绑事件

语法：jQuery对象.off(参数)

不传参数，解绑匹配元素的所有事件

<div id="box">
     <span>span1</span>
	 <span>span2</span>
 </div>

<script>
$('#box').on('click mouseenter', 'span', function () {
    console.log(this); 
});

//解绑所有的事件
$('#box').off();
</script>

传入对应的事件类型，解绑匹配元素对应的事件

<div id="box">
     <span>span1</span>
	 <span>span2</span>
 </div>

<script>
$('#box').on('click mouseenter', 'span', function () {
    console.log(this); 
});
$('#box').off('click');  //click解绑, mouseenter没有解绑
</script>

传入off( “click”, “**” )，解绑所有代理的click事件，元素本身的事件不会被解绑

<div id="box">
     <span>span1</span>
	 <span>span2</span>
 </div>

<script>
$('#box').on('click mouseenter', 'span', function () {
    console.log(this);  //span的click不会触发
});
$('#box').on('click mouseenter',function () {
        console.log(this); //不影响
});
 $('#box').off('click', '**');
</script>

事件触发

简单事件触发

**作用: **手动触发我们给元素绑定的事件

**语法: **jQuery对象.click(); //触发click事件
trigger方法触发事件

**作用: **根据传入的参数手动触发我们给元素绑定的事件

**语法: **jQuery对象.trigger('事件名'); //触发指定的事件事件
triggerHandler触发

**作用: **触发指定事件，不触发浏览器行为,也不会产生冒泡

**语法: **jQuery对象.triggerHandler('事件名');

jQuery事件对象

对象属性	解释
event.type	事件类型
event.data	存储绑定事件时传递的附加数据
event.target	点了谁就是谁
event.currentTarget	当前DOM元素，等同于this
event.delegateTarget	代理对象
screenX和screenY	对应设备屏幕最左上角的值
offsetX和offsetY	点击的位置距离元素的左上角的位置
clientX和clientY	距离可视区左上角的位置
pageX和pageY	距离页面最顶部的左上角的位置（会计算滚动条的距离）
event.keyCode	键盘码
event.stopPropagation()	阻止事件冒泡行为
event.preventDefault()	阻止浏览器默认行为

jQuery事件拓展

jQuery事件的发展历程

简单事件绑定-->bind事件绑定-->delegate事件绑定-->on事件绑定

bind事件绑定

可以绑定多个事件,不支持动态代理。

不推荐使用，jQuery1.7版本后被on取代

语法：jQuery.bind('事件类型', 事件处理函数)

$("p").bind("click mouseenter",function(){
    //code...
});

delegate事件绑定

比bind强大, 支持动态绑定事件

不推荐使用

语法：jQuery.delegate('selector','events' ,fn)

参数详解:

selector，选择器，要绑定事件的元素
events，事件类型
fn，事件处理函数

$(".parentBox").delegate("p","click", function(){
    //为 .parentBox下面的所有的p标签绑定事件
});

bind和delegate解绑事件的方式

unbind() 方式

$(selector).unbind(); //解绑所有的事件

$(selector).unbind(“click”); //解绑指定的事件

undelegate() 方式

$( selector ).undelegate(); //解绑所有的delegate事件

$( selector).undelegate( “click” ); //解绑所有的click事件

one绑定事件

不管是 bind() 还是 on() ,绑定事件后都不是自动移除事件,需要通过 unbind()和 off() 来手工移除。

jQuery 提供了 one() 方法,绑定元素执行完毕后自动移除事件,方法仅触发一次的事件。

墙裂推荐使用

type: 添加到元素的一个或多个事件。
data: 将要传递给事件处理函数的数据映射
fn: 每当事件触发时执行的函数。