An, event
1, event binding:
1. elem.onxxx = function () {}, the this point elem , a handler can be bound, is substantially identical to the line between the written in HTML (handle written)
2. elem.addEventListener ( 'event type', handler, to false), the this point elem , can be bound to a plurality of handlers
3. elem.attachEvent ( 'on' + event type, handler), the this point window. (Solution: External alone write handler inside the body of the function call the real handler, call the way), you can bind multiple handlers, and the same function can be performed multiple times to bind multiple times.
Classic despise question: to li list binding loop click event, the output of their index.
var oLi = document.getElementsByTagName('li');
for(var i = 0; i < oLi.length; i++){
(function(j){
oLi[i].onclick = function(){
console.log(j);
}
}(i))
} 2, the lifting of events:
1. elem.onxxx = null / false, to assign a null value on the finished thing
2. elem.removeEventListener ( 'event type', a reference to the same function, false), anonymous bind function, can not be lifted
3 . elem.detachEvent ( 'on' + event type, with a function reference)
Package bind event function, compatible with all browsers
function addEvent(elem, type, handle){
if(elem.addEventListener){
elem.addEventListener(type, handle, false);
}else if(elem.attachEvent){
elem.attachEvent('on' + type, function(){
handle.call(elem);//解决this指向的问题
})
}else{
elem['on' + type] = handle;
}
}Second, event handling model: bubbling, capture (trigger sequence: first capture, then the source element event execution, and finally bubbling !!)
1, bubble: (focus, blur, change, submit, reset, select other events not bubbling)
the structure of the (non-visual) nesting relationship: son -> father -> grandfather -> ... bubbling has been up
2 capture: (IE no ..)
and bubbling the contrary, from the parent element captures to the event source element, the third parameter mapping to true
(another IE can only capture: div.setCapture () on the event page will have to get div body, div.releaseCapture () to release)
3, cancel take bubble:
the W3C: e.stopPropagation (upload handler parameter E, the system returns an event object, the method comprising the above)
IEs & Chrome: = e.cancelBubble to true
. 4, to prevent the default event :( form submission page refresh, a tag jump , right-click menu, etc.)
return false, only (elem.onxxx = function () {} ) event handler effective way binding
e.preventDefault (), (href a link inside to write javascript: void (false) can also be canceled a default link Member)
e.returnValue = to false, compatibility IEs
. 5, the event object: e || window.event
6, event source object: event.target || event.srcElement
7, the event delegate: According to the bubble, both directly to the upper layer processing
Exercise: the realization of a drag and drop function
function drag(elem){
var elem = document.querySelector(elem);
var disX,
disY;
elem.addEventListener('mousedown',function(e){
var event = e || window.event;
disX = e.clientX - elem.offsetLeft;
disY = e.clientY - elem.offsetTop;
document.addEventListener('mousemove',handle, false)
elem.addEventListener('mouseup', function(){
document.removeEventListener('mousemove',handle, false)
}, false)
}, false)
function handle(e){
var event = e || window.event;
elem.style.left = e.clientX - disX + 'px';
elem.style.top = e.clientY - disY + 'px';
}
}Third, the event type
1, type mouse events:
1. Know click to listen only on the left; up, down distinguish between left and right mouse button;
there are button on the property 2. the event object, 0,1,2 representing the left, center, right;
3. in the mobile terminal moving end down, up, click, etc. failure. With touchstart, touchmove, touchend instead of
2, the keyboard class events:
1. Down, press (continuously triggers, such as the game forward and back keys .down monitor all the keys, press the button to return to monitor the ASCII character class), up
2. String. fromCharCode (unicode code), returns the character
3, text manipulation events:
1. INPUT: text whenever a change is triggered
2. change: whether the focus and defocus state has two changes
3. focus: focus
4. blur: defocus
A sound input box
<input type="text" name="username" style="color: #999" value="请输入用户名" onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='#424242'}" onblur="if(this.value==''){this.value='请输入用户名';this.style.color='#999'}"> 4, form class Event:
1. window.scroll (IE6 no fixed position, with position: absolute analog, top = top + original position of the scroll bar)
2. Load (xxx.onload, slow !!! renderTree finished building, all resource loading is complete, onload will be implemented)
Fourth, on the asynchronous loading: (js block the document, the method of loading tool js no need to clog the document)
1. domTree, depth-first, domTree been constructed on behalf of all the dom node analysis is completed when building
2 . cssTree, depth first constructing
3. domTree + cssTree = renderTree (rendering engine start drawing page)
Some reflow operation causes rearrangement, such dom node delete, add, width and height, change in position, offsetWidth, offsetLeft
some operations It will cause redraw repaint, slightly less than the harm rearrangement
1, several methods asynchronous loading of:
1. the defer: Available only IE, <script type = "text / javascript" src = "" defer = "defer"> </ script> dom document parsing until completion will be executed
2. async: <script type = " text / javascript" src = "" async = "async"> </ script> finished loading on the implementation, only loading external script
3. load on demand
2, js loading time line (very important)
to create the document object, start parsing web pages. document.readyState = 'loading'
encounter external link css, asynchronous loading
encountered script external js, not set asynchronous, blocking the document
met script external js, set asynchronous, asynchronous loading (prohibiting the use of document.write, he can before the document flow empty)
encountered img, normal parsing dom, asynchronous loading src
document is parsed (domTree completed), document.readyState = 'interactive'
document analysis is complete, the setup script defer the implementation of
the document is parsed, document object triggers DOMContentLoaded ( can only use addEventListener binding, jq of $ (document) .ready is this time), event-driven browser into
the entire page is loaded, document.readState = "complete", that is, window.onload
The above content is a brother original, finishing from " crossing a Javascript education curriculum ", a recommended " crossing an education ."