Heim > Web-Frontend > js-Tutorial > jQuery学习笔记之jQuery的事件_jquery

jQuery学习笔记之jQuery的事件_jquery

WBOY
Freigeben: 2016-05-16 18:13:50
Original
1093 Leute haben es durchsucht

一.事件绑定

1.事件绑定函数
事件的绑定函数为如下形式:
.bind(type [,data],fn)
type:类型 如click.....
data:参数
fn:事件执行的函数

例子

复制代码 代码如下:

$(function(){
$(#id1).click(function(){
$(#id2).show();//id2显示
}) ;
});

二.合成事件
1.鼠标滑过事件
.hover(enter,leave)
enter:鼠标光标移动到对象时触发的函数
leave:鼠标光标移出对象触发的函数

例子:
复制代码 代码如下:

$(function(){
$(#id1).hover(function(){
$(#id2).show();//id2显示
},function(){
$(#id2).hide();//id2隐藏
}) ;
});


2.连续单击事件
.toggle(fn1,fn2.......,fnN)
fn:单击第一次执行fn1,第二次fn2,以此类推

三.事件冒泡
事件总是由内层开始执行,一直到最外层,不单击了那个对象,所有包含了此对象的对象所绑定的事件都将执行一次,这是我们不愿意看到的,jQuery给我们定义了一些阻止事件执行的方法
1.事件对象获取
获取事件对象的方法就是为事件执行函数添加一个参数
$(#id1).click(function(even){});//even就是获取到的事件对象
2.阻止事件冒泡
我们可以在事件执行函数中加入如此啊代码,阻止事件冒泡
even.stopPropagation();
3.阻止默认事件
浏览器默认事件是指,按钮单击后提交,单击链接后打开链接等,jQuery也可以阻止这些默认事件的执行
even.preventDefault();

四.获取事件对象的属性
even.type();//获取事件的类型,
如:
$(#id1).click(function(even){
alert(even.type);
return false;
});//返回“click”

even.target();//获取触发事件的对象

even.while();获取鼠标单击的1=左,2=中,3=右键

五.移除事件
.unbind(type [,data]);

例子:
复制代码 代码如下:

$(function(){
$(#id1).bind("click",fn1=function(){alert(“事件1”);})

.bind("click",fn2=function(){alert(“事件2”);});
.bind("click",fn3=function(){alert(“事件3”);});
});

$("#id2").click(function(){
$(#id1).unbind("click",fn2);//删除fn2的click事件
});

六.其他操作
1.绑定多个事件
.bind(type [,data],fn).bind(type [,data],fn)...... ;
.bind(type type..... [,data],fn) ;
2.添加事件命名空间
.bind(type.namespace [,data],fn) ;
使用时只需指定命名空间即可,如:$(#id1).unbind(".namespace")
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage