JQuery-4事件

 

本文引用自皮皮 《JQuery-4事件》

皮皮 的 JQuery-4事件

本文用到的HTML代码：

<div id="panel">

<h5 class="head">jQuery定义</h5>

<div class="content">jQuery是一个优秀的JavaScript库。</div>

</div>

一、事件绑定

bind(type[,data],fn);

type：事件类型。如：blur,focus,load,resize,scroll,upload,click,dblclick,mousedown,mouseup,mousemove,mouseover,mouseout,

mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error等

data：作为event.data属性传递给事件对象的额外数据对象。

fn：用来绑定的函数。

1.单击标题，显示与隐藏内容

$(function(){     

$("#panel h5.head").bind("click",function(event){

var $content=$(this).next("div.content");

if($content.is(":visible")){

$content.hide();

}else{

$content.show();

}

})

})

2.鼠标移到标题上，显示内容；移出标题隐藏内容

$(function(){     

$("#panel h5.head").bind("mousemove",function(event){

$(this).next("div.content").show();

});

$("#panel h5.head").bind("mouseout",function(event){

$(this).next("div.content").hide();

});

});

3.简写绑定事件：

像click,mouseover,mouseout之类的事件，经常会用到，JQuery提供了简单的写法.像上面的代码可以作如下修改：

<script type="text/javascript">

$(function(){     

$("#panel h5.head").mousemove(function(){

(this).next("div.content").show();

});

$("#panel h5.head").mouseout(function(){

(this).next("div.content").hide();

});

});

</script>

二、复合事件

JQuery中有两个复合事件hover()和toggle()

1.hover(enter,leave)

当光标移动到元素上时，会触发第一个函数（enter），当光标移出这个元素时，会触发第二个函数（leave）。

<script type="text/javascript">

$(function(){  

$("#panel h5.head").hover(function(){

$(this).next("div.content").show();

},function(){

$(this).next("div.content").hide();

});

});

2.toggle(fn1,fn2...fnN)

当第1次单击元素时，触发fn1；再单击同一元素，触发fn2；如果有更多函数，则依次触发，直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。

JQuery代码如下：

<script type="text/javascript">

$(function(){  

$("#panel h5.head").toggle(

function(){alert("第一次);},

function(){alert("第二次);},

function(){alert("第三次);})

...................

});

三、事件冒泡

如果页面DOM树底层的元素某事件被触发，它会沿DOM树依次向上调用父辈元素对应的某事件。

比如：页面DIV中的Span标记被单击，那它会依次触发Span的click事件、Div的click事件、Body的click事件。

1.事件对象

在JQuery中使用事件对象非常简单，只需要在事件绑定函数中传入一个参数即可

2.停止事件冒泡

使用事件对象event的stopPropagation()方法来停止事件冒泡。

<script type="text/javascript">

$(function(){ 

//span元素绑定事件

$("span").bind("click",function(event){

var txt=$("#msg").html()+"<p>span元素被点击</p>";

$("#msg").html(txt);

event.stopPropagation();

});

//content元素绑定事件

$("content").bind("click",function(event){

var txt=$("#msg").html()+"<p>外层div元素被点击</p>";

$("#msg").html(txt);

event.stopPropagation();

});

//body元素绑定事件

$("body").bind("click",function(event){

var txt=$("#msg").html()+"<p>body元素被点击</p>";

$("#msg").html(txt);

event.stopPropagation();

});

})

</script>

3.阻止默认行为

网页中的好多元素都有自己的默认行为，如：超连接点击会跳转页面，“submit”按钮点击会提交页面。如果要阻止默认行为可以使用事件对象event的preventDefault()方法。

<form action="index.jsp">

<input type="text" id="username">

<input type="submit" value="提u20132 " id="sub">

</form>

<script type="text/javascript">

$(function(){    

$("#sub").bind("click",function(event){

var uname=$("#username").val();

if(uname==""){

$("#msg").html("<p>用户名不允许为空 </p>")

event.preventDefault();//阻止提交表单

}

});

</script>

4.使用函数的“return false”相当于同时使用event.stopPropagation()和event.preventDefault();

5.事件对象的其它属性

event.type()事件类型.如果使用一个事件处理函数来处理多个事件, 可以使用此属性获得事件类型,比如click. 

例子：$("a").click(function(event) { alert(event.type); }

event.target() 获取事件触发者DOM对象 

$("a[href=http://google.com]").click(function(event)

  alert(event.target.href); 

}); 

event.data() 调用时传入额外的参数

$("a").each(function(i) { 

  $(this).bind('click', {index:i}, function(e){ 

     alert('my index is ' + e.data.index); 

  }); 

});

event.relatedTarget()对于鼠标事件, 标示触发事件时离开或者进入的DOM元素 

$("a").mouseout(function(event) { 

  alert(event.relatedTarget); 

}); 

event.currentTarget() 冒泡前的当前触发事件的DOM对象, 等同于this. 

event.result() 上一个事件处理函数返回的值 

event.timeStamp()  事件发生时的时间戳. 

event.pageX()和event.pageY()：代表鼠标相对于页面的横纵坐标。

event.altKey()  Alt键是否被按下. 按下返回true 

event.ctrlKey()   ctrl 键是否被按下, 按下返回true 

event.metaKey()   Meta键是否被按下, 按下返回true. meta键就是 PC机器的Ctrl 键,或者Mac 机器上面的Command键 

event.shiftKey()   Shift键是否被按下, 按下返回true 

event.keyCode()   对于keyup和keydown事件返回被按下的键. 不区分大小写, a和A都返回65.  

对于keypress事件请使用which属性, 因为which属性跨浏览时依然可靠.

event.which()   对于键盘事件, 返回触发事件的键的数字编码. 对于鼠标事件, 返回鼠标按键号(1左,2中,3右). 

event.screenX/Y()  对于鼠标事件, 获取事件相对于屏幕原点的水平/垂直坐标 

四、移除事件

unbind([type][,data])

1.如果不带任何参数，则移除相应对象上的所有绑定的事件。

<input type="button" id="btn" value=“点击我”>

<div id="test"></div>

<input type="button" id="delAll" value="删除所有事件">

<script type="text/javascript">

$(function(){   

$("#btn").bind("click",function(){$("#test").append("<p>我绑定的函数1</p>");})

.bind("click",function(){$("#test").append("<p>我绑定的函数2</p>");})

.bind("click",function(){$("#test").append("<p>我绑定的函数3</p>");});

  $("#delAll").click(function(){$("#btn").unbind("click");});

</script>

2.如果提供了事件类型作为参数，则只删除该类型的绑定事件。

3.如果把绑定时传递的处理函数作为第2个参数，则只有这个特定的事件处理函数会被删除。

<input type="button" id="btn" value=“点击我”>

<div id="test"></div>

<input type="button" id="delAll" value="删除所有事件">

<script type="text/javascript">

$(function(){   

$("#btn").bind("click",myfun1=function(){$("#test").append("<p>我绑定的函数1</p>");})

.bind("click",myfun2=function(){$("#test").append("<p>我绑定的函数2</p>");})

.bind("click",myfun3=function(){$("#test").append("<p>我绑定的函数3</p>");});

  $("#delAll").click(function(){$("#btn").unbind("click"，myfun2);});

</script>