Shulou(Shulou.com)06/01 Report--

This article mainly introduces the example analysis of DOM events in JavaScript, which has a certain reference value, and interested friends can refer to it. I hope you will gain a lot after reading this article.

1. Event object

[get event object]

What is an event object: an object that contains information about when the event is triggered.

Syntax of the event object

Element .addEventListener ('click',function (e) {})

[common properties of event objects]

Type: gets the current event type

ClientX/clientY: gets the position of the cursor relative to the upper left corner of the browser visible window

OffsetX/offsetY: gets the position of the cursor relative to the upper-left corner of the current DOM element

Key: the value of the keyboard pressed by the user

[case]:

Document img {position: absolute; top: 0; left: 0;}

Let img = document.querySelector ('img') document.addEventListener (' mousemove', function (e) {img.style.top = e.pageY-40 + 'px' img.style.left = e.pageX-50 +' px'}) 2, event flow

[explanation]: the event flow refers to the flow path during the complete execution of the event

[illustration]:

[description]:

The capture phase is from parent to son.

The bubbling stage is from son to father.

[what is event bubbling]: when an element's event is triggered, the same event will be triggered in turn in all ancestor elements of that element.

Event bubbling exists by default.

[case explanation]

Document. Margin: 100px auto; width: 500px; height: 500px; background-color: pink;} .son {width: 200px; height: 200px; background-color: purple } let fa = document.querySelector ('.father') let son = document.querySelector ('.son') fa.addEventListener ('click', function () {alert (' I'm a father')}, true) son.addEventListener ('click', function () {alert (' I'm a son')} True) document.addEventListener ('click', function () {alert (' I'm Grandpa')}, true) / / btn.onclick = function () {}

[event capture concept]: start with the root element of DOM to execute the corresponding event.

[grammar]

DOM.addEventListener (event type, event handler, whether to use capture mechanism)

[description]

The third parameter of addEventListener, which is passed in true, indicates that the capture phase is triggered.

If false is passed to trigger the bubbling phase, the default is false.

The original writing method did not capture only the bubbling stage.

[stop the flow of events]

Syntax:

Event object .stopProPagation ()

Description:

Stopping the flow of events is effective in both the capture and bubbling phases.

Mouseover and mouseout will have a bubbling effect.

Mouseenter and mouseleave have no bubbling effect (recommended)

[default behavior of blocking events]

Syntax:

E.preventDefault () 3. Event delegation

[explanation]: delegate the event to other elements for processing.

[advantages]: adding events to parent elements can greatly optimize performance

[principle]: make use of the characteristics of event bubbling, add events to parent elements, and child elements can trigger

[syntax]: event object .target can get the element that actually triggers the event

4. Comprehensive case

* * [demand]: * * Click the input button to add student information

Name of new Document student: age: gender: male and female salary: employment city: Beijing, Shanghai, Guangzhou, Shenzhen, Cao County, entry into the employment list, name, age, gender, salary. Employment City Operation / / prepare the data at the back end of the data let arr = [{stuId: 1001 Uname: 'Ouyang Batian', age: 19, gender: 'male', salary: '200000 Batian, city:' Shanghai'}, {stuId: 1002, uname: 'Linghu Batian', age: 29, gender: 'male', salary: '30000 Batian, city:' Beijing'}, {stuId: 1003, uname: 'Zhuge Batian', age: 39, gender: 'male', salary: '2000000', city: 'Beijing'} ] / / get the element let tbody = document.querySelector ('tbody') / / get the input button let add = document.querySelector ('.add') / / get form element let uname = document.querySelector ('.uname') let age = document.querySelector ('.age') let gender = document.querySelector ('.gender') let salary = document.querySelector ('.salary') let city = document.querySelector (' .city') / / function function render () {/ / clear the original data tbody that encapsulates the rendered data [xss_clean] =''for (let I = 0 I < arr.length; iTunes +) {/ / create tr let tr = document.createElement ('tr') / / add data t [XSS _ clean] = `${arr [I] .stuId} ${arr [I] .uname} ${arr [I] .age} ${arr [I] .gender} ${arr [I] .delete} ${arr [I] .city} Delete` Tbody.appendChild (tr) / / restore form data uname.value = age.value = salary.value =''}} / / call the page load function render () / / add data operation add.addEventListener ('click', function () {/ / add data from the form to the array arr.push ({stuId: arr [arr.length-1] .stuId + 1, uname: uname.value, age: age.value, gender: gender.value, salary: salary.value City: city.value}) render () }) / / delete operation tbody.addEventListener ('click', function (e) {if (e.target.tagName =' A') {arr.splice (e.target.id, 1) render ()}) Thank you for reading this article carefully. I hope the article "sample Analysis of DOM events in JavaScript" shared by the editor will be helpful to you. At the same time, I also hope that you will support and pay attention to the industry information channel, and more related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.