1, who triggered the event
Event Source
2, what event triggers
the Click mouseOver mouseout
3, after the triggering event, what
event function (what to write in the event function)
Event Object
Similar to the aircraft's "black box" to save the time an event occurs, all information
such as: coordinates of the mouse event occurs
how to obtain the event object:
compatibility issues: acquisition method is not the same on different browsers
in IE and DOM standards : global objects (lower window) event name
does not support the event in high version of IE and chrome to get the event object, another way to automatically become the first parameter event function (this parameter is the event object) compatibility writing: = function btn.onclick (EV) { var EV E = || event; } Note: only when the event occurs, the event writing function, all information is stored in event of the current event
Useful information on the event object
Coordinate related
When clientX clientY event occurs, the coordinates of the cursor from the visible region
When offsetX offsetY events, coordinates of the cursor from the elements
When pageX pageY event occurs, the cursor away from the page (and scroll bars unrelated)
Judge mouse button (left, right) to know
button
Judge mouse clicks (left, right)
Left: 0 Right: 2
var box = document.getElementById("box");
box.onclick = function(ev){
var e = ev||event;
console.log(e.button);
}
box.oncontextmenu = function(ev){
var e = ev||event;
console.log(e.button);
return false;
}
Prevent the default event: return false function in the event
Browser Event
-
load: All resources to load pages -
scroll: Browser scrolling when the trigger -
...
Mouse Events
-
click: Click Event -
dblclick: Double-click Event -
contextmenu: Right-click the event contents menu events -
mousedown: The left mouse button down event -
mouseup: The left mouse button up event -
mousemove: Mouse movement -
mouseover: Mouse moved event -
mouseout: Mouse out events -
mouseenter: Mouse moved event -
mouseleave: Mouse out events -
...
Keyboard Events
-
keyup: Lift the keyboard event -
keydown: Press the keyboard event -
keypress: Lift the keyboard and then press event (a little longer) -
...
Form events
-
change: Form content change event -
input: Form content input events -
submit: A form is submitted -
...
Mobile touch events end ()
-
touchstart: Touch start event -
touchend: Touch the end of the event -
touchmove: Touch move event -
...
keyCode returns the current coding key unidecode
Enter 13
Left 37
38
39 Right
40
Learn key combination
If the block of code needs to press a plurality of button triggers
The event object provides three property
altKey
ctrlKey
shiftKey
when we press the alt key altKey value is true or false is
Another way of binding events
Standard dom0
the js:
element name = .on event function element function = .onclick () {} // code function Fn () {} // code elements .onclick = fn; disadvantages: 1, an element, only the same event bind an event function 2, the order can not be changed from the inside out is always a trigger
dom2 standard
Event listener dom criteria: • elements .addEventListener ( "event name", fn [, true / fase ]); advantages: • can bind multiple events • can change the sequence of events triggered
compatibility:
IE Event Listener syntax: • elements .attachEvent ( "on the event name", fn); Note: You can not change the order
DOM manipulation
Create a dom objects
document.createElement ( "tag name");
Insert:
internal parent element .appendChild (insertion elements) as the last child of the parent element is inserted into the external parent element .insertBefore (new elements, before whom) ; delete parent element .removeChild (element removed) replacing one element of the parent element .replaceChild (new element, the element being replaced); document fragments: var = ARR [1,2,3,4,5,56]; var = document.getElementById List ( "List"); var = document.createDocumentFragment Container (); for (var I = 0; I <arr.length; I ++) { var OLI = document.createElement ( 'Li'); OLI. = arr the innerHTML [i]; container.appendChild (oli); } list.appendChild (Container) role: to improve the efficiency of the code, reducing re-render the page page when back to re-render: extended (high wages dom reconstruction and return) when we changed the layout of elements related to style
(Width and height, the position, the display element disappears)