jQuery中的事件

页面加载

原生DOM中的事件具有页面加载的内容onload事件，在jQuery中同样提供了对应的内容ready()函数。

ready与onload之间的区别：

onloadready
没有简写方式 具有简写方式
当HTML页面所有内容加载完毕后才执行onload 当DOM节点加载完毕后就执行ready
一个HTML页面只能编写一个onload 一个HTML页面允许同时编写多个ready

ready()的编写方式：

  • $(document).ready(function(){});
  • $().ready(function(){});
  • $(function(){});
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>onload事件机制</title>
 6       <script src="js库/jquery-1.11.3.js"></script>    
 7       <script>
 8           /*
 9         window.onload = function(){
10             var user = document.getElementById("user");
11         }*/
12         /*$(document).ready(function(){
13             console.log($("#user").val());
14         });*/
15         /*$().ready(function(){
16             console.log($("#user").val());
17         });*/
18         $(function(){
19             console.log($("#user").val());
20         });
21       </script>
22 </head>
23 <body>
24       <input type="text" id="user" value="张无忌">    
25 </body>
26 </html>

事件绑定

jQuery中提供了事件绑定与解绑机制，类似于原生DOM中的addEventListener()方法。

jQuery的事件绑定：

  • 单事件绑定
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>012_实现伸缩二级菜单</title>
 6     <script src="js库/jquery-1.11.3.js"></script>
 7     <style>
 8         li {
 9             list-style: none;
10         }
11 
12         li span {
13             padding-left: 20px;
14             cursor: pointer;
15         }
16 
17         .open {
18             background: url("img/minus.png") no-repeat center left;
19         }
20 
21         .closed {
22             background: url("img/add.png") no-repeat center left;
23         }
24 
25         .show {
26             display: block;
27         }
28 
29         .hide {
30             display: none;
31         }
32     </style>
33 </head>
34 <body>
35     <ul class="tree">
36         <li>
37             <span class="open">考勤管理</span>
38             <ul class="show">
39                 <li>日常考勤</li>
40                 <li>请假申请</li>
41                 <li>加班/出差</li>
42             </ul>
43         </li>
44         <li>
45             <span class="closed">信息中心</span>
46             <ul class="hide">
47                 <li>通知公告</li>
48                 <li>公司新闻</li>
49                 <li>规章制度</li>
50             </ul>
51         </li>
52         <li>
53             <span class="closed">协同办公</span>
54             <ul class="hide">
55                 <li>公文流转</li>
56                 <li>文件中心</li>
57                 <li>内部邮件</li>
58                 <li>即时通信</li>
59                 <li>短信提醒</li>
60             </ul>
61         </li>
62     </ul>
63 
64     <script>
65         $("span").click(function(){
66             if($(this).hasClass("open")){
67                 $(this).attr("class", "closed");
68                 $(this).next().attr("class", "hide");
69             }else{
70                 $(this).attr("class", "open");
71                 $(this).next().attr("class", "show");
72             }
73         });
74     </script>
75 </body>
76 </html>
  • 多事件绑定
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title>015_图片提示</title>
 6     <!--   引入jQuery -->
 7     <script src="js库/jquery-1.11.3.js" type="text/javascript"></script>
 8     <style type="text/css">
 9         body {
10             margin: 0;
11             padding: 40px;
12             background: #fff;
13             font: 80% Arial, Helvetica, sans-serif;
14             color: #555;
15             line-height: 180%;
16         }
17 
18         img {
19             border: none;
20         }
21 
22         ul, li {
23             margin: 0;
24             padding: 0;
25         }
26 
27         li {
28             list-style: none;
29             float: left;
30             display: inline;
31             margin-right: 10px;
32             border: 1px solid #AAAAAA;
33         }
34 
35         /* tooltip */
36         #tooltip {
37             position: absolute;
38             border: 1px solid #ccc;
39             background: #333;
40             padding: 2px;
41             display: none;
42             color: #fff;
43         }
44     </style>
45 </head>
46 <body>
47     <h3>有效果：</h3>
48     <ul>
49         <li><a href="img/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="img/apple_1.jpg" alt="苹果 iPod"/></a></li>
50         <li><a href="img/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="img/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
51         <li><a href="img/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="img/apple_3.jpg" alt="苹果 iPhone"/></a></li>
52         <li><a href="img/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="img/apple_4.jpg" alt="苹果 Mac"/></a>
53         </li>
54     </ul>
55     <script type="text/javascript">
56         var x = 10, y = 20, title;
57         $("ul>li>a[class=tooltip]").mouseover(function(event){
58             title = this.title;
59             this.title = '';
60             // 获取大图片的文件路径
61             var src = this.href;
62             // 创建用于显示大图片的元素
63             var $div = $("<div id='tooltip'><img src='" + src + "'><br>" + title + "</div>");
64             // 添加到页面中
65             $("body").append($div);
66             // 调整位置 -- 鼠标坐标值
67             $("#tooltip").css({
68                 "top": event.pageY + y,
69                 "left": event.pageX + x
70             }).show();
71         }).mousemove(function(event){
72              $("#tooltip").css({
73                 "top": event.pageY + y,
74                 "left": event.pageX + x
75             });
76         }).mouseout(function(){
77             this.title = title;
78             $("#tooltip").remove();     
79         });
80     </script>
81 </body>
82 </html>

 

事件对象

什么是事件对象

事件是一种JavaScript结构，它会在元素获得处理事件的机会时被传递给被调用的事件处理程序。这个对象中包含与事件相关的信息，也提供了可以影响事件在DOM中传递进程的一些方法。

事件对象的常用属性

  • srcElement/target : 事件源对象
  • eventPhase : 事件所处的传播阶段
  • clientX/offsetX/pageX/screenX/x：事件发生的X坐标
  • clientY/offsetY/pageY/screenY/y：事件发生的Y坐标
  • which/keyCode/charCode : 键盘事件中按下的按键
  • button：鼠标哪个按键被按下了
  • cancelBubble ：是否取消事件冒泡
  • returnValue : 是否阻止事件默认行为

阻止默认行为

所谓默认行为，就是指页面中默认具有的一些行为，例如表单提交、连接跳转等效果。

  • event.preventDefault();
  • return false;

与其他JS库共存

  • 第一种方式 
     1 /*
 2   * 先引入其他JS库,后引入jQuery
 3   * * "$"符号属于其他JS库
 4   * 解决冲突
 5   * * jQuery中 - "$"符号指代jQuery
 6   * * jQuery中不再使用"$"符号
 7   */
 8 jQuery(document).ready(function(){
 9     console.log("this is ready.");
10 });
  • 第二种方式 
    1 jQuery(document).ready(function($){
2     // 在当前函数中使用"$"符号 - jQuery
3 });
4 // "$"符号 - 其他JS库
  • 第三种方式 
    1 (function($){
2     // "$"符号 - jQuery
3 })(jQuery);
4 // "$"符号 - 其他JS库
  • 第四种方式 
    jQuery.noConflict();
jQuery(function($){
    console.log($("p").text());
});
  • 第五种方式 
    1 jQuery.noConflict();
2 (function($){
3     console.log($("p").text());
4 })(jQuery);