1、dom加载完成事件
这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。
这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。
可以在同一个页面中无限次地使用$(document).ready()事件
$(document).ready(function () {
console.log("dom加载完成");
});
2、普通事件
事件可以连点,一个对象绑定多个事件,形成事件流。
给事件处理函数传递的参数在event.data
上。
$(".box").click("user", function (e) { //第一个参数 给事件处理函数传递的参数
console.log(e.data); //user
}).mouseenter(function () {
console.log("鼠标进入");
}).mouseleave(function () {
console.log("鼠标离开");
});
3、hover 事件切换
当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。
而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。
$(".box").hover(function () {
console.log("悬停");
}, function () {
console.log("离开");
});
4、绑定事件
(1) bind unbind
bind
为每个匹配元素的特定事件绑定事件处理函数。
unbind
移除事件,可以全部移除或移除指定事件。
$(".btn").bind("click", 1, function (e) {
console.log("点击事件绑定", e.data); //点击事件绑定 1
}).bind("mouseover", function () {
console.log("mouseover事件绑定");
}).mouseleave(function () {
//移除事件 unbind
//不带参数 全部移除
//$(this).unbind(); //上边绑定的事件 先执行一次再移除
//带参数 移除指定事件
$(this).unbind("click");
});
(2)on off
绑定事件:
$(".box").on("click",1,function(e){
console.log(e.data, "点击事件");
});
用on写事件的委托:
$(".box").on("click","#btn",1,function(e){
console.log(e.delegateTarget, "点击事件的委派元素"); //div.box 点击事件的委派元素
console.log(e.currentTarget,"目标对象"); //button#btn
}).on("mouseover",function(){
console.log("悬停");
}).on("mouseleave",function(){
//off 移除事件,可以委派移除
//不带参 全部移除 也可以过滤移除
//$(this).off();
//$(this).off("click");
//$(this).off("click","#btn");
$(this).off("mouseover");
});
off
移除事件,可以委派移除。
不带参,全部移除,也可以过滤移除。
(3)one 绑定一次性事件
绑定的事件只触发一次。
$(".box").one("mousedown",1,function(e){
console.log("一次性点击事件", e.data);
});
5、自动触发指定事件
(1)trigger
传递的参数在事件执行函数里边用 形参 接收。
$(window).on("keydown",function(e,a){
console.log("按键事件", a);
}).trigger("keydown",1); //自动触发一次,后边仍然可以被动触发。
on可以绑定自定义事件,trigger 触发。
$(".box").on("user-key",function(e,a){
console.log("自定义事件", a);
}).trigger("user-key",2);
(2)triggerHandler
triggerHandler
触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作,也不会产生事件冒泡。
只触发jQuery对象集合中第一个元素的事件处理函数。
$(".box").on("click",function(){
console.log("box点击事件");
});
$("#btn").on("click",function(e,a){
//常规方式处理事件冒泡
//e.originalEvent.cancelBubble=true;
//e.stopPropagation();
console.log("btn的点击事件",a);
}).triggerHandler("click",1); //传递的参数在事件执行函数里边用 形参 接收
如果最开始的jQuery对象集合为空,则这个方法返回 undefined 。
注:
常规方式处理事件冒泡:
e.originalEvent.cancelBubble=true;
e.stopPropagation();