一、事件处理 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中的点击事件就不会触发。
})
})