What is an event

Every element in a web page can generate js events. For example, we can generate an event when a user clicks a button, and then execute it

There are three elements to an event:

  1. Event source: Which label to operate on, button, output box, or text
  2. Event type: Click, double click, or press space
  3. Event handlers: What action to perform or output

According to the three elements of the event, there are three steps to execute the event:

  1. Access to events
  2. Register events (bind events)
  3. Add event handlers

1. Mouse events

The serial number Mouse events The trigger condition
1 onclick Click the left mouse button trigger
2 onmouseover Mouse over trigger
3 onmouseout Mouse away trigger
4 onfocus Get the mouseThe focus ofTriggered when
5 onblur Lose the mouseThe focus ofTriggered when
6 onmousemove Triggered when the mouse moves
7 onmouseup Triggered when the mouse leaves
8 onmousedown Triggered when the mouse is pressed down

Note the difference between onclick and onfocus

  • onclick: Event handlers are triggered only when the mouse is clicked
  • onfocus: As long as the focus, we can click the mouse to get the focus, can also be usedtabButton to get focus

Grammar:

<button>The courage to</button>
Copy the code
let btn = document.querySelector('button')
btn.onfocus = function() {
    alert('I can feel you in my hand in the crowd')}Copy the code

2. Keyboard events

Events can be triggered using a keyboard as well as a mouse

The serial number Keyboard events The trigger condition
1 onkeyup Triggered when a keyboard key is released
2 onkeydown Triggered when a keyboard key is pressed
3 onkeypress Triggered when a keyboard key is pressed, but it does not recognize function keys, such asctrl,shiftArrow etc.

Chestnut:

// Trigger when the button is released
document.onkeyup = function() {
    alert('I can feel you in my hand in the crowd')}// Trigger when the button is pressed
document.onkeydown = function() {
    alert('Love really takes courage')}// Function keys are excluded
document.onkeypress = function() {
    alert('To believe in being together')}Copy the code

Recognition sequence of three events:keydown= >keypress= >keyup

3. Registration events

Adding events to an element is called a registration event or a binding event

There are two ways to register events:

  1. The traditional way
  2. Method listening mode

3.1 Traditional Methods

Bind events directly to elements

  • <button onclick='alert("hi~")'><button>
  • btn.onclick = function() { alert("hi~") }

Features: Uniqueness of registered events

Only one handler can be set for an element and an event. The last handler registered overrides the previous handler

let btn = document.querySelector('button')
btn.onclick = function() {
    alert('I can feel you in my hand in the crowd')}// Click execute
btn.onclick = function() {
    alert('Love really takes courage')}Copy the code

3.2 Method Listening mode

  • addEventListener(): is a method (not supported before IE9)
  • attachEvent(): Can be used for replacementaddEventListener()(less)

Features: Multiple listeners can be added to the same element and event

Follow the order of registration

1.addEventListener()Listening to the way

eventTarget.addEventListener(type, listener[, useCapture])
Copy the code

The addEventListener() method registers the specified listener with the eventTarget, which executes the event handler when it fires the specified event

  • type: Event type, such as:click,mouseover ，Note: No need to bringon
  • Listener: an event handler that will be called when an event is played
  • useCapture: Is an optional Boolean value. The default value isfalse

UseCapture is false: this listener is called during the capture phase

UseCapture is true: this listener is called during the bubble phase

// Click the button to execute two statements
btn.addEventListener('click'.function() {
    alert('Love really takes courage')
})

btn.addEventListener('click'.function() {
    alert('I can feel you in my hand in the crowd')})Copy the code

2,attachEventEvent listening mode

eventTarget.attachEvent(eventNameWithon, callback);
Copy the code

The attachEvent() method registers the specified listener with the eventTarget, and when that object fires the specified event, the specified callback function is executed

  • eventNameWithon: Event type, such asonclick 、onmouseover.Note: use “on” here
  • callback: event handler
btn.attachEvent('onclick'.function() {
    alert('I can feel you in my hand in the crowd')})Copy the code
  • Internet Explorer 11 does not support this method

