JS basis -DOM

JUDGMENT

• DOM level events
• DOM event model
• DOM event flow
• DOM event capture specific process
• Common applications for the Event object
• Custom Event

DOM Overview | MDN

DOM | MDN

DOM manipulation

DOM level events

• DOM0
  • onXXX type of defined events
  • element.onclick = function(e) { ... }
• DOM2
  • addEventListener way
  • element.addEventListener('click', function (e) { ... })
  • btn.removeEventListener('click', func, false)
  • btn.attachEvent("onclick", func);
  • btn.detachEvent("onclick", func);
• DOM3
  • It adds a lot of event types
  • element.addEventListener('keyup', function (e) { ... })
  • eventUtil is a custom object, textInput is DOM3 level event

DOM event model

Capture from top to bottom, bubbling from the bottom up.
To capture, to the target, and then bubbling

DOM event flow

+ Bubble capture using the DOM standard. Both events will trigger the flow of all objects DOM, starting from the window object, but also the end of the window object.

DOM standard event stream consists of three phases:

• Event capture stage
• In the target stage
• Event bubbling phase

Describe specific processes DOM event capture

From the window -> document -> html -> body -> ... -> target element

Event object common applications

• event.target
  • Element that triggered the event
• event.currentTarget
  • Element binding events
• event.preventDefault()
  • Prevent the default behavior
  • event.cancelBubble () have been abandoned and event.preventBubble
• event.stopPropagation()
  • Prevent further spread of the capture or bubble phase, rather than prevent bubbling
• event.stopImmediatePropagation()
  • Prevent the event from bubbling other and prevent the same event listener is called.

Event agency / commission

Event delegate to the parent element refers to the binding target element of the event, using the bubbling mechanism that triggered the event

advantage:

• Event registration can be reduced, saving a lot of memory usage
• Events can be applied to the sub-element dynamically added

However, improper use can cause fires when the event should not trigger

ulEl.addEventListener('click', function(e){
  var target = event.target || event.srcElement;
  if(target && target.nodeName.toUpperCase() === "LI"){
    console.log(target.innerHTML);
  }
}, false);

Custom Event

• Event
• CustomEvent

CustomEvent not only can be used for custom events, you can also do with a parameter object in the back

var evt = new Event('myEvent');

someDom.addEventListener('myEvent', function() {
  //处理这个自定义事件
});

someDom.dispatchEvent(evt);

Event mechanism IE and Firefox What is the difference? How can I prevent bubbling?

IE only event bubbling, does not support the event capture; Firefox supports event capture and bubbling pieces.

Prevent bubbling:

• Cancel the default action
  • w3c method is e.preventDefault ()
  • IE is used e.returnValue = false;
• return false
  • The only javascript return false to prevent the default behavior
  • JQuery is if you both stop and prevent the default behavior of object bubbles.
• Stop bubbling
  • w3c method is e.stopPropagation ()
  • IE is used e.cancelBubble = true

[js] view plaincopy
function stopHandler(event)
  window.event 
  ? window.event.cancelBubble = true 
  : event.stopPropagation();
}

dom.getAttribute DOM elements (propName) and dom.propName What is the difference and contact

• dom.getAttribute (), is a standard method for operating a DOM document element attributes, versatility can be used on any document, the return element is provided in the source file attributes
• dom.propName typically access a particular characteristic element in the HTML document, the browser parses the object generates a corresponding element (e.g., a tag generating HTMLAnchorElement), binding properties of these objects will be disposed according to specific rules properties obtained for the attribute no corresponding characteristic and can only be accessed using getAttribute
• dom.getAttribute () return value is a value set in the source file, the type of a string or a null (some implementation returns "")
• dom.propName return value may be a string, boolean, objects, and other undefined
• Most attribute the property is one relationship, a modification which would affect another, such as id, title and other property
• Some Boolean properties <input hidden/>set for the test and removeAttribute hasAttribute need to complete, or set the corresponding property
• Like <a href="../index.html">link</a>the href attribute, converted into property when the need to get the full URL by converting
• Some attribute and is not one to one property, such as: form control <input value="hello"/>corresponds defaultValue, modify or set the property value is the current value of the modified control, setAttribute modify the property value attributes do not change value

JS obtain dom CSS style

function getStyle(obj, attr){
  if(obj.currentStyle){
    return obj.currentStyle[attr];
  } else {
    return window.getComputedStyle(obj, false)[attr];
  }
}

JS achieve mouse drag

DOM manipulation - how to add, remove, move, copy, create, and find nodes?

Create a new node

• createDocumentFragment () // create a DOM fragment
• createElement () // create a specific element
• createTextNode () // Create a text node

Add, remove, replace, insert

• appendChild()
• removeChild()
• replaceChild()
• insertBefore () // insert a new child node before an existing child node

Seek

• getElementsByTagName () // by label name
• getElementsByName () // by the value of the Name attribute of the element (IE fault tolerance ability, will be an array, including name id equal value)
  
• getElementById () // element by Id, uniqueness

InnerHTML and the difference documen.write

• document.write only redraw the entire page
• innerHTML can redraw part of the page

Window objects and document objects

window

• Window object represents the current browser window, is the top-level object of JavaScript.
• All objects, functions, variables we create is a member of the Window object.
• Window object methods and properties are valid globally.

document

• Document object is the root to all other nodes of the HTML document (element nodes, text nodes, attribute nodes, comment nodes)
• Document object so that we can access all the elements in the HTML page through a script
• Document objects are part of the Window object, i.e. window.document

What is the distinction between "client area coordinates", "page coordinate", "screen coordinates"

• Client coordinates
  • Horizontal coordinates of the mouse pointer in the visible region (the clientX) and vertical coordinate (clientY)
• Page coordinate
  • The horizontal coordinate mouse pointer in the page layout (the pageX) and vertical coordinates
• Screen coordinates
  • The horizontal coordinate of the physical screen (screenX) and vertical coordinate (screenY)

focus / blur and focusin / focusout differences and relations

1. focus / blur do not bubble, focusin / focusout bubbling
2. focus / blur compatibility, focusin / focusout In addition to the browser FireFox have good compatibility for the use of event hosting, consider using events in FireFox capture elem.addEventListener ( 'focus', handler, true)

mouseover / mouseout and mouseenter / mouseleave differences and relations

1. mouseover / mouseout event is standard, all browsers support ; mouseenter / mouseleave is a unique event IE5.5 introduced later adopted DOM3 standards, modern browsers also support standard
2. mouseover / mouseout is bubbling event; mouseenter / mouseleave not bubbling . Need while monitoring the mouse into / out of the event more than one element, it is recommended mouseover / mouseout hosting, improve performance
3. Standard event model represents an element occurs event.target into / out, vent.relatedTarget corresponds removed / as elements; expressed in old IE occurring in event.srcElement into / out of the element, event.toElement represents the target element removed, Event. fromElement indicate the source element when moved

What are the differences IE W3C event processing and event handling have?

Binding events

• W3C: targetEl.addEventListener('click', handler, false);
• IE: targetEl.attachEvent('onclick', handler);

Delete Event

• W3C: targetEl.removeEventListener('click', handler, false);
• IE: targetEl.detachEvent(event, handler);

Event Object

• W3C: var e = arguments.callee.caller.arguments[0]
• IE: window.event

The event target

• W3C: e.target
• IE: window.event.srcElement

Prevent default event behavior

• W3C: e.preventDefault()
• IE: window.event.returnValue = false'

Stop event propagation

• W3C: e.stopPropagation()
• IE: window.event.cancelBubble = true