jQuery中event.target和this的區別

時間 2019-11-17

標籤 jquery event.target event target 區別欄目 JQuery 简体版

原文原文鏈接

this和event.target的區別：javascript

　　1.js中事件是會冒泡的，因此this是能夠變化的，但event.target不會變化，它永遠指向觸發事件的DOM元素自己；css

　　2.this和event.target都是dom對象，使用jQuey中的方法能夠將他們轉換爲jquery對象：$(this)和$(event.target).html

好比,一個很簡單的例子.java

$(event.target)指向觸發事件的元素. 當點擊藍色小方框時, 藍色小方框會變成橙色, 但其外圍的大方框不會變色, 即沒有觸發事件的冒泡行爲.jquery

點擊前: 點擊後: dom

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7           *{
 8               margin: 0;
 9               padding: 0;
10              }
11             #big {
12                 width: 200px;
13                 height: 200px;
14                 background-color: gray;                
15             }    
16             #small {
17                 width: 100px;
18                 height: 100px;
19                 background-color: blue;
20                 margin: 0 auto;
21             }
22         </style>        
23     </head>
24     <body>
25     <div id="big">
26         <div id="small"></div>
27     </div>
28     <script src="js/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
29     <script type="text/javascript">
30         $("div, input").click(function (event) {
31              $(event.target).css("background-color", "orange");
32         });
33     </script>
34     </body>
35 </html>

$(this)指向觸發事件的元素. 當點擊藍色小方框時,藍色小方框會變橙色, 同時其外圍的灰色大方框也會變成橙色, 也就是說當用this獲取觸發事件的元素會引發事件的冒泡.this

點擊前: 點擊後: spa

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7           *{
 8               margin: 0;
 9               padding: 0;
10             }
11             #big {
12                 width: 200px;
13                 height: 200px;
14                 background-color: gray;                
15             }    
16             #small {
17                 width: 100px;
18                 height: 100px;
19                 background-color: blue;
20                 margin: 0 auto;
21             }
22         </style>        
23     </head>
24     <body>
25     <div id="big">
26         <div id="small"></div>
27     </div>
28     <script src="js/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
29     <script type="text/javascript">
30         $("div, input").click(function () {        
31             $(this).css("background-color", "orange");
32         })
33     </script>
34     </body>
35 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。