jquery中的事件 曾经终败给现在 2021-09-15 07:36 301阅读 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> 段落被点击</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> <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 <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> 段落被双击</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);"> 键被按下</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);"> 浏览器窗口调整</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> <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> 鼠标移人时颜色发生改变</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> <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> 元素滚动</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> <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);"> </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 <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 <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;"> </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
还没有评论,来说两句吧...