今天将和大家一起讨论下Jquery event handle,(事件处理),了解事件处理机制有助于我们更好的运用Jquery进行编程,更灵活的处理我们的要处理的内容和简化我的的事件处理代码,来了解下JQuery的simple event handle mechanism(简单事件处理机制)
小试身手:
$(function(){
var v1=$("body").children();
alert(v1);
alert(v1[3].innerHTML)
});
jquery对象和DOM对象简单的转换
$("p").next();//获取p元素同辈的下一个元素 $("p").prev();//获取p元素同辈的上一个元素
var p1=$("p").sibliings();//获取p元素的上下兄弟元素
p1.length;//在这里是jquery对象
p1[1].length;//在这里jquery对象已经转换成了DOM对象
事件处理机制
先讲解下 IE的 事件冒泡处理机制
对于IE的事件处理的执行都是由下往上寻找对象的事件处理
比如:如果我们在页面上有一个嵌套的div层,当我们点击里面的div层的时候,在没有阻止事件的传播的时候,我 们点击里面的div层,其实触发了两个click事件,因此会引发两次的事件处理机制
jquery中如果阻止事件的传播
$(("p").bind("click",function(event){
alert("show");
event.stopPropagation();//停止事件的传播,事件处理到这里将结束,不管这个元素属于那个子元素,其父元素的函数将不会再触发
});
事件方法链的处理模型
大家知道在Javascript中如果一个事件有多个函数,那么之后写的函数会覆盖前面的函数,执行最后写的一个函数,但是在Jquery中,一个事件可以执行多个函数,如下:
$(function(){
$("#btn").bind("click",function(){
//调用第一个函数
$("#test").append("<p>绑定第一个函数</p>");
}).bind("click",function(){
$("#test").append("<p>绑定第二个函数</p>");
}).bind("click",function(){
$("#test").append("<p>绑定第三个函数</p>");
});
});
清除对象的绑定事件
$("#delAll").click(function(){
$("#test").unbind();//将这个$("#test")对象的所有绑定事件清除
});
//取消特定的绑定事件
$(function(){
$("#btn").unbind("click",fun1);//取消这个fun1对象的绑定事件click事件
});
$(function(){
$("#btn").bind("click",fun1=function(){
//调用第一个函数
$("#test").append("<p>绑定第一个函数</p>");
}).bind("click",fun2=function(){
//绑定第二个函数
$("#test").append("<p>绑定第二个函数</p>");
}).bind("click"fun3=,function(){
$("#test").append("<p>绑定第三个函数</p>")
});
});
----绑定事件,让事件只执行一次
$(function(){
$("#btn").one("click"fun1=,function(){
//调用第一个函数
$("#test").append("<p>绑定第一个函数</p>");
}).one("click",fun2=function(){
//调用第二个函数
$("#test").append("<p>绑定第二个函数</p>");
});
});
Jquery自定义事件机制
$(function(){
$("#btn").bind("myClick",function(event,message1,message2){
//给该对象绑定自定义myClick事件,传递二个参数
...想要做的操作
});
$("#btn").click(function(){
$(this).trigger("myClick",["我的自定义","事件"]);//这个对象代理调用trigger的myClick事件
}).trigger("myClick",["hello","world"]);
});
同时绑定多个事件,调用同一个方法
$("div").bind("mouseover mouseout",function(){
//可执行代码段
});
以上通过对Jquery的事件了解我们很容易发现以前对于javascript事件处理的地方问题,在jquery中我们可以很容易的解决,通过使用jquery让我们对于dom的事件处理变的更加的灵活,下次我将和大家讲解jquery的简单动画,和AJAX处理