Event

Need material click pictures to contact me or private letters, comments

Events: Trigger-response mechanism

The Event interface represents any event that occurs in the DOM, some of which are user-generated (such as mouse or keyboard events), while others are generated by the API.

Three Elements of Events

• Event Source: Elements that trigger (be) events
• Event type: How events are triggered (such as mouse clicks or keyboard clicks)
• Event Handler: Code to be executed after an event is triggered (in functional form)

Basic use of events

var box = document.getElementById('box');
box.onclick = function() {
  console.log('The code will be box Execute after being clicked');  
};

case

• Click the button to pop up the prompt box
• Click on the button to modify the style of the element

Attribute operation

Attributes of non-form elements

href,title,id,src,className

var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);

var pic = document.getElementById('pic');
console.log(pic.src);

Case:

Click the button to switch the image in the img tag

Click the button to display the hidden div

• innerHTML and innerText

var box = document.getElementById('box');
box.innerHTML = 'I am the text<p>I will generate labels</p>';
console.log(box.innerHTML);
box.innerText = 'I am the text<p>I won't generate labels</p>';
console.log(box.innerText);

• HTML escape character

"		"
'		'
&		&
<<//less than that
 >& gt; / / greater than that
 Spaces  
©		&copy;

• The difference between innerHTML and innerText (see NO.61)

• Compatibility Processing of innerText

Form Element Properties

• value is used for content acquisition of most form elements (except option)
• Type can get the type of input tag (input box, check box, etc.)
• disabled Disabled Properties
• checked check box to select Properties
• selected drop-down menu to select Properties

Custom attribute operations (see NO.59)

• getAttribute() Gets the in-line attributes of the label
• setAttribute() Sets the label's in-line properties
• removeAttribute() Removes in-line attributes of tags
• Difference from element. attributes: The three methods mentioned above are used to obtain arbitrary in-line attributes.

Style operation

• Styles set in style are displayed in the label line

var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';

• Be careful

  Setting the attribute type of width, height and location by style attribute is a string, requiring px

Class name operation

• Modifying the label's className attribute is equivalent to modifying the label's class name directly.

var box = document.getElementById('box');
box.className = 'clearfix';

Three ways to create elements

document.write()

document.write('New settings<p>Labels can also be generated</p>');

innerHTML

var box = document.getElementById('box');
box.innerHTML = 'New Contents<p>new label</p>';

document.createElement()

var div = document.createElement('div');
document.body.appendChild(div);

Performance issues

• Because innerHTML parses strings, it is necessary to avoid multiple uses in loops.
• It can be replaced by strings or arrays and set to innerHTML
• Optimized performance is similar to document.createElement

Node operation

var body = document.body;
var div = document.createElement('div');
body.appendChild(div);

var firstEle = body.children[0];
body.insertBefore(div,firstEle);

body.removeChild(firstEle);

var text = document.createElement('p');
body.replaceChild(text, div);

Case:

Privilege selection

Node hierarchy

Focus on father and son attributes, brothers attributes drawing explanation

var box = document.getElementById('box');
console.log(box.parentNode);
console.log(box.childNodes);
console.log(box.children);
console.log(box.nextSibling);
console.log(box.previousSibling);
console.log(box.firstChild);
console.log(box.lastChild);

• Be careful

  The difference between child Nodes and child ren is that child Nodes takes child nodes and child ren takes child elements.

  nextSibling and previousElementSibling acquire nodes, and the attributes corresponding to the acquired elements are nextElementSibling and previousElementSibling acquire elements.

  NextElement Sibling and Previous Element Sibling have compatibility issues, which are not supported until after IE9

• summary

Node operation, method
	appendChild()
	insertBefore()
	removeChild()
	replaceChild()
//Node hierarchy, attributes
	parentNode
	childNodes
	children
	nextSibling/previousSibling
	firstChild/lastChild

Event Details

Three ways to register/remove events

var box = document.getElementById('box');
box.onclick = function () {
  console.log('Click to execute');
};
box.onclick = null;

box.addEventListener('click', eventCode, false);
box.removeEventListener('click', eventCode, false);

box.attachEvent('onclick', eventCode);
box.detachEvent('onclick', eventCode);

function eventCode() {
  console.log('Click to execute');
}

compatibility code

function addEventListener(element, type, fn) {
  if (element.addEventListener) {
    element.addEventListener(type, fn, false);
  } else if (element.attachEvent){
    element.attachEvent('on' + type,fn);
  } else {
    element['on'+type] = fn;
  }
}

function removeEventListener(element, type, fn) {
  if (element.removeEventListener) {
    element.removeEventListener(type, fn, false);
  } else if (element.detachEvent) {
    element.detachEvent('on' + type, fn);
  } else {
    element['on'+type] = null;
  }
}

Three phases of events

1. Capture phase

2. Current target phase

3. bubbling phase

   Event object. EvetPhase property allows you to view the stage at which an event is triggered

Attributes and Methods of Event Objects

• event.type gets event type
• clientX/clientY is supported by all browsers, window location
• Page X/pageY IE8 was not previously supported, page location
• event.target || event.srcElement is used to retrieve elements that trigger events
• event.preventDefault() cancels the default behavior

Ways to Prevent the Spread of Events

• Standard way event.stopPropagation();
• IE low version event.cancelBubble = true; standard has been discarded

Common mouse and keyboard events

• Trigger when the onmouseup mouse button is released
• onmousedown mouse button press trigger
• onmousemove mouse movement trigger
• onkeyup keyboard press trigger
• onkeydown keyboard key-up trigger

Special effects

Offset

• offsetParent is used to get the parent element of location
• Distinction between offsetParent and parentNode

var box = document.getElementById('box');
console.log(box.offsetParent);
console.log(box.offsetLeft);
console.log(box.offsetTop);
console.log(box.offsetWidth);
console.log(box.offsetHeight);

Customer area size

var box = document.getElementById('box');
console.log(box.clientLeft);
console.log(box.clientTop);
console.log(box.clientWidth);
console.log(box.clientHeight);

Rolling migration

var box = document.getElementById('box');
console.log(box.scrollLeft)
console.log(box.scrollTop)
console.log(box.scrollWidth)
console.log(box.scrollHeight)