# default action

[browser](..) ⟩ [event]() ⟩ default action

{% hint style="success" %}
Many <mark style="color:yellow;">**events**</mark> have a <mark style="color:purple;">**default action**</mark> associated with them.&#x20;

* [**event handlers**](handler) are usually <mark style="color:yellow;">**called**</mark>**&#x20;**<mark style="color:red;">**before**</mark> the <mark style="color:purple;">**default behavior**</mark> takes place.&#x20;
* call [event.preventDefault](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)() to <mark style="color:red;">**prevent**</mark> this normal behavior.

```javascript
// ⭐️ prevent touch screen default actions.
container.addEventListener("touchmove", event => {
        event.preventDefault();
}, {passive: false} );                 // ⭐️ important
```
{% endhint %}

{% tabs %}
{% tab title="🧨 雷區" %}
{% hint style="warning" %}
Depending on the browser, <mark style="color:yellow;">**some events**</mark>**&#x20;**<mark style="color:red;">**can’t**</mark>**&#x20;**<mark style="color:yellow;">**be intercepted at all**</mark>. for example：

* Chrome：<mark style="color:yellow;">`ctrl+W`</mark> or <mark style="color:yellow;">`cmd+W`</mark> (close current tab) cannot be handled by JavaScript.
{% endhint %}
{% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="success" %}
default actions for：

* "[click](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event)" on [\<a>](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement)：follow the link and load a new page.
* "[click](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event)" on [\<input type="submit">](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit) - submit the form.
* "<mark style="color:blue;">input</mark>" on \<input> - enter the input.
* "scroll" on document - the browser scrolls.
{% endhint %}

{% hint style="info" %}
* [event handlers](handler) can [<mark style="color:yellow;">**prevent this default action**</mark>](default-action/hide-or-not-to-hide) by invoking [event.preventDefault()](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault), this is sometimes called "[**canceling**](default-action/hide-or-not-to-hide)" the event.&#x20;
* <mark style="color:red;">**unless**</mark> the handler is registered with the [passive](handler/register) option, which makes [preventDefault()](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) <mark style="color:red;">**ineffective**</mark>.
{% endhint %}
{% endtab %}

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

{% tab title="📗 參考" %}
* [ ] Eloquent JS ⟩ [Ch. 15: Event Handling](https://eloquentjavascript.net/15_event.html) ⟩ [Default Actions](https://eloquentjavascript.net/15_event.html#h_GaHJsztrot)&#x20;
{% endtab %}

{% tab title="📘 手冊" %}
* [](<> "mention") ⟩ [.preventDefault()](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
* [element](../dom/type/element "mention") ⟩ ["click" event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event)
* [html](../../html "mention") ⟩&#x20;
  * [\<a>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)
  * [\<input type="submit">](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit) - submit button
{% endtab %}
{% endtabs %}
