jQuery 事件 keypress click mouseover blur load ......

news/2024/5/10 6:18:56/文章来源:https://blog.csdn.net/weixin_30799995/article/details/99204117

事件流模型包括冒泡型事件流和捕获型事件流，前者从下到上一级一级的触发，后者从上到下一级级的触发。但是IE浏览器不支持捕获型事件流，所以大部分还是冒泡型事件流。

1.传统的 JavaScript 事件

（1）鼠标事件

　　onclick（单击） ondblclick（双击） onmousedown（按下鼠标左键） onmouseup（释放鼠标）

　　onmouseover（光标移动到某对象上） onmousemove（鼠标移动） onmouseout（光标离开某对象）

（2）键盘事件

　　onkeypress（键被按下以后） onkeydown（键被按下时） onkeyup（释放键）

（3）页面事件

　　onerror（出现错误） onload（页面内容完成） onresize（浏览器窗口大小改变）

　　onscroll（滚动条位置变化） onunload（当前页面将被改变时）

（4）表单事件

　　onblur（当前元素失去焦点） onchage（当前元素失去焦点且元素内容发生变化时）

　　onfocus（某个元素获得焦点时） onsubmit（一个表单被递交时）

2.jQuery 事件

（1）DOM 载入事件

　　$(document).ready(hanlder)

　　$().ready(handler)

　　$(handler)

（2）键盘事件

　　keypress（键被按下以后） keydown（键被按下时） keyup（释放键）

（3）鼠标事件

　　click（单击） dblclick（双击） mousedown（按下鼠标左键） mouseup（释放鼠标）

　　mouseover（光标移动到某对象上） mousemove（鼠标移动） mouseout（光标离开某对象）

（4）表单事件

　　blur（当前元素失去焦点） chage（当前元素失去焦点且元素内容发生变化时）

　　focus（某个元素获得焦点时） submit（一个表单被递交时） select（控件内容被选中时）

　　focusin（当前元素或其子元素获得焦点时） focusout（当前元素或其子元素失去焦点时）

　　其中，select 的实例如下，当选中第一个文本框中的文字时，第二个文本框自动显示选中的文本。

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>Hello, jQuery!</title>
 5     <script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
 6     <script type="text/javascript">
 7         $(document).ready(function(){
 8             $("#input1").select(function(){
 9                 var selection = document.selection;
10                 if(selection && selection.type == 'Text'){
11                     var word = selection.createRange();
12                     var text = word.text;
13                     $("#input2").val(text);
14                 }
15             });
16         });
17     </script>
18   </head>
19   
20   <body>
21       <input id="input1" type="text"/><br/><br/>
22       <input id="input2" type="text"/>
23   </body>
24 </html>

效果如下：

　　另外，focusin 和 focusout 是jQuery 扩展的非常有用的事件。其实例如下：

View Code

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>Hello, jQuery!</title>
 5     <script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
 6     <style type="text/css">
 7         body{ padding:20px; }
 8         td{ font-size:13px; padding:3px; }
 9         input{ margin:0 5px; }
10     </style>
11     <script type="text/javascript">
12         $(document).ready(function(){
13             $("td span").css('color','#aaa');  //初始化表格里的span元素内的字体颜色为浅灰
14 
15         $("td").focusin(function() {
16             /* 子元素获得焦点时 */
17               $(this).find("span")
18                   .css('color','#a0a')
19                 .css('font-weight','600');  //设置当前表格中的span元素颜色为黑色和粗细程度为600
20             });
21 
22         $("td").focusout(function() {
23             /* 子元素失去焦点时 */
24               $(this).find("span")
25                 .css('color','#aaa')
26                 .css('font-weight','100');  //设置当前表格中的span元素颜色为浅灰和粗细程度为100
27     });
28         });
29     </script>
30   </head>
31   
32   <body>
33       <h2>用户注册</h2>
34     <form>
35         <table cellspacing="0" border="0">
36             <tr>
37                 <td>用户名：</td>
38                 <td><input /><span>6-20位字母、数字、下划线组合</span></td>
39             </tr>
40             <tr>
41                 <td>密　码：</td>
42                 <td><input /><span>5-16位任意字符</span></td>
43             </tr>
44             <tr>
45                 <td>姓　名：</td>
46                 <td><input /><span>请填写您的直实姓名</span></td>
47             </tr>
48             <tr>
49                 <td>年　龄：</td>
50                 <td><input /><span>请填写您的真实年龄</span></td>
51             </tr>
52             <tr>
53                 <td>邮　箱：</td>
54                    <td><input /><span>请填写您的电子邮件地址，确认身份时需要</span></td>
55             </tr>
56             <tr>
57                 <td></td>
58                 <td><input type="button" value="Submit" /></td>
59             </tr>
60         </table>
61     </form>
62   </body>
63 </html>