码迷,mamicode.com
首页 > Web开发 > 详细

jquery事件绑定(2)

时间:2015-02-24 18:37:17      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:

Jquery中绑定事件有三种方法,下面是三种方式绑定

(1)element.click(function(){});

(2)element.bind("click",function(){});

(3)element.live("click",function(){});

注意第一种方式绑定和之前的差不多,(这里节约了一个关键字on)
注意API中这么写的
$("p").on("click", function(){
alert( $(this).text() );
});

重点要说的是后两种,其实他们两个也是绑定事件看起来和第一种都差不多,但是有很大的却别

live方法其实是bind方法的变种,其基本功能就同bind方法的功能是一样的,都是为一个元素绑定某个事件
但是bind方法只能给当前存在的元素绑定事件,对于事后采用JS等方式新生成的元素无效,而live方法则正好弥补了bind方法的这个缺陷,它可以对后生成的元素也可以绑定相应
的事件。

$(‘span‘).live("click",fun)
function fun(){
alert("hello")
}
var $v=$("<span>hello world</span>")
$(‘body‘).append($v)


那为什么有live我们还需要bind呢?注意bind是不可取代的
不同之处:
1:试验事件冒泡
2:live() 并不完全支持通过DOM遍历的方法找到的元素。取而代之的是,应当总是在一个选择器后面直接使用 .live()
3:bind方法可以绑定任何JavaScript的事件,而live方法在jQuery1.3的时候只支持不是很多的方法


典型事件
1:hover一个模仿悬停事件
注意:鼠标在这个时候有两种情况,进入和出去

$(‘span‘).hover(function(){
alert(‘a‘)
},function(){
alert(‘b‘)
})

那怎么用bind或者leave来使用呢?
var $v=$("<span>click me</span>")
$(‘body‘).append($v);
$(‘span‘).live({
mouseenter:enter,
mouseleave:leave
})

function enter(){
alert("enter")
}
function leave(){
alert("leave")
}

2:toggle用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。
$v.toggle(function(){
alert("hello")
},function(){
alert("world")

})

jquery事件绑定(2)

标签:

原文地址:http://www.cnblogs.com/chjb/p/4298812.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!