“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.