69 lines
2.1 KiB
Markdown
69 lines
2.1 KiB
Markdown
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<script>
|
|
function zmiana(d) {
|
|
d.innerText = "Szymek";
|
|
}
|
|
|
|
function init() {
|
|
const els = document.getElementsByTagName("button");
|
|
console.log(els);
|
|
for (let i = 0; i < els.length; i++) {
|
|
// els[i].onclick = function () {
|
|
// console.log("click", this);
|
|
// }
|
|
|
|
els[i].onclick = (e) => {
|
|
console.log("click", this, e, e.target);
|
|
e.target.style.backgroundColor = "pink"
|
|
}
|
|
|
|
//els[i].onclick = function () {
|
|
// console.log("test");
|
|
//}
|
|
// nadpisuje tego samego typu zdarzenie
|
|
}
|
|
|
|
// Listenery
|
|
const inner = document.getElementById("inner");
|
|
inner.addEventListener("click", function (e) {
|
|
console.log("INNER1", e)
|
|
e.stopPropagation();
|
|
}, false);
|
|
|
|
const outer = document.getElementById("outer");
|
|
outer.addEventListener("click", function () {
|
|
console.log("OUTER")
|
|
|
|
}, false); // true/false event capturing bubbling
|
|
|
|
// inner.addEventListener("click", function () {
|
|
// console.log("INNER2")
|
|
// }, false);
|
|
// zdarzenie sie "dopisuje"
|
|
// removeEventListener
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body onload="init();" oncontextmenu="console.log('menu');event.preventDefault();">
|
|
<!--
|
|
<button onclick="console.log('click',this);zmiana(this)" onmouseover="console.log('over')">A</button>
|
|
<button onclick="console.log('click',this);zmiana(this)">B</button>
|
|
<button onclick="console.log('click',this);zmiana(this)">C</button>
|
|
-->
|
|
<button>A</button>
|
|
<button>B</button>
|
|
<button>C</button>
|
|
|
|
<div id="outer">OUTER
|
|
<div id="inner">INNER</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |