Table of contents
1. The concept of nodes (all the content in the page)
1. Create multiple click events for an element
2. The difference between binding events
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