Javascript Event Onclick
Question
Q1) i have written the javascript code below in which i put the onClick event and in the last parameter of the addEventListener i put the 'true' for capturing but still in console you can see bubbling is true, secondly the target at onClick remains same on both true, false parameter ie (img object), you can check at your own pc kindly help me out of this confusion.
document.querySelector('.grid').addEventListener('click', function (e) { console.log(e); console.log(e.target.id + " " + this.className); },true)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript Events</title> <link href='http://fonts.googleapis.com/css?family=Bree+Serif|Merriweather' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="style.css"> </head> <body> <div id="art"> <h2>Art Eliminator</h2> <p>Pick your favorite piece of art through the process of elimination. Click on the pieces you like the least until you are left with a single one. Click on the last image to get some info</p> <ul class="grid"> <li id="li-1"><img src="images/Hassum_Harrod_03_tn.jpg" id="img1" alt="Hassum Harod's Summer Trees"></li> <li id="li-2"><img src="images/LaVonne_LaRue_02_tn.jpg" id="img2" alt="LaVonne LaRue's Mighty Duck"></li> <li id="li-3"><img src="images/Lorenzo_Garcia_01_tn.jpg" id="img3" alt="Lorenzo Garcia's The Dancer"></li> <li id="li-4"><img src="images/Jennifer_Jerome_01_tn.jpg" id="img4" alt="Jennifer Jerome's A day of Rest'"></li> <li id="li-5"><img src="images/Constance_Smith_03_tn.jpg" id="img5" alt="Constance Smith's Letterforms"></li> <li id="li-6"><img src="images/LaVonne_LaRue_04_tn.jpg" id="img6" alt="LaVonne LaRue's Flow"></li> <li id="li-7"><img src="images/Lorenzo_Garcia_03_tn.jpg" id="img7" alt="Lorenzo Garcia's Mother"></li> <li id="li-8"><img src="images/Jennifer_Jerome_02_tn.jpg" id="img8" alt="Jennifer Jerome's Farm Life"></li> <li id="li-9"><img src="images/Hillary_Goldwynn_03_tn.jpg" id="img9" alt="Hillary Goldwynn's Blue Sky"></li> </ul> </div> <script src="script.js"></script> </body> </html>
Q2) In my other code when i put onclick event at one element (div) but it works on all element (div) why and how ?
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript Events</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul id="grid"> <li><img src="images/ylw.gif" alt="yellow"></li> <li><img src="images/org.gif" alt="orange"></li> <li><img src="images/ppl.gif" alt="purple"></li> <li><img src="images/blu.gif" alt="blue"></li> <li><img src="images/pnk.gif" alt="pink" id="pink"></li> <li><img src="images/grn.gif" alt="green"></li> <li><img src="images/ygr.gif" alt="ygreen"></li> <li><img src="images/gry.gif" alt="gray"></li> <li><img src="images/red.gif" alt="red"></li> </ul> <div class="d1">1 <!-- the topmost --> <div class="d2">2 <div class="d3">3 <!-- the innermost --> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> var divs = document.getElementsByTagName('div'); for(var i =0; i<divs.length; i++){ divs[0].onclick = function(event){ event = event || window.event; var target = event.target || event.srcElement; this.style.backgroundColor='yellow' // e.stopPropagation(); // if(event.stopPropagation){ // event.stopPropagation(); // } // else if(event.cancelBubble()){ // event.cancelBubble; // } alert("Target " + target.className + ",this " + this.className); } } </script> </body> </html>
1 answers
solution1
0 2017-01-24 07:41:59
I think u did a small mistake here.. use "event.stopPropagation();" instead of "e.stopPropagation();"
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript Events</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul id="grid"> <li><img src="images/ylw.gif" alt="yellow"></li> <li><img src="images/org.gif" alt="orange"></li> <li><img src="images/ppl.gif" alt="purple"></li> <li><img src="images/blu.gif" alt="blue"></li> <li><img src="images/pnk.gif" alt="pink" id="pink"></li> <li><img src="images/grn.gif" alt="green"></li> <li><img src="images/ygr.gif" alt="ygreen"></li> <li><img src="images/gry.gif" alt="gray"></li> <li><img src="images/red.gif" alt="red"></li> </ul> <div class="d1">1 <!-- the topmost --> <div class="d2">2 <div class="d3">3 <!-- the innermost --> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> var divs = document.getElementsByTagName('div'); for(var i =0; i<divs.length; i++){ divs[i].style.backgroundColor='white'; divs[i].onclick = function(event){ event = event || window.event; var target = event.target || event.srcElement; this.style.backgroundColor='yellow'; event.stopPropagation(); if(event.stopPropagation){ event.stopPropagation(); } else if(event.cancelBubble()){ event.cancelBubble; } alert("Target " + target.className + ",this " + this.className); } } </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
onclick event function in JavaScript
JavaScript onclick Event Problem
JavaScript onclick event is not working
Javascript append to onClick event
Javascript onclick event not attaching
Javascript link with onClick event
Enable onclick event with JavaScript
Javascript disabling .onClick event
Working with a JavaScript for a onclick event
JavaScript onclick event in a jsp
Related Tags