jquery中的事件

曾经终败给现在 2021-09-15 07:36 331阅读 0赞

## 什么是事件？ ##

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

实例：

*  在元素上移动鼠标。
 *  选取单选按钮
 *  点击元素

在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress 事件"。

常见 DOM 事件：

<table style="color:rgb(51,51,51);font-size:12px;border:0px;margin:4px 0px;padding:0px;width:729.091px;font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', Arial, sans-serif;background-color:rgb(255,255,255);"> 
 <tbody style="margin:0px;padding:0px;"> 
  <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(246,244,240);"> 
   <th style="border-color:rgb(85,85,85);margin:0px;padding:3px;font-size:12px;color:rgb(255,255,255);background-color:rgb(85,85,85);vertical-align:top;width:160.369px;">鼠标事件</th> 
   <th style="border-color:rgb(85,85,85);margin:0px;padding:3px;font-size:12px;color:rgb(255,255,255);background-color:rgb(85,85,85);vertical-align:top;width:174.915px;">键盘事件</th> 
   <th style="border-color:rgb(85,85,85);margin:0px;padding:3px;font-size:12px;color:rgb(255,255,255);background-color:rgb(85,85,85);vertical-align:top;width:153.097px;">表单事件</th> 
   <th style="border-color:rgb(85,85,85);margin:0px;padding:3px;font-size:12px;color:rgb(255,255,255);background-color:rgb(85,85,85);vertical-align:top;">文档/窗口事件</th> 
  </tr> 
  <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(255,255,255);"> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/jquery/event-click.html" style="border:0px;margin:0px;padding:0px;color:rgb(100,133,76);" rel="nofollow">click</a>&nbsp; &nbsp;段落被点击</td> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;"><a href="http://www.runoob.com/jquery/event-keypress.html" style="border:0px;margin:0px;padding:0px;color:rgb(100,133,76);" rel="nofollow">keypress</a>&nbsp;<span style="color:rgb(51,51,51);font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', Arial, sans-serif;font-size:13px;text-align:left;background-color:rgb(255,255,255);">键按下的过程</span></td> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;"><a href="http://www.runoob.com/jquery/event-submit.html" style="border:0px;margin:0px;padding:0px;color:rgb(100,133,76);" rel="nofollow">submit</a></td> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;"><a href="http://www.runoob.com/jquery/event-load.html" style="border:0px;margin:0px;padding:0px;color:rgb(100,133,76);" rel="nofollow">load&nbsp;&nbsp;<span style="color:rgb(0,0,0);font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', Arial, sans-serif;font-size:13px;background-color:rgb(229,238,204);">图像全部加载时</span></a></td> 
  </tr> 
  <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(246,244,240);"> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/jquery/event-dblclick.html" style="border:0px;margin:0px;padding:0px;color:rgb(100,133,76);" rel="nofollow">dblclick</a>&nbsp; 段落被双击</td> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;"><a href="http://www.runoob.com/jquery/event-keydown.html" style="border:0px;margin:0px;padding:0px;color:rgb(100,133,76);" rel="nofollow">keydown<span style="color:rgb(51,51,51);font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', Arial, sans-serif;font-size:13px;text-align:left;background-color:rgb(255,255,255);">&nbsp;键被按下</span></a></td> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;"><a href="http://www.runoob.com/jquery/event-change.html" style="border:0px;margin:0px;padding:0px;color:rgb(100,133,76);" rel="nofollow">change</a></td> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;"><a href="http://www.runoob.com/jquery/event-resize.html" style="border:0px;margin:0px;padding:0px;color:rgb(100,133,76);" rel="nofollow">resize</a><span style="font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', Arial, sans-serif;color:#000000;"><span style="background-color:rgb(229,238,204);">&nbsp; 浏览器窗口调整</span></span></td> 
  </tr> 
  <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(255,255,255);"> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><a href="http://www.runoob.com/jquery/event-mouseenter.html" style="border:0px;margin:0px;padding:0px;color:rgb(100,133,76);" rel="nofollow">mouseenter</a>&nbsp; <span style="color:rgb(51,51,51);font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', Arial, sans-serif;font-size:13px;background-color:rgb(255,255,255);">当鼠标指针穿过元素时</span>&nbsp;鼠标移人时颜色发生改变</td> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;"><a href="http://www.runoob.com/jquery/event-keyup.html" style="border:0px;margin:0px;padding:0px;color:rgb(100,133,76);" rel="nofollow">keyup</a>&nbsp;&nbsp;<span style="color:rgb(51,51,51);font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', Arial, sans-serif;font-size:13px;text-align:left;background-color:rgb(255,255,255);">键被松开</span></td> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;"><a href="http://www.runoob.com/jquery/event-focus.html" style="border:0px;margin:0px;padding:0px;color:rgb(100,133,76);" rel="nofollow">focus</a></td> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;"><a href="http://www.runoob.com/jquery/event-scroll.html" style="border:0px;margin:0px;padding:0px;color:rgb(100,133,76);" rel="nofollow">scroll</a>&nbsp; 元素滚动</td> 
  </tr> 
  <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(246,244,240);"> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"><p><a href="http://www.runoob.com/jquery/event-mouseleave.html" style="border:0px;margin:0px;padding:0px;color:rgb(100,133,76);" rel="nofollow">mouseleave</a>&nbsp; &nbsp;<span style="color:rgb(51,51,51);font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', Arial, sans-serif;font-size:13px;background-color:rgb(255,255,255);">当鼠标指针离开元素时</span><span style="color:rgb(51,51,51);font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', Arial, sans-serif;font-size:13px;background-color:rgb(255,255,255);">&nbsp;</span>设置背景颜色</p><p><a href="http://www.runoob.com/jquery/event-mouseleave.html" style="color:rgb(100,133,76);font-family:Arial, Verdana, sans-serif;font-size:14px;text-align:left;background-color:rgb(246,244,240);border:0px;margin:0px;padding:0px;" rel="nofollow">mouse</a>down&nbsp; &nbsp;&nbsp;<span style="color:rgb(51,51,51);font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', Arial, sans-serif;font-size:13px;background-color:rgb(255,255,255);">当鼠标指针移动到元素上方，并按下鼠标按键时</span><br></p><p><span style="color:rgb(51,51,51);font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', Arial, sans-serif;font-size:13px;background-color:rgb(255,255,255);">mouseup&nbsp; &nbsp;&nbsp;<span style="color:rgb(51,51,51);font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', Arial, sans-serif;font-size:13px;background-color:rgb(255,255,255);">当在元素上松开鼠标按钮时</span><br></span></p><p><br></p></td> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">&nbsp;</td> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;"><a href="http://www.runoob.com/jquery/event-blur.html" style="border:0px;margin:0px;padding:0px;color:rgb(100,133,76);" rel="nofollow">blur</a></td> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;"><a href="http://www.runoob.com/jquery/event-unload.html" style="border:0px;margin:0px;padding:0px;color:rgb(100,133,76);" rel="nofollow">unload</a></td> 
  </tr> 
 </tbody> 
