This is the 13th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Today’s content is important!! Some operations in the application can be optimized — * * *

Can be used as a beginner’s learning route, can refer to, learning progress is not particularly catch up! Under continuous update

With their own understanding, simple and comprehensive summary of basic knowledge, most of the content is the vernacular content, the foundation of the foundation to deepen understanding!

Consolidate the basic knowledge of learning JavaScript, deepen the understanding of memory, to build a firm foundation! Come on

Let’s get started on our first meeting with the event object yesterday. Take it seriously!

5,keyCodeProperty — keyboard event object

KeyCode Gets the key value. Enter :13

Function key property: ctrlKey altKey shiftKey The return value is a Boolean value

Function keys are used separately and need to be triggered when the keyboard is pressed

5.1 onkeyup

When the keyboard OnKeyUp event is triggered, if the function key + Enter key is held down, the following conditions are met:

Press CTRL + Enter to send

document.onkeyup = function (e) {
  var e = e || event // Press Enter + CTRL to send
  if (e.keyCode == 13 && e.ctrlKey) {
    alert('send')}}Copy the code

5.2 onkeypress

If you hold down the function key + Enter key to trigger the onKeyPress event on the keyboard, the following conditions must be met:

document.onkeypress = function (e) {
  var e = e || event // Press Enter + CTRL to send
  if (e.keyCode == 10 && e.ctrlKey) {
    alert('send')}}Copy the code

6. Event flow

When an event is fired, the process by which the event is fired from the child element to the parent element or from the parent element to the child element is called event flow

There are two modes of event flow:

  1. Event bubble: Emitted from a child element to a parent element

  2. Event capture: fired from parent to child element

Event bubble:

When an event is fired, the same event is fired to the parent element, a process called event bubbling

Not all events will bubble: OnLoad, OnBlur, onFocus

Compatibility to prevent event bubbling

e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true)
Copy the code

8. Prevent default browser behavior compatibility

Default behavior: Hyperlink jump Submit button jump the selected image or text is displayed by default in the drag-and-drop right-click menu

e.preventDefault ? e.preventDefault() : (e.returnValue = false) orreturn false
Copy the code

9. Event listening

9.1 How do I Bind an Event to an Element?

<input onclick>
obj.onclick = function(){}Copy the code

9.2 Binding events to elements through event listening methods:

Event sources. addEventListener(event,function () {})
Copy the code

Note: The event is removed on. The third argument is a Boolean value true or false. False defaults to bubbling true for capture

9.3 Benefits of event Listening:

1. The same event handler can be fired multiple times for the same object binding

2. The programmer can implement capture or bubble behavior according to the listening method

Preview: Come on, dreamers

[Preview] : Continue to review the event object more knowledge points.. Can not eat a full fat acridine.. –

Learning is a continuous process, stick to it, there will be harvest!

Accumulate over a long period of time, consolidate the foundation, early into dafang!

It is not easy to insist, adhere to down is not easy, you really good!

Calm Down & Carry On!

Read more:

The previous article is updated and reviewed

【 Re-learn JS】 Study every day to consolidate the foundation:

[day1] js initial

[day2] Various operators,

[day3] Data type,

【day4】 Loop structure & Conditional Statement,

【day5】 Function (key),

[DAY6] Scope & Event,

【day7】 Object & Array method summary,

[day8] String methods & Partial sort,

【day9】Math object & Wrap function,

[DAY10] BOM- Browser Object Model,

【 DAY11 】DOM- Document Object Model,

【day12】 Event Object

More on the way… A long way to go ==-.. – = =