js同一标签绑定多事件的方式

最新推荐文章于 2024-05-07 09:56:02 发布

原创最新推荐文章于 2024-05-07 09:56:02 发布 · 1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

js 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了使用jQuery库为同一HTML元素绑定多个事件的方法，包括click、mouseover和mouseout等常见事件，展示了如何通过bind方法一次绑定多种事件，提高前端开发效率。

jquery同一标签绑定多个事件的几种方式
①$(document).ready(function(){
$("button").bind({
click:function(){},
mouseover:function(){},
mouseout:function(){};
});
});

②$(function(){
$('#btn').bind("click",function(){

})，bind("click",function(){

}),bind("click",function(){

});
});

③为元素一次性绑定多个事件类型
$(function(){
$("div").bind("mouseover mouseout",function(){

});
});

// 前进
$('.layui-header').find('.forward-btn').bind({
    click:function() {
        window.history.forward();
    },
    mouseover:function() {
        layer.tips('前进', $(this), {
            tips: [1, '#3595CC'],
            time: 4000
        });
    },
    mouseout:function() {
        layer.closeAll();
    }
});

// 后退
$('.layui-header').find('.back-btn').bind({
    click:function() {
        window.history.back();
    },
    mouseover:function() {
        layer.tips('后退', $(this), {
            tips: [1, '#3595CC'],
            time: 4000
        });
    },
    mouseout:function() {
        layer.closeAll();
    }
});

// 刷新
$('.layui-header').find('.refresh-btn').bind({
    click : function() {
        window.location.reload();
    },
    mouseover:function() {
        layer.tips('刷新', $(this), {
            tips: [1, '#3595CC'],
            time: 4000
        });
    },
    mouseout:function() {
        layer.closeAll();
    }
});