4. Delete events

1. Traditional deletion mode

eventTarget.onclick = null;
Copy the code

Chestnut:

btn.onclick = function() {
    alert('Love really takes courage')
    // Delete events. Click only once
    btn.onclick = null
}
Copy the code

2. Method listening deletion mode

eventTarget.removeEventListener(type, listener[, useCapture]);
Copy the code

Chestnut:

btn.addEventListener('click', foo)

function foo() {
    alert('Love really takes courage')
    btn.removeEventListener('click', foo)
}
Copy the code

AttachEvent Mode for listening to events

eventTarget.detachEvent();
Copy the code

5. Event objectse

The event object represents the state of the event, such as the state of the keyboard key, the position of the mouse, and the state of the mouse button

After an event occurs, a collection of information related to the event is placed into an object. This object is the event object

It has many properties and methods, such as:

  • Who binds this event
  • Mouse binding events give you mouse-related information, such as mouse position
  • Keyboard binding events get information about the keyboard, such as which key was pressed

5.1 Usage of event Objects

// Event is an event object
btn.onclick = function(event) {
    console.log(event);
}

btn.addEventListener('click'.function(event) {
    console.log(event);
})
Copy the code
  • eventIs a parameter. Js has already set it as an event object for us. No argument is required
  • eventThe event object can be written ase(recommended)

5.2 Common Properties and methods of event Objects

Event object property method describe instructions
e.target returnThe triggerObject of the event standard
e.srcElement returnThe triggerObject of the event Non-standard IE6 to 8
e.type Returns the type of the event Such asclick mouseoverDon’t takeon
e.cancelBubble This property prevents bubbling Non-standard IE6 to 8
e.returnValue This property blocks default events (default behavior) Non-standard IE6 ~8 uses such as not letting links jump
e.preventDefault() This method blocks the default event (default behavior) Standards like don’t let links jump
e.stopPropagation() To prevent a bubble standard

This and e.target both refer to bound event objects, so what’s the difference?

  • e.target: getThe object that triggers the event(element)
  • this:thisReturns theObject to which events are bound(element)
<button>The courage to</button>
<ul>
    <li>The best of us</li>
</ul>
Copy the code
var btn = document.querySelector('button')
var ul = document.querySelector('ul')
// Both return the same event object
btn.addEventListener('click'.function(e) {
    console.log(e.target);   
    
    console.log(this);   
})

// Click Li,
ul.addEventListener('click'.function(e) {
    console.log(e.target);   
    
    console.log(this);  // 
      
    
       ... 
      

})
Copy the code

5.3 Other Mouse Events

1. Forbid the right mouse button menu

The contextmenu controls when the contextmenu should be displayed and is used to disable the default contextmenu

document.addEventListener('contextmenu'.function(e) {
	e.preventDefault();
})
Copy the code
  • When we right-click on a page, there is no menu for us to choose from

2. Disable mouse selection

Selectstart Start Select

<body>
    <div>I'm going to copy this text</div>
    <script>
        // selectstart disallows text selection
        document.addEventListener('selectstart'.function(e) {
            e.preventDefault();
        })
    </script>
</body>
Copy the code
  • Unable to copy text

3. Mouse event object

The serial number Mouse event object instructions
1 e.clientX Returns the x-coordinate of the mouse visualized relative to the browser window
2 e.clientY Returns the Y coordinate of the mouse visualization relative to the browser window
3 e.pageX Returns the x-coordinate of the mouse relative to the document page IE9+ support
4 e.pageY Returns the y-coordinate of the mouse relative to the document page IE9+ support
5 e.screenX Returns the x-coordinate of the mouse relative to the computer screen
6 e.screenY Returns the Y coordinate of the mouse relative to the computer screen

Chestnut:

document.addEventListener('click'.function(e) {
    console.log(e.clientX);
    console.log(e.clientY);

    console.log(e.pageX);
    console.log(e.pageY);
})
Copy the code
  • e.clientX: visual area, independent of page scrolling
  • e.pageX: Relative to the top and left coordinates of the document