JavaScript，jQuery对事件的处理

　　　　JavaScript和jQuery对事件的处理

一. 事件

页面加载完毕后浏览器会通过javascript为Dom元素加载事件，使用Javascript时候使用的是window.onload方法，而Jquery使用的是$(document).ready()方法,下表

展示两个事件的异同。

   window.onload方法  $(document).ready()方法
 执行时机  必须等待所有内容加载完成后才能执行  页面的DOM元素绘制完成后可以执行不必等待全部内容加载完成。
绑定函数个数

该方法能够绑定一个函数，如果绑定多个只能执行最后的一个绑定。例：

window.onload=function(){alert("1");}

window.onload=function(){alert("2");}

执行结果只执行最后绑定的函数结果是打印：2.　　

 能够注册多个函数，按绑定顺序执行绑定函数。例：

$(document).ready(funtction(){alert("1");});

$().ready(function(){alert("2");});

执行结果是顺序执行绑定的函数：先打印1.然后再打印2.
 简化写法  无  $().ready();$.ready()

1.事件概述

1)什么是事件

  • 就是用户的操作、动作
  • 就是JS调用的时机

2)事件的分类

  • 鼠标事件
  • 键盘事件
  • 状态事件：条件达成时自动触发

2.事件定义

1)直接绑定

  • 在元素上通过事件属性定义事件,如onclick="f1();"
  • 优点:直观
  • 缺点:耦合度高

2)后绑定

  • 在页面加载后获取节点,使用js给它追加一个事件
  • 优点:耦合度低
  • 缺点:不直观
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <script>
 7     //1.直接绑定事件（两者都一样）
 8     function f1(e) {
 9         console.log(1);
10         console.log(e);
11     }
12     //页面加载后
13     window.onload = function() {
14         //给按钮2后绑定单击事件（JavaScript绑定）
15         var btn2 = document.getElementById("btn2");
16         btn2.onclick = function(e){
17             console.log(2);
18             console.log(e);
19         };
20     }
21 </script>
22 </head>
23 <body>
24     <input type="button" value="按钮1"
25         onclick="f1(event);"/>
26     <input type="button" value="按钮2"
27         id="btn2"/>
28 </body>
29 </html>

　　　　//页面加载后

　　　　//给按钮2后绑定单击事件(jquery绑定)

　　　　//$(function(){});相当于window.onload

　　　　$(function(){

　　　　　　$(":button:eq(1)").click(function(){});

　　　　});

3)取消事件

  • return false

3.事件对象

3.1什么是事件对象

  • 在某些特定情况下,需要获取事件发生时的鼠标坐标、键盘按键等信息
  • 这些和事件相关的特殊信息被浏览器封装在一个对象里:event
  • 这个由浏览器提供的,和事件相关的对象叫事件对象

3.2如何获得事件对象

1)直接绑定事件时

  • 调用函数时直接传入event对象,函数增加参数接收该对象

2)后绑定事件时

  • 调用函数时浏览器会自动传入event,函数增加参数接收该对象

4.事件冒泡

4.1什么是事件冒泡

  • 事件触发的顺序是由内向外的

4.2如何取消冒泡

  • 通过事件对象的API

JavaScript取消：

<input type="button" value="按钮1"
                onclick="f1(event);"/>
function f1(e) {
         alert("BUTTON");
　　　　　　//取消冒泡
         //e={"stopPropagation":function(){}}
         //e={"cancelBubble":false}
         if(e.stopPropagation) {
             e.stopPropagation();
         } else {
             e.cancelBubble = true;
         }
jQuery取消 ：
   e.stopPropagation();

4.3事件冒泡的作用

  • 可以简化事件的定义

4.4事件源

  • 事件发生的具体位置/来源
  • 通过事件对象获取

 　　JavaScript获得事件源：event.srcElement||event.target

　　 jQuery获得事件源　：event.target

5. jQuery合成事件

　　合成事件也可以称为交互事件是JQuery自定义（jQuery特有的事件，必须使用jQuery后绑定）的方法，方法有两个hover()和toggle()。

　　①hover()方法模仿鼠标悬停事件，方法格式如下：hover(enter,leave)。例：

　　　　$("ul li").hover(

　　　　　　　　function(){

　　　　　　　　　　alert("Enter");

　　　　　　　　　　//$(this).width(250).height(250)悬停时变大

　　　　　　　　　　//$(this).addClass（“big”）big是样式

　　　　　　　　}, //悬停时

　　　　　　　　functiron(){

　　　　　　　　　　alert("leave");

　　　　　　　　} //离开时

　　　　);

　　　　该示例为ul的li元素绑定悬停事件，当鼠标停上ul的子元素li上时候会触发enter()函数，打印“Enter”,当鼠标移出li元素时候会打印"leave"。

　　②toggle()方法切换操作循环执行绑定的函数，方法格式如下：toggle(fun1,fun2,...,funN);例:

　　　　<input type="button" id="btn1" value="触发切换操作"/>

　　　　$("#btn1").toggle(

　　　　　　　　function(){

　　　　　　　　　　alert("开始");

　　　　　　　　},

　　　　　　　　function(){

　　　　　　　　　　alert("继续");

　　　　　　　　},

　　　　　　　　function(){

　　　　　　　　　　alert("结束");

　　　　　　　　}

　　　　);

　　　　该示例为按钮btn1绑定切换事件每次单击都会顺序触发绑定事件中的一个。该示例第一次点击打印"开始"，第二次点击打印"继续",第三次点击打印"结束"，再次点击和第

　　　　一次一样打印"开始"，循环顺序执行函数。

6. jQuery之动画效果

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>显示与隐藏</title>
 6 <script src="../js/jquery-1.11.1.js"></script>
 7 <style>
 8     #d1{
 9         width:200px;
10         height:200px;
11         background-color: red;
12         /*动画基于 定位*/
13         position:relative;
14     }
15 </style>
16 <script type="text/javascript">
17     function f1(){
18         $("#d1").show(3000);
19         
20     }
21     function f2(){
22         //第二个参数是函数，该函数在动画结束时被调用，这样的函数我们称之为回调函数
23         //回调函数：逻辑完成后自动调用的函数
24         $("#d1").hide(3000,function(){
25             console.log("大家好，我是回调函数！");
26         });
27         //动画底层的实现原理：通过定时器不断的修改元素的样式就是动画，
28         //定时器相当于线程，所以动画方法相当于启动了线程。当前方法f2相当于主线程，二者并发执行，主线程
29         //f2启动支线程后不等待，立刻执行下一行代码，而支线程3s后才执行完成
30         console.log("over");
31     }
32     $(function(){
33         $("#d1").hover(
34         function(){
35             $(this).animate({"left":"20px"},500);
36         },function(){
37             $(this).animate({"left":"0px"},500);
38         });
39     });
40 </script>
41 </head>
42 <body>
43     
44     <div id="d1">
45         <img src="../112233.jpg"/>
46     </div>
47     <p>
48         <input type="button" value="显示" onclick="f1();"/>
49         <input type="button" value="隐藏" onclick="f2();"/>
50     </p>
51 </body>
52 </html>

 

posted @ 2017-04-23 15:19  等你，在雨中  阅读(135)  评论(0)    收藏  举报