event.target

מחזירה: אלמנט

תיאור: אלמנט DOM, שמתחיל אירוע.

event.target

הוספה בגרסה: 1.0

זה יכול להיות אלמנט, שנרשם עבור אירוע הזה או ילד שלו בדרך כלל שימושי להשוות event.target עם this כדי לקבוע אם האירוע מטופל בשל אירוע מבעבע. מאפיין זה הוא מאוד שימושי במשלחת האירוע, כאשר האירועים בועתים.

דוגמאות

דוגמה 1

מציג שם התג בלחיצה

$("body").click(function(event) {
  $("#log").html("clicked: " + event.target.nodeName);
});

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

קוד מלא

מציג שם התג בלחיצה

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
  <style>
span, strong, p { 
  padding: 8px; display: block; border: 1px solid #999;  }
    </style>

  <script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
    $("body").click(function(event) {
    $("#log").html("clicked: " + event.target.nodeName);
  });  
});

</script>

</head>
<body>
	
<div id="log"></div>
<div>
  <p>
    <strong><span>click</span></strong>

  </p>
</div>

</body>
</html>

נסה זאת בעצמך

דוגמה 2

מיישמת משלחת האירוע פשוטה: המטפל לחיצה הוסף לרשימה לא מסודרת, והילדים של הילדים של תג li מוסתרים. לחיצה על אחד הילדים li מחליפה הצגה שלהם (ראו toggle).

  function handler(event) {
   var $target = $(event.target);
   if( $target.is("li") ) {
      $target.children().toggle();
    }
  }
  $("ul").click(handler).find("ul").hide();

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

קוד מלא

מיישמת משלחת האירוע פשוטה: המטפל לחיצה הוסף לרשימה לא מסודרת, והילדים של הילדים של תג li מוסתרים. לחיצה על אחד הילדים li מחליפה הצגה שלהם (ראו toggle).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">

$(document).ready(function(){
function handler(event) {
  var $target = $(event.target);
  if( $target.is("li") ) {
    $target.children().toggle();
  }
}
$("ul").click(handler).find("ul").hide();
});
</script>

</head>
<body>
	
<ul>

  <li>item 1
    <ul>
      <li>sub item 1-a</li>

      <li>sub item 1-b</li>
    </ul>

  </li>
  <li>item 2
    <ul>

      <li>sub item 2-a</li>
      <li>sub item 2-b</li>

    </ul>
  </li>  


</ul>
</body>
</html>

נסה זאת בעצמך

האם מידע זה היה מועיל?

כן לא

event.target

event.target

event.target

דוגמאות

דוגמה 1

קוד מלא

דוגמה 2

קוד מלא

תגובות