# draw dots

[browser](../../../..) ⟩ [event](../../..) ⟩ [type](../..) ⟩ [mouse](..) ⟩ [click]() ⟩ example ⟩ draw dots

{% hint style="success" %}
Every time the document is [**clicked**](), it adds a dot.
{% endhint %}

{% tabs %}
{% tab title="💈範例" %}
* replit ⟩ [draw dots](https://replit.com/@pegasusroe/draw-dots#index.js) ,  require ⟩ [Node extension](../../../../dom/type/node/+ext)

```javascript
const { log } = console

// ⭐️ import
import { $, $all, elem } from './js/ext/Node_ext.js'; // Node extension
// --------------------------------------------------------------------

const DOT_SIZE = 16;    // in px

// ⭐️ window.onclick -> draw dot
window.onclick = (event) => {
    document.body.appendChild(elem('div', div => {
        // (pageX, pageY): relative to document (top-left corner)
        const {pageX: x,pageY: y} = event;
        div.className = 'dot';
        div.style.left = (x - DOT_SIZE/2) + "px";
        div.style.top = (y - DOT_SIZE/2) + "px";
        log(`(pageX, pageY) = (${x}, ${y})`);
    }));
};

// ⭐️ button.onclock -> clear all dots
$('button').onclick = (e) => {
    $all('.dot').forEach(node => node.remove());
    e.stopPropagation();    // prevent from drawing new dot.
    log(`dots all cleared ...`);
};
```
{% endtab %}

{% tab title="🗺️ 圖表" %}
{% embed url="https://replit.com/@pegasusroe/draw-dots#index.js" %}
{% endtab %}

{% tab title="👥 相關" %}
* [stop](../../../propagation/stop "mention")
{% endtab %}

{% tab title="📗 參考" %}
* [ ] Eloquent JS ⟩ [Ch. 15: Event Handling](https://eloquentjavascript.net/15_event.html) ⟩ [Mouse Clicks](https://eloquentjavascript.net/15_event.html#i_D5iwImkmyt)
{% endtab %}

{% tab title="📘 手冊" %}
* [Event](https://developer.mozilla.org/en-US/docs/Web/API/Event) ⟩ [UIEvent](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) ⟩ [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) ⟩&#x20;
  * [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event)
{% endtab %}
{% endtabs %}
