jQuery事件函数详解

x33g5p2x  于2022-03-06 转载在 其他  
字(2.1k)|赞(0)|评价(0)|浏览(470)

概念

官方概念:

jQuery 是为事件处理特别设计的。jQuery 事件处理方法是 jQuery 中的核心函数。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。

个人理解:

事件是Web浏览器通知应用程序(比如我们的js)发生了某个事情,我们可以为这些特定的事情,事先安排好处理方案,这样就能够实现互动。

JQuery中的事件有很多,有可以通过鼠标触发的,也有通过键盘触发的,当然还有典型的页面加载事件。这些事件都能通过JQuery代码来实现,而且相比JaveScript代码会更简洁,代码量也更少一些。

事件目标

可以简单的理解为事件发生在的最具体的那个目标元素即为事件目标,有事是一个button按钮,有时也可能是document或者window

事件函数

jQuery 事件处理方法是使用 jQuery 中的核心函数。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。

jQuery 事件方法语法

在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件:

$("p").click();

下一步是定义什么时间触发事件。您可以通过一个事件函数实现:

$("p").click(function(){
    // 动作触发后执行的代码!!
});

代码示例:

通常我们在使用事件函数时,会把 jQuery 代码放到<head>部分的事件处理方法中:

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
              $("button").click(function(){
                $("p").hide();
              });
            });
        </script>
    </head>

    <body>
        <h2>This is a heading</h2>
        <p>This is a paragraph.</p>
        <p>This is another paragraph.</p>
        <button>Click me</button>
    </body>
</html>

在上面的例子中,当按钮的点击事件被触发时会调用一个函数:

$("button").click(function() {..some code... } )

该方法隐藏所有 <p> 元素:

$("p").hide();

事件类型

事件类型是一个用来说明发生了什么类型事件的字符串,可以简单的理解为事件的名字。

常见的事件类型有:
鼠标事件

事件函数事件描述
click()鼠标单击左键事件
dblclick()鼠标双击左键事件
mousedown()鼠标按下事件
mouseenter()鼠标指针穿过(进入)指定元素时触发事件
mouseleave()鼠标指针离开指定元素时触发事件
mousemove()鼠标指针在被选元素内移动时触发事件
mouseout()鼠标指针离开被选元素时触发事件
mouseover()鼠标指针位于元素上方时触发事件
mouseup()鼠标指针移到元素上方并松开鼠标左键时触发事件
hover()鼠标指针悬停在被选元素上时触发事件

键盘事件

事件函数事件描述
keypress()当键盘按键被按下时触发事件(键被按下)
keydown()当键盘按键被按下时触发事件(键按下的过程)
keyup()当键盘按键被松开时触发事件(键被松开)

表单事件

事件函数事件描述
submit()当表单提交时触发事件
change()当元素的值被改变时触发事件
focus()当元素获得焦点时触发事件
blur()当元素失去焦点时触发事件

窗口事件

事件函数事件描述
load()当指定元素已加载时触发
resize()当调整浏览器窗口大小时触发
scroll()当用户滚动指定的元素时触发
unload()当用户离开页面时触发

经验分享

jQuery的事件函数在做页面特效时经常会被用到,比如最常用的有鼠标单击事件click()、键盘按下事件keypress()、提交表单事件submit()等等。jQuery事件函数学习起来是很简单的,但是要理解每个事件函数中的回调函数是什么意思,当用户触发一个事件时,接下来要做的事情或者是要实现的效果,都要放到事件函数的回调函数中。在每个事件的回调函数中都有一个this对象,该对象指的是被触发元素本身,在使用jQuery事件函数时,要正确使用this对象,不然就会出现很多意想不到的异常。
微信交流:zzxingyun

相关文章