49 jQuery事件

技术交流QQ群:1027579432，欢迎你的加入！

欢迎关注我的微信公众号：CurryCoder的程序人生

1.jQuery事件注册

单个事件注册

语法：

element.事件(function(){})
// 例如
$("div").click(function(){ // 事件处理程序 })

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

2.jQuery事件处理

2.1 事件处理on()绑定事件

on()方法在匹配元素上绑定一个或多个事件的事件处理函数。
语法：
```
element.on(events, [selector,] fn)
```
- events:一个或多个用空格分开的事件类型，如click、keydown等
- selector:元素的子元素选择器。
- fn:回调函数即绑定在元素身上的监听函数。

on()方法的优势1：可以绑定多个事件处理程序。

$("div").on({mouseenter: function(){},click: function() {},mouseleave: function() {}
});

如果事件处理程序相同，可合并在一起书写：

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

on()方法的优势2：可以实现事件委托操作。事件委托即把原来加给子元素身上的事件绑定到父元素身上，就是把事件委托给父元素。在此之前，有bind()、live()、delegate()等方法来处理事件绑定或事件委派，最新版本的请使用on代替它们。
```
$("ul").on("click", "li", function(){alert(11);
})  // click是绑定在ul身上，但是事件的触发者是ul的子元素li
```
on()方法的优势3：动态创建的元素，click没有办法绑定事件。on()可以给动态生成的元素绑定事件[重点]。
```
<ol></ol>var li = $("<li>我是后来创建的小li</li>");
$("ol").append(li);$("ol").on("click", "li", function(){alert(123);
})
```

2.2 事件处理off()解绑事件

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

<div></div>
<ul><li>我们都是好孩子</li><li>我们都是好孩子</li><li>我们都是好孩子</li><li>我们都是好孩子</li><li>我们都是好孩子</li>
</ul>$("div").off();  // 解除了div身上的所有事件处理程序
$("div").off("click"); // 解除了div身上的点击事件$("ul").on("click", "li", function(){alert(11);
})$("ul").off("click", "li");  // 解除事件委托

如果有的事件只想触发一次，可以使用one()来绑定事件。

// one()只能触发事件一次
$("p").one("click", function(){alert(11);
})

2.3 自动触发事件trigger()

有些事件希望自动触发，比如轮播图自动播放功能与点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。
第一种简写形式：
```
element.click()
```
第二种自动触发模式：
```
element.trigger("事件")
```

第三种自动触发模式，不会触发元素的默认行为。

element.triggerHandler("事件")
$("input").on("focus", function(){$(this).val("你好吗");
});
// 不会触发元素的默认行为
$("input").triggerHandler("focus");
// 会触发元素的默认行为
$("input").focus();
// 会触发元素的默认行为
$("input").trigger("focus");

3.jQuery事件对象event

事件被触发，就会有事件对象的产生。
```
element.on(events, [seletor,] function(event){})
```
- 阻止默认行为:event.preventDefault()或return false；
- 阻止冒泡:event.stopPropagation()

4.资料下载

笔记及代码，欢迎 star,follow,fork…

49 jQuery事件相关推荐

javascript事件之：jQuery事件中实例对象和拓展对象之间的通信
我们总结过jQery事件中的实例原型对象对外接口和拓展对象,现在我们看看他们是如何进行通信联系的. 先来看便捷方法: 1 //调用的还是实例对象下的on()和trigger() 2 jQuery.ea ...
jQuery事件，对象以及插件
回顾 1 基本使用 2 jquery 选择器 3 筛选器过滤查找串联 4 DOM 操作内部插入 append()appendTo()prepend()prependTo() 外部插入 afte ...
jQuery事件机制
文章目录 jQuery事件机制 jQuery事件发展历程(了解) on注册事件(重点) on事件注册的两种方式事件的执行顺序事件解绑 off方式(推荐) 触发事件 jQuery事件对象案例:钢琴 ...
第79天：jQuery事件总结（二）
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 一.合成事件 jQuery有两个合成事件--hove ...
JQuery事件绑定，bind与on区别
jquery事件绑定 bind:向匹配元素添加一个或多个事件处理器 $(selector).bind("click",data,function); live:向当前或未来的匹配元 ...
jQuery事件的链式写法
<head> <title>jQuery事件的链式写法</title> <script src="jquery-1.9.1.js&q ...
2017-6-3 jQuery 事件 DOM操作
1. jQuery 事件: ////hover:相当于相当于把mouseover()mouseout()合二为一//$("#div1").hover(function ()//{/ ...
jQuery事件之鼠标事件
jQuery事件之鼠标事件鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的. (1):click事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发. ...
jQuery 事件用法详解
目录简介实现原理事件操作绑定事件解除事件触发事件事件委托事件操作进阶阻止默认事件阻止事件传播阻止事件向后执行命名空间自定义事件事件队列 jquery中文文档简介 jque ...

49 jQuery事件

技术交流QQ群:1027579432，欢迎你的加入！

欢迎关注我的微信公众号：CurryCoder的程序人生

1.jQuery事件注册

单个事件注册

2.jQuery事件处理

2.1 事件处理on()绑定事件

2.2 事件处理off()解绑事件

2.3 自动触发事件trigger()

3.jQuery事件对象event

4.资料下载

49 jQuery事件相关推荐

最新文章

热门文章