35.事件绑定

2018-06-12  本文已影响0人  若愚同学
方式1:
$("#check1").bind("click",function(){
    alert("事件1绑定成功");
});

//可以重复绑定
$("#check1").bind("click",function(){
    alert("事件1.1绑定成功");
});
方式2:
$("#check1").click(function() {
    alert("绑定成功");
})

//还能一次性给多个元素绑定
$("div").click(function() {
    alert("都绑定了");
});

事件绑定扩展

扩展1:链式绑定
$("tbody tr").mouseover(function() {
    //this.style.backgroundColor="yellow";
    //在方法中,this是原生对象,如要使用jQuery,需要转换一下类型
    $(this).css("background-color","orange");
}).mouseout(function() {
    $(this).css("background-color","");
});
扩展2:针对鼠标事件,自定义事件:
说明:

一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。

$("tbody tr").hover(//
    function(){
        $(this).css("background-color","orange");
    },
    function() {
        $(this).css("background-color","");
    }
);
上一篇 下一篇

猜你喜欢

热点阅读