您现在的位置是：网站首页> 前端技术> jQuery jQuery

jQuery常见事件方法详细使用说明

Smile 2020-09-27 jQuery 阅读：1059

简介事件处理程序指的是当HTML中发生某些事件时所调用的方法，事件方法触发器或添加一个函数到被选元素的事件处理程序，在web前端开发中被大量使用到

1、click() - 鼠标点击事件

$("#btn").click(function(){
  $(this).hide();
});

2、dblclick() - 鼠标双击事件

$("#btn").dblclick(function(){
  $(this).hide();
});

3、mouseover() - 鼠标悬浮事件

$("#btn").mouseover(function(){
    alert('您的鼠标移到了 id="btn" 的元素上');
});

4、mouseout() - 鼠标悬浮离开事件

$("#btn").mouseout(function(){
    alert("再见，您的鼠标离开了该按钮");
});

5、mousedown() - 鼠标悬浮在元素上，并按下鼠标按键时会触发该事件

$("#btn").mousedown(function(){
    alert("鼠标在该按钮上并按下");
});

6、mouseup() - 鼠标悬浮在元素上，按下松开鼠标按键时会触发该事件

$("#btn").mouseup(function(){
    alert("鼠标在按钮上松开");
});

7、hover() - 用于模拟光标悬停事件

当鼠标移动到元素上时，会触发指定的第一个函数(mouseover);当鼠标移出这个元素时，会触发指定的第二个函数(mouseout)

$("#btn").hover(
    function(){
        alert("鼠标进入了btn");
    },
    function(){
        alert("现在鼠标离开了btn");
    }
);

8、focus() - 当元素获得焦点时，发生focus事件

$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});

9、blur() - 元素失去焦点时，发生blur事件

$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});

10、change() - 当元素的值改变时发生 change 事件（仅适用于表单字段）

$("input").change(function(){
    alert("文本发生变化");
});

11、keyup() - 当键盘键被松开时发生keyup事件

$("input").keyup(function(){
    $("input").css("background-color","pink");
});

12、当键盘键被按下时发生keydown事件

$("input").keydown(function(){
    $("input").css("background-color","yellow");
});

很赞哦！ (0)