基础事件（下）

原创于 2016-10-13 10:58:26 发布 · 273 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了使用jQuery进行基础事件处理的方法，包括鼠标悬停、点击、键盘输入等事件的绑定及响应，通过实例展示了不同事件的区别和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>基础事件</title>
 6 <script type="text/javascript" src="jquery-1.10.1.js"></script>
 7 <script type="text/javascript" src="demo.js"></script>
 8 <link rel="stylesheet" href="style.css" type="text/css" />
 9 </head>
10 <body>
11 
12 <div style="width:200px;height:200px;background:green;">
13     
14 </div>
15 
16 <strong></strong>
17 
18 </body>
19 </html>

事件：

  1 $(function () {
  2 
  3     /*
  4     $('div').mouseover(function () {
  5         $(this).css('background', 'red');
  6     }).mouseout(function () {
  7         $(this).css('background', 'green');
  8     });
  9     
 10     $('div').mouseenter(function () {
 11         $(this).css('background', 'red');
 12     }).mouseleave(function () {
 13         $(this).css('background', 'green');
 14     });
 15     
 16     $('div').mouseover(function() {                    //over会触发子节点
 17         $('strong').html(function (index, value) {
 18             return value + '1';
 19         });
 20     });
 21     
 22     $('div').mouseenter(function() {                //enter不会触发子节点
 23         $('strong').html(function (index, value) {
 24             return value + '1';
 25         });
 26     });
 27     
 28     $('div').mouseout(function() {                    
 29         $('strong').html(function (index, value) {
 30             return value + '1';
 31         });
 32     });
 33     
 34     $('div').mouseleave(function() {                    
 35         $('strong').html(function (index, value) {
 36             return value + '1';
 37         });
 38     });
 39     
 40     $('input').keydown(function () {
 41         alert('键盘');
 42     });
 43     
 44     $('input').keyup(function () {
 45         alert('键盘');
 46     });
 47     
 48     $('input').keydown(function (e) {
 49         alert(e.keyCode);
 50     });
 51     
 52     $('input').keypress(function (e) {
 53         alert(e.charCode);
 54     });
 55     
 56     $('input').focus(function () {
 57         alert('光标激活');
 58     });
 59     
 60     $('input').blur(function () {
 61         alert('光标丢失');
 62     });
 63     
 64     $('input').focusout(function () {
 65         alert('光标丢失');
 66     });
 67     
 68     $('div').focus(function () {            //focus和blur必须是当前元素才能激活
 69         alert('光标激活');
 70     });
 71     
 72     $('div').focusin(function () {            //focusin和focusout可以是子元素激活
 73         alert('光标激活');
 74     });
 75     
 76     $('div').focusout(function () {            
 77         alert('光标丢失');
 78     });
 79     
 80     $('div').hover(function () {
 81         $(this).css('background', 'red');
 82     }, function () {
 83         $(this).css('background', 'green');
 84     });
 85     
 86     //$('div').toggle('slow');
 87     
 88     $('div').toggle(function () {
 89         $(this).css('background', 'red');
 90     }, function () {
 91         $(this).css('background', 'blue');
 92     }, function () {
 93         $(this).css('background', 'green');
 94     });
 95 
 96     */
 97 
 98     
 99     var flag = 1;
100     $('div').click(function () {
101         if (flag == 1) {
102             $(this).css('background', 'red');
103             flag = 2;
104         } else if (flag == 2) {
105             $(this).css('background', 'blue');
106             flag = 3;
107         } else if (flag == 3) {
108             $(this).css('background', 'green');
109             flag = 1;
110         }
111     });
112     
113 
114     
115 });