Module‌‌‌ ‌‌‌২৪ ‌‌‌এ‌‌‌ ‌‌‌আমরা‌‌‌ ‌‌‌যাকিছু‌‌‌ ‌‌‌শিখেছি‌‌‌

Module‌‌‌ ‌‌‌২৪ ‌‌‌এ‌‌‌ ‌‌‌আমরা‌‌‌ ‌‌‌যাকিছু‌‌‌ ‌‌‌শিখেছি‌‌‌

Event , addEventListener, event bubble

• Onclick এর কাজ দেখাও?

• Onclick এর মাধ্যমে style চেঞ্জ কর ।

• বাটন ক্লিক করার মাধ্যমে body এর ব্যাকগ্রাউন্ড চেঞ্জ কর

 

<button id="scale" onclick="make()">click me</button>       function make() {         let a = document.getElementById("scale");         document.body.style.backgroundColor = "tomato"; }

 

• addEventListener এর কাজ কি ?

 

document.addEventListener("",function(){})

 

• একটা ইনপুট নাও এবং তার  ভেতরে যা user লিখবে সেটা যেকোনো ট্যাগ এর মাধ্যমে ওয়েবসাইট এ দেখাও । হতে পারে h1 ট্যাগ

 

<h1 id="a">event niye clickbaji</h1>     <input type="text" name="" id="input" />     <button id="update">update</button>     <script>       document.getElementById("update").addEventListener("click", function () {         var name = document.getElementById("input");         document.getElementById("a").innerHTML = name.value;         name.value = "";       });     </script>

 

• Button ক্লিক এর মাধ্যমে ওয়েবসাইট এ কমেন্ট অ্যাড কর

 

<main>       <section>         <div id="comment-container">           <p id="comment"></p>         </div>         <textarea name="" id="new-comment" cols="80" rows="5"> </textarea>         <br />         <button id="post">post</button>       </section>     </main>     <script src="./index.js"></script>     <script>       //button       document.getElementById("post").addEventListener("click", function () {         //textarea         var commentBOx = document.getElementById("new-comment");         //create a new perapraph         const newComment = document.createElement("p");         newComment.innerText = commentBOx.value;         //add on main web page         const addComment = document.getElementById("comment-container");         addComment.appendChild(newComment);         commentBOx.value = "";       });     </script>

 

• 1(Keyup, keydown, keypress ) VS 2( change ) এখানে ১ এবং ২ কাজ এবং পারতক্ষ কি বের কর  ।

• Delete   ঠিক github এর মত   module no :  24-6

• Bubble কি?

 

ধর তোমার কাছে একটা section আছে section এর ভিতরে আবার h1,p ইত্যাদি element আছে । এবং section ও সকল element কেই একটা করে ক্লিক event সেট করা আছে । এখন তুমি যদি section কে ক্লিক কর তাইলে section এর ক্লিক ইভেন্ট শো করবে আবার যদি যেকোনো element কে ক্লিক কর তাহলে আবার section এর ক্লিক ইভেন্ট সহ element এর ক্লিক ইভেন্ট শো করবে । কিন্তু আমরা তো টা চাইন । আমরা চাচ্ছি জেটাতে ক্লিক করব ঠিক সেটার ক্লিক ইভেন্ট console এ শো করবে । তাহলে আমরা stopPropagation();ব্যাবহার করতে পারব ।      document.getElementById("", function (event) {       event.stopPropagation();       });      Bubble স্বাধারনত নিচে থেকে উপরের দিকে যায় । তাই আমাদের    event.stopPropagation(); ব্যাবহার  করার কারনে জাকে ক্লিক করব তার উপরের ক্লিক ইভেন্টগুলো আর দেখাবে না । আর যদি জাকে ক্লিক করব তার নিচে আরও ক্লিক ইভেন্ট কল করা থাকে তাহলে কিন্তু নিচের সব গুলো ক্লিক ইভেন্ট console এ শো করবে । এখন প্রশ্ন হলো এই সমস্যাটা সমাধান করব কিভাবে ? তার জন্য আমাদের stopImmediatePropagation(); এই মেথড টা ব্যাবহার করতে হবে । এটা ব্যাবহার করার মাধ্যমে আমারা জাকে ক্লিক করব সেটাই দেখাবে আর নিচের কোণ ক্লিক মেথড আর কল হবে না । তো আমরা বুঝতেই পারলাম          event.stopImmediatePropagation()  ও event.stopImmediatePropagation(); দুইটার মধ্যে পার্থক্য কোথায় ।             document.getElementById("", function (event) {;         event.stopImmediatePropagation();       });

 

• মুডিউল ২৪-৮  (Event delegate and benefit of Event bubble) কি কাজ করে ? গিটহাব লিঙ্ক

• Home work  ৩ টা বাটন নিবে

All module link

 

আর আমার github এ যাইতে চাইলে এই লিঙ্কে ক্লিক করুন

About

Md: Rashedul Islam Shihab Writer of this note Batch4 Social accounts