1. Event monitoring
Syntax:
<1> Element object.addEventListener('event type', function to be executed)
three elements: (1), event source (2) event type (3) function to be executed
<2>element object.on event type= function(){myScript};
Such as "element object.onkeydown = function(){myScript};", "element object.onclick = function(){myScript};"
difference: the on event method is the earliest event listening method, there is Some issues, deprecated; Internet Explorer 8 or earlier does not support the addEventListener() method.
2. Event type
mouse events:
- click mouse click
- mouseenter mouse over
- mouseleave mouse left
Focus cursor event:
- focus get the focus
- blus lost focus
Keyboard events:
- keydown keyboard press trigger
- keyup Trigger when the keyboard is raised (it is best to use this, and the content will be sent after letting go)
Text event:
- input user input event
3. The difference between let and var
var was used in the old version, and some unreasonable places are not used much now.
let has improved the place where var is unreasonable.
4. Event object - event, ev, e
- The first parameter in the function. function(event) {}
- The event object records the position of the mouse, or information about which keyboard key was pressed.
- An event object is also an object, so it also has properties and methods.
Properties of the event object:
- type Get the current event type
- clientX/clientY Get the position of the cursor relative to the upper left corner of the visible window of the browser
- offsetX/offsetY Get the position of the cursor relative to the upper left corner of the current DOM element
- key The value of the keyboard key pressed by the user, the use of keycode is now deprecated