jQuery-bind不能处理绑定hover事件

看这个例子： $(document).ready(function(){ $('.some-class').bind({ hover: function(e) { // Hover event handler alert("hover"); }, click: function(e) { // Click event handler alert("click"); }, blur: function(e) { // Blur event handler } }); }); 奇怪的事情发生了，这里的 “hover” 事件完全没有反应。 而...
看这个例子：
$(document).ready(function(){
$('.some-class').bind({
hover: function(e) {
// Hover event handler
alert("hover");
},
click: function(e) {
// Click event handler
alert("click");
},
blur: function(e) {
// Blur event handler
}
});
});
奇怪的事情发生了，这里的 “hover” 事件完全没有反应。 而像 “click” 和 “blur” 这两个都能正常调用。
同时，如下的代码也是正常运行的：
$(".some-class").hover(function(){
// stuff
})
为什么 bind 不能绑定 hover 呢？
答案是：
应该使用 mouseenter 和 mouseleave 这两个事件来代替 (这也是 .hover() 函数中使用的事件) 所以完全可以直接像这样来引用:
$(document).ready(function(){
$('.some-class').bind({
mouseenter: function(e) {
// Hover event handler
alert("hover");
},
mouseleave: function(e) {
// Hover event handler
alert("hover");
},
click: function(e) {
// Click event handler
alert("click");
},
blur: function(e) {
// Blur event handler
}
});
});
因为 .hover() 是 jQuery 自己定义的事件… 是为了方便用户绑定调用 mouseenter 和 mouseleave 事件而已，它并非一个真正的事件，所以当然不能当做 .bind() 中的事件参数来调用。
http://www.jdfwkey.com/

评论

1 楼 taballa 2012-10-20  

jQuery 事件绑定方法（bind hover toggle live.... ）、删除事件方法（unbind, die）及 事件对象

事件绑定方法：

1.<type>(function)

$("button").click(function(){
    ...
});

2.bind(map)
复制代码

$("input[type='text']").bind({
    focus: function(){
        ...
    },
    blur: function(){
        ...
    }
})

复制代码

3.bind(type, [data,] function)

　　注：如果没有第二个参数，则与第一个绑定事件方法相同
复制代码

$("button").bind(
    "click",
    {
         arg1: "2012"
         arg2: "07"
    },
    function(event){
        ...
        event.data.arg1
        ...
    }
)

复制代码

4.one(type, [data,] function)

　　绑定事件只执行一次，执行完之后绑定失效

5.hover(over, out)

　　注：两个参数为鼠标盘旋在对象上方和离开时调用的函数
复制代码

$("div").hover(
    function(){
        ...
    },
    function(){
        ...
    }
)

复制代码

6.toogle(function1, function2, ...)

　　该方法作用是单击对象时循环调用函数列表中的函数

7.live(type, function)

　　该方法为整个页面生命周期内的某一类对象绑定一个事件处理程序



事件删除方法：

1.unbind([type] [,data])

　　该方法删除匹配对象的事件处理程序，与bind方法对应，可以删除所有以bind方式绑定的自定义事件处理程序。如果所有参数都省略，将删除匹配对象的所有事件及事件处理程序；如果只有第一个type参数，将删除指定事件类型的时间处理程序。如：

$("#btn").unbind("click");

　　如果同时指定两个参数，将删除指定事件类型的指定事件处理程序。如，btn绑定以下函数：

　　var btnClick = function(){...};

　　则删除btn的该事件处理程序的代码为：

$("#btn").unbind("click", btnClick);

2.die([tyoe] [,function])
　　该方法与live方法对应，用于解除live注册的自定义事件。参数与unbind方法类似。



模拟操作：

　　模拟操作就是模拟用户触发相应的事件，如一个事件触发另一个事件。

1.<type>()

　　如触发一个按钮的单击事件：

$("button").click();

2.trigger(type [,data])

　　如触发一个按钮的单击事件：

$("button").trigger("click");

3.triggerHandler(type [,data])

　　与 trigger 方法不同：

　　该方法只触发对象集合中的第一个元素的事件处理程序。且返回的是事件处理程序的返回值，而不是可链接的jQuery对象。该方法不会触发事件冒泡



jQuery事件对象：

1.事件对象的属性

　　type：获得该对象的事件类型，如click, focus, mouseover等

　　target：获得事件触发者（DOM对象）

　　data：获得调用事件时传入的额外参数集合

　　relatedTarget：获得触发鼠标事件的DOM元素

　　currentTarget：获得当前DOM元素（等同于this关键字）

　　pageX/pageY：获得鼠标事件中，鼠标光标相对于页面左上角的位置

　　result：获得上一个事件处理函数返回的值

　　timeStamp：获得事件发生的时间戳

2.事件对象的方法

函数名
说明 例子
preventDefault() 取消元素事件的默认动作
例如:
对于超级链接a来说,有href属性,那么在点击a的时候就会导航至href所指向位置.我们在a的click事件中,调用本方法,就不会导航到指定位置

//取消事件默认动作
$("a").bind("click", function (e) {
    e.preventDefault();
});

isDefaultPrevented() 是否调用过preventDefault()方法

e.isDefaultPrevented()

stopPropagation() 取消事件冒泡

e.stopPropgation();

isPropagationStopped() 是否调用过stopPropagation()方法

e.isPropagationStopped()

stopImmediatePropagation() 取消执行该元素该事件处理函数的后续事件处理函数,
并取消事件冒泡

$("a").bind("click", function (e) {
    e.stopImmediatePropagation();
});

//不会被执行到
$("a").click(function () {
    alert("我被点击了");
});

isImmediatePropagationStopped() 是否调用过stopImmediatePropagation()方法

$("a").bind("click", function (e) {
    e.stopImmediatePropagation();
    alert(e.isImmediatePropagationStopped());
});

例如：要在鼠标移动时获取鼠标的位置：

$(document).mouseover(function(event){
    var msg = event.pageX + " " + event.pageY;
    alert(msg);
});