快捷導(dǎo)航

jQuery中event.target和this的區(qū)別詳解

更新時間：2020年08月13日 12:01:13 作者：Y.S.Z

這篇文章主要介紹了jQuery中event.target和this的區(qū)別詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧

this和event.target的區(qū)別：

　　1.js中事件是會冒泡的，所以this是可以變化的，但event.target不會變化，它永遠指向觸發(fā)事件的DOM元素本身；

　　2.this和event.target都是dom對象，使用jQuey中的方法可以將他們轉(zhuǎn)換為jquery對象：$(this)和$(event.target).

比如,一個很簡單的例子.

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

點擊前: 點擊后:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
  *{
  margin: 0;
  padding: 0;
  }
  #big {
  width: 200px;
  height: 200px;
  background-color: gray;
  }
  #small {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 0 auto;
  }
 </style>
 </head>
 <body>
 <div id="big">
 <div id="small"></div>
 </div>
 <script src="js/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 $("div, input").click(function (event) {
  $(event.target).css("background-color", "orange");
 });
 </script>
 </body>
</html>

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

點擊前: 點擊后:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
  *{
  margin: 0;
  padding: 0;
  }
  #big {
  width: 200px;
  height: 200px;
  background-color: gray;
  }
  #small {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 0 auto;
  }
 </style>
 </head>
 <body>
 <div id="big">
 <div id="small"></div>
 </div>
 <script src="js/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 $("div, input").click(function () {
  $(this).css("background-color", "orange");
 })
 </script>
 </body>
</html>

例二

onclick = changeImg(this) vs onclick = changeImg(event)

<img src='usa.gif' onclick="changeImg(event)" />
<script>
　　var myImages = [
　　　　'usa.gif'，'canada.gif','jamaica.gif','mexico.gif'
　　];
　　function changeImg(e) {
　　　　var el = e.target;
　　　　var newImgNumber = Math.round(Math.round()*3);
　　　　while(el.src.indexOf(myImages[newImgNumber]) != -1){
　　　　　　el.src =myImages[newImgNumber];
　　　　}
　　}
</script>

this是Javascript語言的一個關(guān)鍵字。

this代表函數(shù)運行時，自動生成的一個內(nèi)部對象，只能在函數(shù)內(nèi)部使用。

this和event.target的區(qū)別：

js中事件是會冒泡的，所以this是可以變化的，但event.target不會變化（在事件觸發(fā)時，只傳遞當前event對象的引用），它永遠是直接接受事件的目標DOM元素；

另外，this和event.target都是dom對象，如果要使用jquey中的方法可以將他們轉(zhuǎn)換為jquery對象：$(this)和$(event.target);

到此這篇關(guān)于jQuery中event.target和this的區(qū)別詳解的文章就介紹到這了,更多相關(guān)jQuery中event.target和this內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: