事件一直在用,但是从来没有好好的记录下来过,今天抽出事件,把事件需要注意的问题给记下来!
1.事件中的冒泡想象:
所谓的冒泡其实质就是事件中的执行顺序,如果需要阻止冒泡的发生,可以调用stopProgation()方法;
2.页面载入事件:
页面载入事件也就是ready()方法的调用,相当于原生js中的OnLoad()方法,不过这其中有一点区别:OnLoad()方法的执行必须是页面中的全部元素完全加载到浏览器后才触发,而jquery中的ready()方法只需要页面的DOM模型加载完毕,就可以触发;
实现代码如下:
写法一:
$(document).ready(function(){
//代码内容
});
写法二:
$(function(){
//代码内容
});
3.绑定事件:
直接绑定,$('#id').click(function(){
//代码内容
});
使用bind()方法绑定,bind(type,[data],fn)
type:表示类型,如click,change,focus,load,resize等等,可以传递多个事件,用空格隔开,如$("#id").bind("click change",fn);
data:可选参数,可以传递给fn进行使用,如$("#id").bind("click",{msg:message},functiong(e){
alert(e.data.msg);
})
fn:处理函数
bind()方法也可以通过映射的方式给元素绑定多个事件处理函数,例如:
$("#id").bind({
click:function(){
alert("click");
},change:function(){
alert("change")
}
})
4.切换事件
在jquery中有两个方法用于切换,一个hover(),一个toggle()
hover()方法一般用于鼠标悬停和鼠标移出,比如
$("a").hover(function(){
//代码执行块
},functiong(){
//代码执行块
});当鼠标移动到a元素上时,执行第一个函数,移出时执行第二个函数
toggle()方法,是一次调用N个指定的函数,直到最有一个函数,然后重复对这些函数轮番调用
5.移出事件
unbind()方法,例如$("#a").unbind(),移出id为a的元素的所有事件,
$("#a").unbind("click",fnName),移出指定事件
6.其他事件
one()方法,所选元素绑定一个仅仅触发一次的处理函数
trigger()方法,所选元素触发指定类型的事件,例如$("a").trigger("click")