js keyboard events and touch event

First, the keyboard events
keyboard event can not bind a label or document window must be exactly the same effect using two. Tags can get the focus: input select textarea button a. . .

1, keydown press the trigger button, if kept pressed, will always trigger

// press any key keyboard, triggering event 
window.onkeydown = function () { 
　　the console.log ( 12 is ); 
} 
// press any key keyboard, triggering event 
document.onkeydown = function () { 
　　the console.log ( 34 is ) ; 
}

2, keyup button-up event

// When you press any keyboard key, will trigger the release, it will not trigger held down, if at the same time pressing multiple, any release will trigger a 
window.onkeyup = function () { 
    console.log ( 12 ); 
} 
// press any keyboard key, will trigger the release, it has not triggered by pressing, if a plurality of pressing simultaneously, will trigger the release of any one 
document.onkeyup = function () { 
    Console. log ( 34 is ); 
}

3, add labels related events

// Add Event label 
var oDiv = document.querySelector ( 'div' );
 // Object .onkeydown / the onkeyup 
oDiv.onkeydown = function () { 
    the console.log ( 56 is ); 
}

4, the key event object
e.key storing key names (not distinguish between the numeric keypad) pressed
e.keycode each key corresponds to a value not duplicate, each key used to distinguish this low-compatible version of Firefox need to do processing: var variable = e.keycode || e.which

window.onkeydown = function(e){
    console.log(e);
}

5, the key combination
ctrl alt shift + other key combination

E event object has three properties
ctrlKey press ctrl result is not drawn true to false results
altKey pressing alt result is not drawn true to false results
shiftKey press shift result is not drawn true to false results

// is determined key is pressed E + ctrl (69) 
window.onkeydown = function (E) {
     IF (== e.ctrlKey to true && e.keycode == 69 ) { 
        the console.log ( 'ctrl key and press key e ' ) 
    } 
}

Second, the touch event (mainly for a mobile terminal)
touchstart touch start
touchend touch end
touchmove touch movement
other event is a combination of these three events using
a long press: touches the difference is greater than the end time (1 second or 0.5 seconds, a predetermined browser and not closed with js)

2, Touch: The touch time of less than 100 milliseconds,
3, left: touch begin, touch end, coordinate difference

4. Special events:
when over-end: transitionend when over-end
when the end of the animation: animationend when the end of the animation

// There are several properties executed, the program performs several operations 
var oDiv = document.querySelector ( 'div' ); 
oDiv.ontransitionend = function () { 
    the console.log ( 'over the end of a' ) 
}

js keyboard events and touch event

Guess you like