js05---node, element, event, event bubbling

 

Table of contents

1. The concept of nodes (all the content in the page)

 2. Creation of elements

3. Event binding

1. Create multiple click events for an element

 2. The difference between binding events

 4. Unbundling of events

 5. Event bubbling

6. Event Summary

---

1. The concept of nodes (all the content in the page)

1. Parent node/parent element

obj.parentNode

obj.parentElement

2. Sub-node/sub-element

obj.childNodes has more nodes than elements

obj.children

The first child node obj.firstChild

The first child element obj.fristElementChild

The last child node obj.lastChild

The last child element obj.lastElementChild

The previous sibling node obj.previousSibling

previous sibling element obj.previousElementSibling

The next sibling node obj.nextSibling

next sibling element obj.nextElementSibling

//In ie8, the acquisition of child node sibling nodes has become an element

 //uncommonly used

 2. Creation of elements

1. document.write("The code and content of the label")

2. Object.innerHTML = "label and code"

3. document.createElement("the name of the label"); --- returns the object

Object.appendChild(obj) //Add child elements

Object.insertBefore(obj, an element) //before inserting an element

Object.replaceChild(new element, old element) //replace child element

Object.removeChild(old element) //Delete child elements

3. Event binding

1. Create multiple click events for an element

$("#btn").addEventListener("click", function 1, false); ------------------------------ Firefox and Google support, ie8 does not support

$("#btn").addEventListener("click", function2, false);

Object.attachEvent("event type", function)---------------------supported by ie8, not supported by others

compatible code

 2. The difference between binding events

 4. Unbundling of events

(Whatever method is used to bind the event, the method should be used to unbind the event)

1. The first way

$("#id").οnclick=null

2. The second way

$("#id").removeEventListener("click", function, false); ----------ie8 does not support

3. The third way

$("#id").detachEvent("onclick", function); ------------------------ ie8 support

Unbind compatible code

 5. Event bubbling

Multiple elements are nested and have a hierarchical relationship. These elements are all registered for the same event. If the element event inside is triggered

Then the event of the outer element is automatically triggered

prevent event bubbling

window.event.cancelBubble=true;-------------------ie specific

e.stopPropagation();---------------------------------------Firefox Google Support

6. Event Summary

Events have three phases:

1. Event capture phase

2. Event target stage

3. Event bubbling stage