“This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!”

The DOM event classes

1: Basic concept: DOM event level

2: DOM event model

3: DOM event flow

4: Describes the specific process of DOM event capture

The process here

code

<style> * { margin: 0; padding: 0; } #margin { width: 300px; height: 300px; background-color: red; color: black; text-align: center; line-height: 100px; < span style =" box-sizing: border-box! Important; word-wrap: break-word! Important; word-wrap: break-word! Important;" window.addEventListener('click', function () { console.log('window captrue'); }, true); / / true capture trigger, false bubbling trigger document. AddEventListener (' click ', function () {the console. The log (' document captrue '); }, true); document.documentElement.addEventListener('click', function () { console.log('html captrue'); }, true); document.body.addEventListener('click', function () { console.log('body captrue'); }, true); margin.addEventListener('click', function () { console.log('margin captrue'); }, true); </script>Copy the code

The illustration

5: Common applications of Event objects

1: Organizes default events, such as preventing label A from jumping

2: Prevents bubbling

3: Two events. Adding this sentence to event A will prevent event B from responding. Similar to giving A higher priority than B

4: indicates the currently bound event

5: The currently clicked element

6: User-defined events

1: new Event(‘ Event name ‘) Custom Event

If you want to pass a parameter, you can use CustomEvent. Followed by objeck specified parameterscase

<style> <style> * { margin: 0; padding: 0; } #margin { width: 300px; height: 300px; background-color: red; color: black; text-align: center; line-height: 100px; < span style =" box-sizing: border-box! Important; word-wrap: break-word! Important; word-wrap: break-word! Important;" var sb = new Event('test'); margin.addEventListener('test', function () { console.log('test dispatch'); }) setTimeout(function () {margin-.dispatchEvent (sb)}, 2000) </script>Copy the code

This article summarizes a few things about dom, but it’s not that detailed. But it’ll help you connect the dots.