معرفی
در این مقاله درباره حباب کردن رویداد و ضبط رویداد در جاوا اسکریپت خواهیم دید . انتشار رویداد نحوه حرکت رویدادها از طریق درخت DOM برای رسیدن به هدف است. حباب کردن و ضبط رویداد راههایی برای انتشار رویداد در درخت HTML DOM هستند.
حباب رویداد
حباب کردن رویدادی است که از درونی ترین عنصر یا عنصر هدف شروع می شود و به والدینش می رسد، سپس تمام اجدادش، یعنی رویدادها از پایین به بالا منتشر می شوند. در نظر بگیرید که عنصر "A" در عنصر دیگر "B" وجود دارد، و هر دو عنصر یک کنترل کننده/شنونده برای یک رویداد دارند (مثلاً، روی رویداد کلیک کنید). وقتی رویدادی روی عنصر «A» اتفاق میافتد، ابتدا کنترلکننده رویداد آن اجرا میشود، سپس کنترلکننده رویداد والد آن اجرا میشود. برای همه مرورگرهای مدرن، جریان رویداد پیشفرض، حباب رویداد است.
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="grandparent">
<div id="parent">
<button id="child">Child</button>
</div>
</div>
<script>
<!-- Add click event on grandparent div -->
var grandParent = document.getElementById('grandparent');
grandParent.addEventListener('click', function(){
console.log("GrandParent Clicked");
});
<!-- Add click event on parent div -->
var parent = document.getElementById('parent');
parent.addEventListener('click', function(){
console.log("Parent Clicked");
});
<!-- Add click event on child button -->
var child = document.getElementById('child');
child.addEventListener('click', function(){
console.log("Child Clicked");
});
</script>
</body>
</html>
در کد بالا،
- من دو عنصر "div" دارم. یک عنصر "div" با شناسه "بزرگ و مادربزرگ" و یک عنصر "div