<style>
body * {
margin: 10px;
border: 1px solid blue;
}
</style>
<form onclick="alert('form')">FORM
<div onclick="alert('div')">DIV
<p onclick="alert('p')">P</p>
</div>
</form>
যদি উপরের কোডে পি ট্যাগটিতে ক্লিক করেন তবে আপনি তিনটি সতর্কতা পাবেন এবং ডিভ ট্যাগে ক্লিক করলে আপনি দুটি সতর্কতা এবং ফর্ম ট্যাগটিতে ক্লিক করার জন্য একটি একক সতর্কতা পাবেন। এবং এখন নিম্নলিখিত কোড দেখুন,
<style>
body * {
margin: 10px;
border: 1px solid blue;
}
</style>
<script>
function fun(event){
alert(event.target+" "+event.currentTarget);
}
</script>
<form>FORM
<div onclick="fun(event)">DIV
<p>P</p>
</div>
</form>
আমরা স্রেফ পি ও ফর্ম ট্যাগ থেকে অন্লিক সরিয়েছি এবং এখন যখন আমরা পি ট্যাগটিতে ক্লিক করি তখন আমরা কেবল একটি সতর্কতা পাই:
[অবজেক্ট এইচটিএমএল অনুচ্ছেদসমূহ]
এখানে ইভেন্ট.টারাগেটটি হ'ল [অবজেক্ট এইচটিএমএলপ্যাগ্রাফিক্যালমেন্ট], এবং ইভেন্ট কুরেন্টটাইজ হ'ল [অবজেক্ট এইচটিএমএল ডিভেলমেন্ট]: সুতরাং
ইভেন্ট.আরগারেট হ'ল নোড যা থেকে ঘটনার সূত্রপাত হয়েছিল এবং বিপরীতে ইভেন্টকন্টেনটরেট নোডকে বোঝায় যেখানে বর্তমান-ইভেন্ট শ্রোতার সংযুক্ত ছিল more আরও জানার জন্য বুদবুদ দেখুন
এখানে আমরা পি ট্যাগটিতে ক্লিক করেছি তবে পি তে আমাদের শ্রোতা নেই তবে এর মূল উপাদান ডিভের উপর রয়েছে।