</table>

鼠标事情

![70][]![70 1][]![70 2][]

表单触发按钮

![70 3][]

change：

## 定义和用法 ##

当元素的值改变时发生 change 事件（仅适用于表单字段）。

change() 方法触发 change 事件，或规定当发生 change 事件时运行的函数。

**注意：**当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。

![70 4][]

focus

![70 5][]

$(document).ready(function()\{  
  $("input").focus(function()\{  
    $(this).css("background-color","\#cccccc");  
  \});  
  $("input").blur(function()\{  
    $(this).css("background-color","\#ffffff");  
  \});  
\});  
</script>  
</head>  
<body>  
  
  
Name: <input type="text" name="fullname"><br>

Email: <input type="text" name="email">

## jQuery 事件方法语法 ##

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

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

$ ( " p " ) . click ( ) ;

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

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

### hover() ###

hover()方法用于模拟光标悬停事件。

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

## 实例 ##

$ ( " \#p1 " ) . hover (

function ( ) \{

alert ( " 你进入了 p1! " ) ;

\} ,

function ( ) \{

alert ( " 拜拜! 现在你离开了 p1! " ) ;

\}  ) ;

一.keypress,keydown,keyup的区别:

*   1.keydown：在键盘上按下某键时发生,一直按着则会不断触发（opera浏览器除外）, 它返回的是键盘代码;
 *   2.keypress：在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效 ,换句话说, 只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
 *   3.keyup：用户松开某一个按键时触发, 与keydown相对, 返回键盘代码.

二.两种常用用法举例

案例1:获取按键代码或字符的ASCII码

$(window).keydown( function(event){
       
       // 通过event.whitch可以拿到按键代码.  如果是keypress事件中,则拿到ASCII码.
    } );

案例2:传递数据给事件处理函数

语法:

jQueryObject.keydown( [[ data ,]  handler ] );

*   data: 通过event.data传递给事件处理函数的任意数据;
 *   handler: 指定的事件处理函数;

举例:

// 只允许按下的字母键生效, 65~90是所有小写字母的键盘代码范围.
    var validKeys = {
        start: 65, end: 90  };
    $("#keys").keydown( validKeys, function(event){
       
        var keys = event.data;  //拿到validKeys对象.
        return event.which >= keys.start && event.which <= keys.end;
    } );

[70]: https://img-blog.csdn.net/20180424103808471?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/20180424103821130?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: /images/20210813/c44e2bd739984e33b8e08c2aa5176cc7.png
[70 3]: /images/20210813/ce593e5afabc494488ff9d0c53ef6c0f.png
[70 4]: /images/20210813/dab2918deb4f4af5a4fca6aaa70f48cc.png
[70 5]: /images/20210813/8a9f5a999082481eb7963930ecacfd1e.png