<HTML>
<head>
<meta charset="utf-8">
</head>
<style>
form{
background-color: green;
position: relative;
width:150px;
height: 150px;
text-align: center;
cursor:pointer;
}
div {
background-color: blue;
position: absolute;
top: 25px;
left: 25px;
width: 100px;
height: 100px;
}
p{
background-color: red;
position: absolute;
top: 25px;
left: 25px;
width: 50px;
height: 50px;
line-height: 50px;
margin: 0;
}
body {
line-height: 25px;
font-size: 16px;
}
</style>
<body>
A click shows both <code>event.target</code> and <code>this</code> to compare
<form id="form">FORM
<div>DIV
<p>P</p>
</div>
</form>
</body>
<script>
form.onclick = function(event) {
event.target.style.backgroudColor = 'yellow';
setTimeout(()=>{
alert("target = " + event.target.tagName + ", this=" + this.tagName);
event.target.style.backgroundColor = '';
}, 0);
};
</script>
</HTML>
<head>
<meta charset="utf-8">
</head>
<style>
form{
background-color: green;
position: relative;
width:150px;
height: 150px;
text-align: center;
cursor:pointer;
}
div {
background-color: blue;
position: absolute;
top: 25px;
left: 25px;
width: 100px;
height: 100px;
}
p{
background-color: red;
position: absolute;
top: 25px;
left: 25px;
width: 50px;
height: 50px;
line-height: 50px;
margin: 0;
}
body {
line-height: 25px;
font-size: 16px;
}
</style>
<body>
A click shows both <code>event.target</code> and <code>this</code> to compare
<form id="form">FORM
<div>DIV
<p>P</p>
</div>
</form>
</body>
<script>
form.onclick = function(event) {
event.target.style.backgroudColor = 'yellow';
setTimeout(()=>{
alert("target = " + event.target.tagName + ", this=" + this.tagName);
event.target.style.backgroundColor = '';
}, 0);
};
</script>
</HTML>
/*copied the example in one file. thought it was cool*/
댓글
댓글 쓰기