Day33 JS note event (Part 2) September 28, 2021

The event type under the event object ：  e.type          - Back to the event such as :click contextmenu

Mouse information under the event object ：e.button    （- 0 The left mouse button   - 1 The wheel of the mouse    - 2 Right mouse button ）

The keyboard code under the event object ：e.keyCode     （ Enter key 13   - Space 32  - The up and down or so 37 38 39 40- Numbers and letters correspond ASCII）

  Get and set the position and size of the element ：

- offsetTop/offsetLeft The distance from the element to the top and left of the browser (margin And positioning effects )

- offsetWidth/offsetHeight Width and height of elements ( contain content+padding+border) margin It doesn't contain

- clientWidth/clientHeight Width and height of elements ( contain content+padding) It doesn't contain border and margin

Get the mouse coordinates ：

- offsetX/offsetY The position of the mouse inside the element box ( Not affected by any attribute )

- clientX/clientY The coordinate position of the mouse relative to the browser ( Pages with scrollbars are not affected , Visual area coordinates )

- pageX/pageY The coordinate position of the mouse relative to the browser ( The page is affected when there is a scroll bar , Add the space between the scrollbars )

  Restrict elements from dragging within a range ：

- Get the width and height of the current browser document.documentElement.clientHeight/clientWidth

Get the width and height of the element box

- clientHeight/clientWidth Without Borders

- offsetWidth/offsetHeight With borders

  Block default events ：

- Add... At the end of the event method function return false

- e.preventDefault() Method of event object

- Compatible writing : e.returnValue = false

  Event delegation ：e.target         （ Delegate your own affairs to the parent ）

  Mouse out move in event ：

- onmouseover/onmouseout Trigger bubbling

- onmouseenter/onmouseleave Does not trigger bubbling