, JavaScript.

. , JS , , : open ( ), select ( ) . .

, , , click, mousedown . .

, DOM. Event.

Event :

let event = new Event(type[, options]);

:

• type , , - "click" , , "my-event".

• options :

  • bubbles: true/false true, .
  • cancelable: true/false true, . , .

  : {bubbles: false, cancelable: false}.

dispatchEvent

elem.dispatchEvent(event).

, . bubbles, .

click JavaScript. , :

<button id="elem" onclick="alert('!');"></button>

<script>
  let event = new Event("click");
  elem.dispatchEvent(event);
</script>

"hello" document.

, , bubbles true:

<h1 id="elem">  !</h1>

<script>
  //   document...
  document.addEventListener("hello", function(event) { // (1)
    alert("  " + event.target.tagName); //   H1
  });

  // ...   !
  let event = new Event("hello", {bubbles: true}); // (2)
  elem.dispatchEvent(event);

  //      .

</script>

:

1. addEventListener , on<event> , document.onhello .
2. bubbles:true, .

(click) (hello) . .

MouseEvent, KeyboardEvent

UI Event specification:

• UIEvent
• FocusEvent
• MouseEvent
• WheelEvent
• KeyboardEvent

new Event, . , new MouseEvent("click")

.

clientX/clientY :

let event = new MouseEvent("click", {
  bubbles: true,
  cancelable: true,
  clientX: 100,
  clientY: 100
});

alert(event.clientX); // 100

: Event.

:

let event = new Event("click", {
  bubbles: true, //   bubbles  cancelable
  cancelable: true, //   Event 
  clientX: 100,
  clientY: 100
});

alert(event.clientX); // undefined,   !

, , event.clientX=100 . . , , .

, , MouseEvent.

, , "hello", new CustomEvent. CustomEvent , Event, .

() detail - , .

:

<h1 id="elem">  !</h1>

<script>
  //        
  elem.addEventListener("hello", function(event) {
    alert(event.detail.name);
  });

  elem.dispatchEvent(new CustomEvent("hello", {
    detail: { name: "" }
  }));
</script>

detail - . , - new Event . CustomEvent detail, .

, , , CustomEvent, .

event.preventDefault()

, , - , .

, , , , , , .

event.preventDefault(), , .

elem.dispatchEvent(event) false. , , , .

, ( , , ).

#rabbit hide(), "hide", , .

- rabbit.addEventListener('hide',...) , , event.preventDefault(). :

<pre id="rabbit">
  |\   /|
   \|_|/
   /. .\
  =\_Y_/=
   {>o<}
</pre>
<button onclick="hide()">Hide()</button>

<script>
  function hide() {
    let event = new CustomEvent("hide", {
      cancelable: true //    preventDefault  
    });
    if (!rabbit.dispatchEvent(event)) {
      alert('  ');
    } else {
      rabbit.hidden = true;
    }
  }

  rabbit.addEventListener('hide', function(event) {
    if (confirm(" preventDefault?")) {
      event.preventDefault();
    }
  });
</script>

: cancelable: true, event.preventDefault() .

, . : onclick , . , , mousemove onclick.

, , . dispatchEvent. : , .

, menu-open onclick.

, onclick:

<button id="menu"> ( )</button>

<script>
  menu.onclick = function() {
    alert(1);

    menu.dispatchEvent(new CustomEvent("menu-open", {
      bubbles: true
    }));

    alert(2);
  };

  //   1  2
  document.addEventListener('menu-open', () => alert(' '));
</script>

: 1 2.

, menu-open document. , (onclick).

dispatchEvent, . , , , .

, . onclick, menu-open - .

dispatchEvent ( , ) onclick, , , , setTimeout :

<button id="menu"> ( )</button>

<script>
  menu.onclick = function() {
    alert(1);

    setTimeout(() => menu.dispatchEvent(new CustomEvent("menu-open", {
      bubbles: true
    })));

    alert(2);
  };

  document.addEventListener('menu-open', () => alert(' '));
</script>

dispatchEvent , menu.onclick, .

: 1 2 .

, .

Event(name, options) :

• bubbles: true .
• cancelable: true event.preventDefault() .

, - MouseEvent, KeyboardEvent , , . , clientX .

CustomEvent. detail, , . event.detail.

, click keydown, .

, . .

:

• , , .
• , , .

, , , , .