jQuery 学习笔记（5）（事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件）

1、事件绑定：

　　.eventName(fn)　　//编码效率略高，但部分事件jQuery没有实现

　　.on(eventName, fn)　　//编码效率略低，所有事件均可以添加

　　　　注意点：可以同时添加多个相同或不同类型的事件

 

2、事件解除

　　.off()

　　　　不传参数： $('button').off()　　//解绑该对象的所有事件

　　　　一个参数：$("button").off("click")　　//解绑该对象的“click”类型事件

　　　　两个参数：$("button").off("click", fnName);　　解绑该对象“click”类型的“fnName”事件

 

3、事件冒泡

　　阻止事件冒泡：(两种方法)

　　　　$(".son").click(function(event) {

　　　　　　alert("停止冒泡")；

　　　　　　return false;　　//或者

　　　　　　event.stopPrapagation();

　　　　})

 

4、事件默认行为（类似于"a"标签点击就会发生刷新或者跳转）

　　取消事件默认行为：

　　　　$("input:submit").click(function(event) {

　　　　　　return false;　　//或者

　　　　　　event.preventDefault;

　　　　})

 

5、事件的自动触发

　　.trigger()、triggerHandler()

　　　　$(".btn").trigger("click");　　//自动触发click事件（触发事件冒泡和事件冒泡行为）

　　　　$(".btn").triggerHandler("click");　　(不触发事件冒泡机制和事件默认行为)

　　　　　　注意：.trigger()方法模拟标签“a”，不会触发事件默认行为

　　　　　　解决办法：

　　　　　　　　<a><span>点击<span><a>

　　　　　　　　$("span").trigger("click")；

 

6、自定义事件 (只能通过.on(eventName, fn))的形式绑定事件

　　$("btn").on("myClick", function() { ... })　　//自定义事件

　　$("btn").click(function() { $("btn").trigger("myClick") }) 　　触发click事件时自动触发myClick事件

 

7、事件命名空间

　　$("btn").on("click.xml", function() { ... })　　//自定义事件

　　$("btn").on("click.hgh", function() { ... })

　　$("btn").clcik(function() {

　　　　$("btn").trigger("click.xml")　　

　　})

 

8、事件委托　　（用于在入口函数有之前的元素来监听动态添加的元素的某些事件）

　　.delegate()

　　$("ul").delegate("li", "click", function() { 　　//将“li”的“click”事件委托给“ul”来监听

　　　　console.log($(this).html())　　//“this”指向点击的“li”元素

　　 })　　

 

9、移入移出事件

　　.mouseout()、.mouseover()事件，在子元素被移入移出时，也会触发父元素的移入移出事件

　　.mouseenter()、mouseleave()事件，在子元素被移入移出时，不会触发父元素的移入移出事件

　　建议使用：

　　.hover() 

　　$("div").hover(function() {

　　　　//移入时触发

　　}, function() {

　　　　//移出时触发

　　})

　　$("div").hover(function() { // 移入移出均触发事件 })