快捷導(dǎo)航

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

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

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

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

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

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

比如,一個(gè)很簡(jiǎn)單的例子.

$(event.target)指向觸發(fā)事件的元素. 當(dāng)點(diǎn)擊藍(lán)色小方框時(shí), 藍(lán)色小方框會(huì)變成橙色, 但其外圍的大方框不會(huì)變色, 即沒(méi)有觸發(fā)事件的冒泡行為.

點(diǎn)擊前: 點(diǎn)擊后:

<!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ā)事件的元素. 當(dāng)點(diǎn)擊藍(lán)色小方框時(shí),藍(lán)色小方框會(huì)變橙色, 同時(shí)其外圍的灰色大方框也會(huì)變成橙色, 也就是說(shuō)當(dāng)用this獲取觸發(fā)事件的元素會(huì)引起事件的冒泡.

點(diǎn)擊前: 點(diǎn)擊后:

<!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語(yǔ)言的一個(gè)關(guān)鍵字。

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

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

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

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

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

您可能感興趣的文章: