jQuery(一)——jQuery事件操作

阿新 • • 發佈：2021-02-02

技術標籤：JavaWeb js javascript jquery vue css

1. 頁面載入完成之後事件：Dom和jQuery對比

$( function(){ } ); 和 window.onload = function(){} 的區別？

它們分別是在什麼時候觸發？

jQuery 的頁面載入完成之後是瀏覽器的核心解析完頁面的標籤，並建立好 DOM 物件之後就會馬上執行。
原生 js 的頁面載入完成之後，除了要等瀏覽器核心解析完標籤建立好 DOM 物件，還要等標籤顯示時需要的內容載入完成。

它們觸發的順序？

jQuery 的頁面載入完成之後先執行
原生 js 的頁面載入完成之後後執行

它們執行的次數？

原生 js 的頁面載入完成之後，只會執行最後一次的賦值函式。
jQuery 的頁面載入完成之後，是全部把註冊的 function 函式，依次順序全部執行。
window.onload = function(){} 只會執行最後定義的那一個；
$( function(){ } ); 會從上到下依次執行。

2. jQuery中其它的事件處理方法

click() 它可以繫結單擊事件，以及觸發單擊事件
mouseover() 滑鼠移入事件
mousemove() 滑鼠移動事件（在繫結區域內移動，一般和滑鼠移入事件相聯絡）
mouseout() 滑鼠移出事件
bind() 可以給元素一次性繫結一個或多個事件。

unbind() 跟 bind 方法相反的操作，解除事件的繫結。
one() 使用上跟 bind 一樣。但是 one 方法繫結的事件每個只會響應一次。
live() 也是用來繫結事件。它可以用來繫結選擇器匹配的所有元素的事件。哪怕這個元素是後面動態創建出來的也有效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery-2021-02-01</title>
    <style 
 type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 13px;
            line-height: 130%;
            padding: 60px;
        }

        #panel {
            width: 300px;
            border: 1px solid #0050D0;
        }

        .head {
            padding: 5px;
            background: #96E555;
            cursor: pointer;       cursor允許滑鼠點選
        }
        
    </style>
    <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
  ------------------------測試-------------------------------      
    </script>
</head>
<body>
    <div id="panel">
        <h5 class="head">我是陸億行-2021-02-01</h5>
        <button>按 鈕</button>
    </div>
</body>
</html>

1、click() 事件
blur change事件同理，和Dom相比省去了on。

<script type="text/javascript">
        $(function () {
            $("h5").click(function () {      這是繫結單擊事件
                alert("h5單擊事件 == click方法繫結");
            });
            $("button").click(function () {
                $("h5").click();  不傳function,只調用click函式是觸發事件；
            })                    觸發單擊事件的前提是要有繫結單擊事件
        });
</script>

2、滑鼠事件：mouseover() 、mousemove() 、mouseout()

<script type="text/javascript">
    $(function () {
             //滑鼠移入
        $("h5").mouseover(function () {
            alert("我進來了");
        });
        //滑鼠移動
        $("h5").mousemove(function () {
            alert("我正在動");
        });
        //滑鼠移出
        $("h5").mouseout(function () {
            alert("我出去了");
        });
   });
</script>

5、bind事件、unbind事件、one事件

 <script type="text/javascript">
        $(function () {
            //bind繫結一個事件
            $("h5").bind("click", function () {
               alert("bind繫結的單擊事件："+$(this).text());
            });
            //bind繫結同時繫結多個事件，空格隔開
             $("h5").bind("click mouseover mouseout", function () {
                alert("bind繫結的多個事件："+$(this).text());
            });
            //同時繫結多個事件型別/處理程式
            $("h5").bind( {
            click:function () { alert("bind繫結的click事件："+$(this).text()); },
            mouseover:function (){alert("bind繫結的mouseover事件："+$(this).text());},
            mouseout:function (){alert("bind繫結的mouseout事件："+$(this).text());}
            } );
            
            $("h5").unbind("click");                 //移除一個
            $("h5").unbind("click mouseover");       //移除多個，空格隔開
            $("h5").unbind();                        //無參，全部移除
        });
    </script>

在每個物件上，這個事件處理函式只會被執行一次。其他規則與bind()函式相同。

8.live事件

<script type="text/javascript">
        $(function () {
            $("h5").click(function () {
				alert('h5單擊事件 == click方法繫結');
            });
            $('<h5 class="head">我才是陸億行-2021-02-01</h5>').appendTo( $("#panel") );
        });
</script>

用click繫結的單擊事件，只會給本來存在的h5標籤繫結單擊事件，當再次建立一個h5標籤時，不再具有單擊事件，如果想讓新建立的h5標籤也具有單擊事件，此時需要用live事件進行繫結。

 <script type="text/javascript">
        $(function () {
            $("h5").live("click",function () {
					alert('h5單擊事件 == live方法繫結');
				});
             $('<h5 class="head">我才是陸億行-2021-02-01</h5>').appendTo( $("#panel") );
        });
</script>

3. 事件的冒泡

什麼是事件的冒泡？

事件的冒泡是指：父子元素同時監聽同一個事件。當觸發子元素的事件的時候，同一個事件也被傳遞到了父元素的事件裡去響應。因此，會被響應兩次，但事實上，我們只希望響應一次。

<!DOCTYPE html>
<html lang="en">
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				font-size: 13px;
				line-height: 130%;
				padding: 60px;
			}
			#content{
				width: 220px;
				border: 1px solid #0050D0;
				background: #96E555;
			}
			span{
				width: 200px;
				margin: 10px;
				background: #666666;
				cursor: pointer;
				color: white;
				display: block;
			}
			p{
				width: 200px;
				background: #888;
				color: white;
				height: 16px;
			}
		</style>
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
--------------------填入內容-------------------------------------------			
		</script>
	</head>
	<body>
		<div id="content">
			外層div元素
			<span>內層span元素</span>
			外層div元素
		</div>

	</body>
</html>

父元素為div元素，子元素為span元素。

如果這麼寫的話：

<script type="text/javascript">
			$(function () {
				$("#content").click(function () {
					alert('我是div');
				});

				$("span").click(function () {
					alert('我是span');
				});
			})
</script>

觸發span繫結的click事件的同時也會觸發div繫結事件，那麼如何阻止事件冒泡呢？

在子元素事件函式體內，return false; 可以阻止事件的冒泡傳遞。

<script type="text/javascript">
			$(function () {
				$("#content").click(function () {
					alert('我是div');
				});

				$("span").click(function () {
					alert('我是span');
					return false;      僅此行有區別！
				});
			})
		</script>

4. JavaScript 事件物件

事件物件，是封裝有觸發的事件資訊的一個 javascript 物件，儲存著與事件相關的所有資訊。
我們重點關心的是怎麼拿到這個 javascript 的事件物件。以及使用。

如何獲取 javascript 事件物件呢？

在給元素繫結事件的時候，在事件的 function( event ) 引數列表中傳入一個引數即可，這個引數名，我們習慣取名為 event。
這個 event 就是 javascript 傳遞參事件處理函式的事件物件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery-2021-02-01</title>
    <style type="text/css">
        #areaDiv {
            border: 1px solid black;
            width: 300px;
            height: 50px;
            margin-bottom: 10px;
        }

        #showMsg {
            border: 1px solid black;
            width: 300px;
            height: 20px;
        }
    </style>

    <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
------------------------填入程式碼-------------------------------
    </script>
</head>
<body>
    <div id="areaDiv">aabb</div>
    <div id="showMsg">ccdd</div>
</body>
</html>

方式一：Dom方式

 <script type="text/javascript">
   1.原生javascript獲取 事件物件
        window.onload = function () {
            document.getElementById("areaDiv").onclick = function (event) {
                console.log(event);
            }     在控制檯輸出event的資訊。
        }
</script>

在儲存的所有資訊中，有個type屬性的資訊，記錄著繫結事件觸發的方式。

方式二：jQuery方式

<script type="text/javascript">
  2.jQuery獲取事件物件
        $(function () {
           $("#showMsg").click(function (event) {
               console.log(event);
               alert(event.type);
           });
        });
</script>

應用

使用 bind 同時對多個事件繫結同一個函式時，除了像上面bind中提到的方式3，給每個事件都定義一個函式之外，還可以通過event的type屬性進行判斷。

<script type="text/javascript">
  3.使用bind同時對多個事件繫結同一個函式。怎麼獲取當前操作是什麼事件。
        $(function () {
           $("#showMsg,#areaDiv").bind("mouseover mouseout click",function (event) {
              if (event.type=="mouseover"){
                  alert("滑鼠移入");
              }else if(event.type=="mouseout") {
                  alert("滑鼠移出");
              } else {
                  alert("單擊事件");
              }
           });
        });
</script>