标签：jQuery function 绑定 click 2023.3 事件 h5 event

jQuery 事件操作

js中的$( function(){} ); 和原生js中的 window.onload = function(){} 的区别？

他们分别是在什么时候触发？

jQuery 的页面加载完成之后是浏览器的内核解析完页面的标签创建好 DOM 对象之后就会马上执行。
原生 js 的页面加载完成之后，除了要等浏览器内核解析完标签创建好 DOM 对象，还要等标签显示时需要的内容加载完成。

他们触发的顺序？

jQuery 页面加载完成之后先执行
原生 js 的页面加载完成后执行

他们执行的次数？

原生 js 的页面加载完成之后，只会执行最后一次的赋值函数。
jQuery 的页面加载完成之后是全部把注册的 function 函数，依次顺序全部执行。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <title>Insert title here</title>
 6 <script type="text/javascript"></script>
 7 <script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
 8 <script type="text/javascript">
 9     //相当于赋值操作  所以只执行最后一个
10     window.onload = function(){
11         //会在整个页面加载完毕之后调用
12         alert("原生js加载完成   后执行 ")
13     }
14     $(function(){
15         //会在当前文档加载完毕之后调用
16         alert("JQuery加载完成(简写)   先执行")
17     })
18     // $(document).ready(function (){
19     //  alert("JQuery加载完成(全写)   先执行")
20     // });
21 
22 
23 </script>
24 </head>
25 <body>
26     <button>我是按钮</button>
27     <!--- 等标签显示时需要的内容加载完成。这个链接需要加载 -->
28     <iframe src="http://www.baidu.com"></iframe>
29     
30 </body>
31 </html>

jQuery 中其他的事件处理方法：

click() 它可以绑定单击事件，以及触发单击事件
mouseover() 鼠标移入事件
mouseout() 鼠标移出事件
bind() 可以给元素一次性绑定一个或多个事件。
one() 使用上跟 bind 一样。但是 one 方法绑定的事件只会响应一次。
unbind() 跟 bind 方法相反的操作，解除事件的绑定
live() 也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出来的也有效

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5         <title>Untitled Document</title>
 6         <link href="css/style.css" type="text/css" rel="stylesheet" />
 7         <script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
 8         <script type="text/javascript">
 9         
10             $(function(){
11                 // //click()
12                 // $("h5").click(function () { // 传function是绑定事件
13                 //  alert('h5单击事件 == click方法绑定')
14                 // });
15                 // //点击按钮触发h5标签的单击事件
16                 // $("button").click(function () {
17                 //  $("h5").click(); // 不传function是触发事件(触发    $("h5")的   单击事件)
18                 // });
19                 //
20                 // // 鼠标移入
21                 // $("h5").mouseover(function () {
22                 //  console.log("你进来了")
23                 // });
24                 //
25                 // //鼠标移出
26                 // $("h5").mouseout(function () {
27                 //  console.log("你出去了")
28                 // });
29                 //
30                 // // 使用bind绑定事件(绑定了上面三种类型事件  空格隔开)
31                 // $("h5").bind("click mouseover mouseout",function () {
32                 //  console.log("这是bind绑定的事件");
33                 // });
34                 //
35                 // //one
36                 // $("h5").one("click mouseover mouseout",function () {
37                 //  console.log("这是one绑定的事件");
38                 // });
39                 //
40                 // $("h5").unbind("click");//取消了$("h5")的click事件   如果不写参数相当于全部取消
41 
42 
43 
44                 // 使用live绑定的单击事件  后面就算是新创建的h5标签也会绑定上click事件
45                 //           事件类型 执行的函数
46                 $("h5").live("click",function () {
47                     alert('h5单击事件 == live方法绑定');
48                 });
49 
50                 //在#panel中创建一个h5标签   也会绑定上click事件
51                 $('<h5 class="head">什么是jQuery?</h5>').appendTo( $("#panel") );
52 
53 
54             });
55         
56         </script>
57     </head>
58     <body>
59         <div id="panel">
60             <h5 class="head">什么是jQuery?</h5>
61             <div class="content">
62                 jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
63             </div>
64             <button>按钮</button>
65         </div>
66     </body>
67 
68 </html>

事件的冒泡

什么是事件的冒泡？

事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。

那么如何阻止事件冒泡呢？

在子元素事件函数体内，return false; 可以阻止事件的冒泡传递。

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5         <title>Untitled Document</title>
 6         <style type="text/css">
 7             *{
 8                 margin: 0;
 9                 padding: 0;
10             }
11             body{
12                 font-size: 13px;
13                 line-height: 130%;
14                 padding: 60px;
15             }
16             #content{
17                 width: 220px;
18                 border: 1px solid #0050D0;
19                 background: #96E555;
20             }
21             span{
22                 width: 200px;
23                 margin: 10px;
24                 background: #666666;
25                 cursor: pointer;
26                 color: white;
27                 display: block;
28             }
29             p{
30                 width: 200px;
31                 background: #888;
32                 color: white;
33                 height: 16px;
34             }
35         </style>
36         <script type="text/javascript" src="jquery-1.7.2.js"></script>
37         <script type="text/javascript">
38             $(function(){
39                 //父元素#content  与子元素span绑定同一个事件
40                 $("#content").click(function () {
41                     alert('我是div');
42                 });
43 
44                 $("span").click(function () {
45                     alert('我是span');
46                     return false;//如果不写   单击子元素会发生单击事件,但是也会触发父元素的单击事件
47                                  //如果写   单击子元素会发生单击事件,不会触发父元素的单击事件
48                 });
49             })
50         </script>
51     </head>
52     <body>
53         <div id="content">
54             外层div元素
55             <span>内层span元素</span>
56             外层div元素
57         </div>
58         
59         <div id="msg"></div>    
60         
61         <br><br>
62         <a href="http://www.hao123.com">WWW.HAO123.COM</a>  
63     </body>
64 </html>

javaScript 事件对象

事件对象，是封装有触发的事件信息的一个 javascript 对象。

我们重点关心的是怎么拿到这个 javascript 的事件对象。以及使用。

如何获取呢 javascript 事件对象呢？

在给元素绑定事件的时候，在事件的 function( event ) 参数列表中添加一个参数，这个参数名，我们习惯取名为 event。这个 event 就是 javascript 传递参事件处理函数的事件对象。

比如：

//1.原生 javascript 获取事件对象

//2.jQuery 代码获取事件对象

//3.使用 bind 同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <title>Insert title here</title>
 6 <style type="text/css">
 7 
 8     #areaDiv {
 9         border: 1px solid black;
10         width: 300px;
11         height: 50px;
12         margin-bottom: 10px;
13     }
14     
15     #showMsg {
16         border: 1px solid black;
17         width: 300px;
18         height: 20px;
19     }
20 
21 </style>
22 <script type="text/javascript" src="jquery-1.7.2.js"></script>
23 <script type="text/javascript">
24 
25     //1.原生javascript获取 事件对象(事件也是一个对象)
26     window.onload = function () {
27         document.getElementById("areaDiv").onclick = function (event) {
28             console.log(event);
29         }
30     }
31     //2.JQuery代码获取 事件对象
32     $(function () {
33         $("#areaDiv").click(function (event) {
34             console.log(event);
35         });
36     });
37 
38     //3.使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。
39     $(function () {
40         $("#areaDiv").bind("mouseover mouseout",function (event) {
41             if (event.type == "mouseover") {
42                 console.log("鼠标移入");//鼠标移入#areaDiv就会打印鼠标移入
43             } else if (event.type == "mouseout") {
44                 console.log("鼠标移出");//鼠标移出#areaDiv就会打印鼠标移出
45             }
46         });
47     });
48 
49 
50 </script>
51 </head>
52 <body>
53 
54     <div id="areaDiv"></div>
55     <div id="showMsg"></div>
56 
57 </body>
58 </html>

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <title>Insert title here</title>
 6 <style type="text/css">
 7 
 8     #areaDiv {
 9         border: 1px solid black;
10         width: 300px;
11         height: 50px;
12         margin-bottom: 10px;
13     }
14     
15     #showMsg {
16         border: 1px solid black;
17         width: 300px;
18         height: 20px;
19     }
20 
21 </style>
22 <script type="text/javascript" src="jquery-1.7.2.js"></script>
23 <script type="text/javascript">
24 
25     $(function () {
26         $("#areaDiv").bind("mouseover mouseout",function (event) {
27             console.log(event);
28         });
29     });
30 
31 </script>
32 </head>
33 <body>
34 
35     <div id="areaDiv"></div>
36     <div id="showMsg"></div>
37 
38 </body>
39 </html>

练习图片跟随鼠标

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <title>Insert title here</title>
 6 <style type="text/css">
 7     body {
 8         text-align: center;
 9     }
10     #small {
11         margin-top: 150px;
12     }
13     #showBig {
14         position: absolute;
15         display: none;
16     }
17 </style>
18 <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
19 <script type="text/javascript">
20     $(function(){
21         $("#small").bind("mouseover mouseout mousemove",function (event) {
22             if (event.type == "mouseover") {//事件是鼠标移出时
23                 $("#showBig").show();
24             } else if (event.type == "mousemove") {//事件是鼠标移动时
25                 $("#showBig").offset({//offset设置获取坐标
26                     //event.pageX 鼠标与屏幕的横向距离
27                     left: event.pageX + 10,//鼠标从小图片向右下角移动时  鼠标会移动到大图片上 导致小图片绑定的事件不起作用  造成图片频闪  所以加了一些距离
28                     top: event.pageY + 10
29                 });
30             } else if (event.type == "mouseout") {
31                 $("#showBig").hide();
32             }
33         });
34     });
35 </script>
36 </head>
37 <body>
38 
39     <img id="small" src="img/small.jpg" />
40     
41     <div id="showBig">
42         <img src="img/big.jpg">
43     </div>
44 
45 </body>
46 </html>

标签：jQuery,function,绑定,click,2023.3,事件,h5,event
From： https://www.cnblogs.com/shanzha/p/17345706.html

2023.3.2 jQuery 事件操作

jQuery 事件操作

相关文章

赞助商

阅读排行