一、事件处理 on() 绑定事件
on () 方法优势1:可以绑定多个事件,多个处理事件处理程序。
$("div").on({ // 可以绑定多个事件
mouseover: function(){ },
mouseout: function(){ },
click: function(){ }
});
// 如果事件处理程序相同
$("div").on("mouseover mouseout", function(){
$(this).toggleClass("current"); // 根据事件做添加,删除样式的操作
});
on()方法优势2:可以事件委派操作。事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。
$("ul").on("click","li",function(){ //on("事件","子元素","回调函数")
alert('hello');
});
on()方法优势3:可以给未来动态创建的元素绑定事件
$("ol").on("click","li",function(){
alert(11);
})
var li=$("<li>后来创建的内容</li>");
$("ol").append(li);
二、解绑事件 off()
off()方法可以移除用过on()方法添加的事件处理程序
$("p").off(); //解绑p元素所有事件处理程序
$("p").off("click"); //解绑p元素上面的点击事件
$("ul").off("click","li"); // 解绑事件委托
三、一次性事件one()
如果有的事件只想触发一次,可以使用one()来绑定事件。
$("p").one("click",function(){
alert(11); // 该程序只会允许用户点击一次
})
四、自动触发事件
1.元素.事件()
$("div").click(); // 会触发元素的默认行为
2.元素.trigger("事件");
$("div").trigger("click"); // 会触发元素的默认行为
3.元素.triggerHandler("事件"); //不会触发元素的默认行为
$("input").on("focus",function(){
$(this).val("你好吗");
});
$("input").triggerHandler("focus"); //不会触发光标聚焦的事件
五、事件对象
只要有事件的触发,就会有事件对象的产生:
element.on(evebts,[selector],function(event){}) //其中函数中的event就是事件对象
阻止默认行为:event.preventDefault()或者 return false
阻止冒泡:event.stopPropagation()
$(function(){
$(document).on("click",function(){
console.log("document的事件");
});
$("div").on("click",function(e){ //当点击了div会触发事件对象中的冒泡行为,会找到documnet,里面有点击事件,也会触发
console.log(event); //查看所有的对象,里面有很多属性和方法
console.log("div中的事件");
event.stopPropagation(); //阻止事件冒泡,这样document中的点击事件就不会触发。
})
})