jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

minor

Browse source
This commit is contained in:
Ilya Kantor 2019-10-18 19:39:47 +03:00
parent 33e4cc258b
commit 01352c1c38
3 changed files with 18 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

4
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/index.html
View file

@ -67,6 +67,10 @@
</table> </table>
<textarea id="text"></textarea>
<input type="button" onclick="text.value=''" value="Clear">
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>

9
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js
View file

@ -19,6 +19,10 @@ table.onmouseover = function(event) {
// hooray! we entered a new <td> // hooray! we entered a new <td>
currentElem = target; currentElem = target;
target.style.background = 'pink'; target.style.background = 'pink';
// show that in textarea
text.value += `OVER -> ${currentElem.tagName}.${currentElem.className}\n`;
text.scrollTop = 1e6;
}; };
@ -41,5 +45,10 @@ table.onmouseout = function(event) {
// we left the <td>. really. // we left the <td>. really.
currentElem.style.background = ''; currentElem.style.background = '';
// show that in textarea
text.value += `OUT <- ${currentElem.tagName}.${currentElem.className}\n`;
text.scrollTop = 1e6;
currentElem = null; currentElem = null;
}; };

8
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation.view/script.js
View file

@ -1,13 +1,15 @@
table.onmouseover = function(event) { table.onmouseover = function(event) {
let target = event.target; let target = event.target;
target.style.background = 'pink'; target.style.background = 'pink';
text.value += "mouseover " + target.tagName + "\n";
text.value += `OVER -> ${target.tagName}.${target.className}\n`;
text.scrollTop = text.scrollHeight; text.scrollTop = text.scrollHeight;
}; };
table.onmouseout = function(event) { table.onmouseout = function(event) {
let target = event.target; let target = event.target;
target.style.background = ''; target.style.background = '';
text.value += "mouseout " + target.tagName + "\n";
text.value += `OUT <- ${target.tagName}.${target.className}\n`;
text.scrollTop = text.scrollHeight; text.scrollTop = text.scrollHeight;
}; };