技术交流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()
网友评论