在jQuery中的事件的事件处理包括三部分:1、事件绑定;2、事件解绑;3.自动触发。
我们先看一下事件绑定:
事件处理函数:on()
on()方法在匹配元素上绑定一个或多个事件的事件处理函数
语法:element.on(events,[selector], fn);
enents:一个或多个用空格隔开的事件类型。如:click
selector:元素的子元素选择器
fn:回调函数
用法1:绑定多个事件,多个事件处理程序
1.1-对多个事件添加多个事件处理程序
$("div").on({
mouseenter: function() {
$(this).css("background", "green");
},
click:function() {
$(this).css("background", "red");
},
mouseleave: function() {
$(this).css("background", "orange");
}
})
1.2-对一个对象添加多个事件但用一个事件处理程序
$("div").on("mouseenter mouseleave", function() {
alert(11);
})
用法2:可以事件委托(委派)操作
其原理就是JavaScript中的 事件冒泡
$("ul").on( "click", "li", function() {
alert("你点到我了");
})
on()方法里面的 click 是注册在 li 上面的事件
用法3:在创建之前给其注册事件
$("ol").on("click", "li", function() {
alert(22);
})
var li = $("<li>我是一个新人</li>");
$("ol").append(li);
上面函数的 on() 如果换成下面代码,则事件没有注册上,不能弹出警示框
$("ol li").click(function() {
alert(22);
});
二、解除事件绑定
解除事件方法:off()方法
off()方法,可以移除通过on()方法添加的事件处理程序
$("div").off();//清除div的所有事件
$("div").off("mouseenter");//只清除mouseenter事件
$("ul").off("mouseenter", "li");//清除 li 的mouseenter事件
三、如果某一事件只用一次的话,先用on()绑定,再用off()解绑。这样很麻烦,这里jQuery给我们准备了一个一次性“用具”:one()
用法跟上面的一样,在这里举一个例子,类比以上
$("p").one("click", function() {
alert(11);
})
四、自动触发事件
有时候我们写的程序,想要它自己出发,如:轮播图的自动轮播效果。这时就可以用我们的自动触发事件
- 元素.事件()
$(“div”).click();会触发元素的默认行为 - 元素.trigger(“事件”)
$(“div”).trigger(“click”);会触发元素的默认行为 - 元素.triggerHandler(“事件”) 不会触发元素的默认行为
$(“div”).triggerHandler(“click”);
这些事件要先绑定才能自动触发,这个方法相当于一个触发装置