Learning objectives
- Ability to register events for elements
- Be able to name three stages of event flow execution
- The event object can be obtained in the event handler function
- Ability to use event objects to cancel default behavior
- Ability to use event objects to prevent event bubbling
- Understanding mouse and keyboard events
1, Event basis
JavaScript Enables us to create dynamic pages, and events can be JavaScript Detected behavior.
1.1 three elements of event
| essential factor | content |
|---|---|
| Event source (who) | The element that triggers the event |
| Event type (what event) | For example, click event |
| Event handler (what to do) | Code to be executed after the event is triggered (function form), event handling function |
1.2 steps to execute the event
- Get event source
- Registration event (binding event)
- Add event handler (in the form of function assignment)
1.3 common mouse events
2, Event advanced
2.1 registration event (2 methods)
2.2 event monitoring
1.addEventListener() event listening (supported after IE9)
- The event type inside is a string. It must be quoted without on
- Multiple listeners (event handlers) can be added to the same element and the same event
2.attacheEvent() event listening (supported by IE678)
Code example:
<button>Traditional registration events</button>
<button>Method listens for registration events</button>
<button>ie9 attachEvent</button>
<script>
var btns = document.querySelectorAll('button');
// 1. Traditional registration events
btns[0].onclick = function() {
alert('hi');
}
btns[0].onclick = function() {
alert('hao a u');
}
// 2. Event listener registers the event addEventListener
btns[1].addEventListener('click', function() {
alert(22);
})
btns[1].addEventListener('click', function() {
alert(33);
})
// 3. attachEvent ie9 previous versions support
btns[2].attachEvent('onclick', function() {
alert(11);
})
</script>
2.3 delete event (unbind event)
2.4 DOM event flow
- Event flow: describes the order in which events are received from the page
- DOM events: when an event occurs, it will propagate in a specific order between element nodes. This propagation process is called DOM events.
- Event bubbling: IE first proposed that events are received by the most specific elements and then propagated up to the top node of DOM level by level.
- Event capture: the process of starting from the top node of DOM, and then propagating down to the most specific element level by level.
How to understand the above concepts:
For example, when I press the switch with my hand, the light comes on. In this case, the source of the event is: hands. The event is: press the switch. The event driver is: light on and off.
For another example, when an advertisement pops up on the web page, I click the X in the upper right corner, and the advertisement is closed. In this case, the event source is X. The event is: onclick. The event driver is: the advertisement is turned off.
So we can conclude that the event source is the one who triggered the follow-up event.
DOM event flow goes through three stages:
- Capture phase
- Current target stage
- bubbling phase
2.5 event object
After an event occurs, the collection of a series of information data related to the event is put into this object, which is the event object.
When an event trigger occurs, an event object will be generated, and the system will pass it to the event handler in the form of an argument.
Properties and methods of event objects
e. The difference between target and this
- this is the event binding element (the element that binds the event handler).
- e.target is the element triggered by the event.
Code example:
//e.target and this under event bubble
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
// If we bind an event to ul, this points to ul
console.log(this); // ul
// e. Target is the object that triggers the event. We click li e.target points to li
console.log(e.target); // li
});
</script>
2.6 block default behavior
- Normal browser e.preventDefault(); method
- Lower version browser ie678 returnValue (property, no compatibility)
2.7 prevent event bubbling
- e.stopPropagation(); standard notation
- window.event.cancelBubble = true; Nonstandard writing
2.8 event delegation
Register events for the parent element and use event bubbling. When the event of the child element is triggered, it will bubble to the parent element, and then control the corresponding child element.
We only operated the DOM once, which improved the performance of the program.
Dynamic newly created child elements also have events.
3, Common mouse events
Code example:
<script>
// Mouse event object MouseEvent
document.addEventListener('click', function(e) {
// 1. x and y coordinates of the client mouse in the visual area
console.log(e.clientX);
console.log(e.clientY);
console.log('---------------------');
// 2. The page mouse is on the x and y coordinates of the page document
console.log(e.pageX);
console.log(e.pageY);
console.log('---------------------');
// 3. screen the x and y coordinates of the mouse on the computer screen
console.log(e.screenX);
console.log(e.screenY);
})
</script>
4, Common keyboard events
Code example:
<script>
// Common keyboard events
//1. Triggered when the Keyup button pops up
document.addEventListener('keyup', function() {
console.log('I bounced up');
})
//3. When the keypress key is pressed, the unrecognized function key is triggered, such as the left and right arrows of ctrl shift
document.addEventListener('keypress', function() {
console.log('I pressed press');
})
//2. When the Keydown key is pressed, it triggers a function key that can be recognized, such as ctrl shift Left and right arrows
document.addEventListener('keydown', function() {
console.log('I pressed down');
})
// 4. Execution sequence of three events keydown -- keypress -- keyup
</script>
