EVENT (upper)
- Before, we had a brief understanding of some events, such as onclick / onload / onscroll /
- Starting today, we will learn some events in detail
What is an event
-
What does an event consist of
- Whose event is triggered: event source
- What event is triggered: event type
- What to do after triggering: event handler
var oDiv = document.querySelector('div') oDiv.onclick = function () {} // Who will trigger the event = > oDiv = > the event source of this event is oDiv // What event is triggered = > onclick = > this event type is click // What to do after triggering = > function() {} = > handler of this event
- If we want to do anything after clicking div, we will write what we want to do in the event handler function
var oDiv = document.querySelector('div') oDiv.onclick = function () { console.log('You clicked div') }
- When we click div, the code inside the event handler will be executed
- The event handler is executed once for each click
Event object
-
What is an event object?
-
When you trigger an event, some description information of the event
-
For example:
- When you trigger a click event, where do you click and what are the coordinates
- When you trigger a keyboard event, which button do you press
- ...
-
Each event will have a corresponding object to describe this information. We call this object event object
-
The browser gives us a black box called window.event, which is all descriptions of event information
- For example, click events
- If you click on position 0 and 0, the event object you get will have the attribute of this point
- If you click on position 10, 10, the event object you get will have the attribute of this point
- ...
oDiv.onclick = function () { console.log(window.event.X Axis coordinate point information) console.log(window.event.Y Axis coordinate point information) }
-
This thing is very easy to use, but generally speaking, easy-to-use things will have compatibility problems
-
This is easy to use in the low version of IE, but it is not easy to use in the high version of IE and Chrome
-
We have to get the event object in another way
-
In the row parameter position of each event handler function, the default first is the event object
oDiv.onclick = function (e) { // e is the same thing as IE's window.event console.log(e.X Axis coordinate point information) console.log(e.Y Axis coordinate point information) }
-
To sum up, we will use compatible writing when we want to obtain event objects in each event in the future
oDiv.onclick = function (e) { e = e || window.event console.log(e.X Axis coordinate point information) console.log(e.Y Axis coordinate point information) }
Click the cursor coordinate point of the event to obtain
- As I said just now, you can obtain coordinate points. Next, let's learn how to obtain coordinate points
- The coordinate points of each click event are not a pair, because there should be a relative coordinate system
- For example:
- Relative event source (the element you clicked)
- Relative page
- Relative browser window
- ...
- Because they are different, the properties in the event object we get are also different
Relative to the element you click
-
offsetX and offsetY
-
Is calculated relative to the inside of the border of the element you click
<style> * { margin: 0; padding: 0; } div { width: 300px; height: 300px; padding: 20px; border: 10px solid #333; margin: 20px 0 0 30px; } </style> <body> <div></div> <script> var oDiv = document.querySelector('div') // Register click events oDiv.onclick = function (e) { // Event object compatible writing e = e || window.event console.log(e.offsetX) console.log(e.offsetY) } </script> </body>
The coordinate point you click relative to the browser window
-
clientX and clientY
-
It is calculated relative to the browser window. No matter what the page scrolls to, the coordinates are calculated according to the window
<style> * { margin: 0; padding: 0; } body { width: 2000px; height: 2000px; } div { width: 300px; height: 300px; padding: 20px; border: 10px solid #333; margin: 20px 0 0 30px; } </style> <body> <div></div> <script> var oDiv = document.querySelector('div') // Register click events oDiv.onclick = function (e) { // Event object compatible writing e = e || window.event console.log(e.clientX) console.log(e.clientY) } </script> </body>
The coordinate point you click relative to the page
-
pageX and pageY
-
It is the coordinate point relative to the whole page. Whether it is scrolled or not, it is the coordinate point relative to the page
<style> * { margin: 0; padding: 0; } body { width: 2000px; height: 2000px; } div { width: 300px; height: 300px; padding: 20px; border: 10px solid #333; margin: 20px 0 0 30px; } </style> <body> <div></div> <script> var oDiv = document.querySelector('div') // Register click events oDiv.onclick = function (e) { // Event object compatible writing e = e || window.event console.log(e.pageX) console.log(e.pageY) } </script> </body>
-
According to the upper left corner of the page
- Margin left is 30
- The left border is 10
- The left and right padding are 20 respectively
- The content area is 300
- pageX : 300 + 20 + 20 + 10 + 30 = 380
- Margin top is 20
- The top border is 10
- The upper and lower padding are 20 each
- The content area is 300
- pageY : 300 + 20 + 20 + 10 + 20 = 270
Click key information (understand)
- Our mouse usually has two buttons, a left button and a right button
- We also have this information in the event object. Make sure you click the left or right button
- We use the event object. button to get information
- 0 is the left mouse button and 2 is the right mouse button
Common events (understand)
- Some events we often use when writing pages
- It can be roughly divided into several categories: browser event / mouse event / keyboard event / form event / touch event
- You don't have to remember everything, but you probably need to know
Browser events
- load: all resources on the page are loaded
- scroll: triggered when the browser scrolls
- ...
Mouse event
- Click: click event
- dblclick: double click the event
- Context menu: right click the event
- mousedown: left mouse button press event
- mouseup: left mouse button lift event
- mousemove: mouse movement
- mouseover: mouse in event
- mouseout: mouse out event
- mouseenter: mouse in event
- mouseleave: mouse move out event
- ...
Keyboard events
- keyup: keyboard lift event
- keydown: keyboard press event
- keypress: keyboard press and lift event
- ...
Form Events
- Change: form content change event
- Input: form content input event
- submit: form submission event
- ...
Touch event
- touchstart: touch start event
- touchend: touch end event
- touchmove: touch move event
- ...
Keyboard events
-
I just learned about mouse events. Now let's talk about keyboard events
-
The most important thing we do in keyboard events is to do two things
- Determine which button is clicked
- Is there a combination of keys, shift + a / ctrl + b /
-
Let's first clarify the problem, that is, can all elements be bound to keyboard events
- We say that the key thing about the event is who triggered the event
- If a div element is on the page, how can I trigger a keyboard event on the div
- Therefore, we usually only bind keyboard events to the elements (form elements) and document s that can be selected on the page
document.onkeyup = function () { // code.. } oInput.onkeyup = function () { // code.. }
OK key
-
Each key on our keyboard has its own independent code
-
We rely on this code to determine which button we press
-
We get it through the event object. keyCode or the event object. which
-
Why are there two? Because Firefox 2.0 does not support keycode, which should be used
document.keyup = function (e) { // Compatible writing of event objects e = e || window.event // Get the compatible writing method of keyboard code var keyCode = e.keyCode || e.which console.log(keyCode) }
Common keyboard codes (understand)
- 8: delete key
- 9: tab
- 13: Enter (ebter)
- 16: Up shift key
- 17: ctrl key
- 18: alt key
- 27: cancel key (esc)
- 32: space
- ...
Combination key
-
The most important combination of cases is the alt / shift / ctrl buttons
-
When I click a key, judge whether the three keys are pressed. If there is a combination, there is no combination
-
The event object also provides us with three properties
- altKey: press the alt key to get true, otherwise get false
- shiftKey: press the shift key to get true, otherwise get false
- ctrl key: press the ctrl key to get true, otherwise get false
-
We can use these three attributes to determine whether it is pressed
document.onkeyup = function (e) { e = e || window.event keyCode = e.keyCode || e.which if (e.altKey && keyCode === 65) { console.log('You pressed it at the same time alt and a') } }
Event binding method
-
We now use onxxx to register events
-
However, this method is not very good. Only one event can be registered for one element
-
Once the second event is written, the first is overwritten
oDiv.onclick = function () { console.log('I was the first event') } oDiv.onclick = function () { console.log('I am the second event') }
- When you click, only the second one will be executed, and the first one will be gone
-
We also have an event listening method to bind events to elements
-
Add using addEventListener
- This method is incompatible. attachEvent should be used in IE
event listeners
-
addEventListener: not used under IE 7 8
-
Syntax: element. addEventListener('event type ', event handler, bubble or capture)
oDiv.addEventListener('click', function () { console.log('I was the first event') }, false) oDiv.addEventListener('click', function () { console.log('I am the second event') }, false)
- When you click div, both functions will execute in the order you registered
- Print me as the first event and then print me as the second event
- Note: don't write on when you click an event type. Clicking an event is click, not onclick
-
attachEvent: used under IE 7 8
-
Syntax: element. attachEvent('event type ', event handler)
oDiv.attachEvent('onclick', function () { console.log('I was the first event') }) oDiv.attachEvent('onclick', function () { console.log('I am the second event') })
- When you click div, both functions will be executed and will be flashed in the order you registered
- Print me as the second event first, and then print me as the first event
- Note: when the event type is selected, write on, and click onclick
The difference between the two ways
- Writing of event type parameters when registering events
- addEventListener: do not write on
- attachEvent: to write on
- Number of parameters
- addEventListener: three common parameters
- attachEvent: two parameters
- Execution sequence
- addEventListener: register in sequence and execute in sequence
- attachEvent: sequential registration, flashback execution
- Applicable browser
- addEventListener: Browser other than IE 7 8
- attachEvent: IE 7 8 browser