js tutorial - EVENT [011]

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

Tags: Javascript Front-end H5

Posted on Tue, 23 Nov 2021 08:25:50 -0500 by phencesgirl

Hot Tags

©2021 Programmer Help