التابع event.target في jQuery
< jQuery
اذهب إلى التنقل
اذهب إلى البحث
مراجعة 02:55، 30 مايو 2018 بواسطة Khaled-yassin (نقاش | مساهمات) (أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:التابع <code>event.target</code> في jQuery}}</noinclude> == <code>...')
event.target
القيمة المعادة
يُعيد كائنًا من النوع Element.
الوصف
يُعيد هذا التابع عنصر DOM الذي بدأ الحدث.
event.target
أُضيف مع الإصدار: 1.0.
يمكن أن تكون الخاصية target هي العنصر لمُسجل للحدث أو لعناصره السليلة. غالبًا ما يكون من المفيد مقارنة event.target مع this لتحديد ما إذا كان الحدث يُعالج بسبب انتقال الحدث إلى العناصر الأب [event bubbling]. هذه الخاصية مفيدة جدا في تفويض الحدث، عند انتقال الحدث إلى العناصر الأب.
أمثلة
عرض اسم الوسم عند النقر.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.target demo</title>
<style>
span, strong, p {
padding: 8px;
display: block;
border: 1px solid #999;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="log"></div>
<div>
<p>
<strong><span>click</span></strong>
</p>
</div>
<script>
$( "body" ).click(function( event ) {
$( "#log" ).html( "clicked: " + event.target.nodeName );
});
</script>
</body>
</html>
تطبيق تفويض حدث بسيط: إضافة معالج النقر إلى قائمة غير مرتبة، ويخفي أبناء أبناء العنصر <li>. النقر فوق أحد أبناء العنصر <li> يبدل أبنائه (انظر toggle()).
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.target demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></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>
<script>
function handler( event ) {
var target = $( event.target );
if ( target.is( "li" ) ) {
target.children().toggle();
}
}
$( "ul" ).click( handler ).find( "ul" ).hide();
</script>
</body>
</html>