0
Q1）私はonClickイベントを入れ、addEventListenerの最後のパラメータに以下のjavascriptコードを書いています。キャプチャのために 'true'を入れますが、コンソールではバブルが真実であることがわかりますonClickのターゲットはtrue、falseの両方のパラメータie（img object）で同じになります。この混乱の中であなた自身のPCで親切にチェックできます。私の他のコードでJavascriptイベントOnclick
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）は、私は1つの要素（DIV）でのonclickイベントを入れたときに、それはすべての要素（DIV）なぜ、どのように動作しますか？
<!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>
？ – GibboK
最初の質問で、最後のパラメータをtrueまたはfalseの両方の状況に置くと、ターゲットはimgオブジェクトと同じになります。なぜですか？ 2番目の質問には多くのdiv要素がありますが、1つのdivにonclickイベントを入れていますが、すべてのdivでクリックするとすべてのdivで動作し、結果が警告になります –