JavaScript - Browser - Handling Events(Mouse Trail, mousemove)

Eloquent JavaScript

開発環境

• macOS Sierra - Apple (OS)
• Emacs (Text Editor)
• JavaScript (プログラミング言語)
• Safari、Firefox(Web browser)

Eloquent JavaScript(Marijn Haverbeke 著、No Starch Press)のPart 2(Browser)、Chapter 14(Handling Events)、Exercises(Mouse Trail)を取り組んでみる。

Exercises(Mouse Trail)

コード(Emacs)

HTML5

<link rel="stylesheet" href="sample2.css">
<div id="div0"></div>
<script src="sample2.js"></script>

CSS

#div0{
    width: 600px;
    height: 600px;
    background: beige;
}
.point {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: blue;
    position: absolute;
}

JavaScript

'use strict';

let div = document.querySelector('#div0');

div.addEventListener('mousemove', (event) => {
    let point = document.createElement('div');
    point.className = 'point';
    point.style.left = `${event.pageX - 4}px`;
    point.style.top = `${event.pageY - 4}px`;
    div.appendChild(point);
});