首页 > 代码库 > jQuery中的事件
jQuery中的事件
1、事件绑定 bind(type[,data],fn)
bind()方法有3个参数:
a、第1个参数是事件类型,包括 blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error等,也可以是自定义名称。
b、第2个参数为可选参数,做完event.data属性值传递给事件对象的额外数据对象。
c、第3个参数是用来绑定的处理函数。
$("#panel h5.head").bind("click",function(){});
2、合成事件 hover()和toggle()
a、hover()模拟光标悬停事件
$("#panel h5.head").hover(function(){ $(this).next().show(); },function(){ $(this).next().hide(); });
b、toggle()方法基本同上,交替操作
3、事件冒泡--停止事件冒泡--阻止默认行为
事件冒泡:事件按照DOM的层次结构像水泡一样不断向上直至顶端。 例:body内有个div,div中有个span,三个元素均绑定的有click事件,点击span,则会弹出3条记录,依次为内层span被点击,外层div被点击,body被点击, 这就是所谓的冒泡。
a、事件对象:即为函数添加一个参数,jQuery代码如下:
$(“element”).bind("click",function(event){ //事件对象 //…… })
b、停止事件冒泡
$(“element”).bind("click",function(event){ //事件对象 var txt=$("#msg").html() + "<p>内层实盘元素被单击。</p>" s("#msg").html(txt); event.stopPropagation(); //停止事件冒泡 })
c、阻止默认行为(网页中的元素有自己默认的行为,比如单击超链接会跳转,单击提交按钮后,表单会提交,但有时需要阻止元素的默认行为【当表单不符合提交条件时,要阻止表单的提交】)
$(“#sub”).bind("click",function(event){ //事件对象 var username=$("#username").val(); //获取元素的值 if(username==""){ //判断值是否为空 $("#msg").html("<p>文本框内容不能为空!<p>""); //提示信息 event.preventDefault(); //阻止默认行为(表单提交) } })
d、如果想同时对事件对象停止冒泡和默认行为,可以在事件处理函数中返回false。这是对同事调用stopPrapagation()方法和preventDefault()方法的一种简写方式。
4、事件对象的属性
a、event.type 获取到事件的类型
$("#a").click(function(event){ alert(event.type); //获取事件类型 return false; //阻止跳转链接 });
代码运行后,输出:click
b、event.preventDefault() 阻止默认的事件行为
c、event.stopPropagation() 阻止事件的冒泡
d、event.target 获取到触发事件的元素
$("a[href=http://www.mamicode.com/'http://google.com']").click(function(event){>代码运行后输出:http://google.com
5、event.pageX和event.pageY 获取到光标相对于页面的x、y坐标。
6、event.which 在鼠标单击事件中获取到鼠标的左、中、右键;在键盘事件中获取键盘的按键。
$("a").mousedown(function(e){ alert(e.which); //1=鼠标左键;2=鼠标中键;3=鼠标右键 });$("a").keyup(function(e){ alert(e.which); //获取键盘的按键; });7、event.metaKey 键盘事件中获取<ctrl>按键