First, what is an event
incident is one thing or an action (for the element, its many events are born with built-in), as long as we go operational this element, it will trigger these behaviors.
"Event is a natural element that comes with behavior, we control elements, it will trigger the relevant time behavior"
Second, the event binding
to the natural elements of behavior that comes with the event binding method, when an event is triggered, the corresponding method will perform.
Third, the event comes natural elements (common)
[events] mouse
click: Click (PC end is click, click behalf of the mobile end of the stand-alone [mobile end use of click will be 300ms delay])
dblclick: Double-click on
mouseover: glide
mouseout : slide out
mouseenter: enter
mouseleave: leave
mousemove: mobile
mousedown: press (ie it is pressing the trigger, click the trigger is pressed will be lifted, and that first down and up trigger will trigger the Click)
mouseUp: mouse raised
mousewheel: mouse wheel to scroll
...
[keyboard] event
keydown: keyboard press
keyup: lift the keyboard
keypress: and keydown similar, but keydown returns keyboard codes, keypress returns the ASCII value of
input: due to the PC entities physical keyboard, the keyboard can listen to the press and lift, but the mobile terminal is a virtual keyboard, so keydown and keyup on most phones are not, we use the Input event to unify their place.
...
[] Other common events
load: loaded
unload:
beforeunload:
Scoll: scroll bar to scroll event
resize: size change event window.onresize = function () {} When the browser window size is changed, this will trigger event, performing the corresponding thing
...
[the mobile terminal finger event]
[touch: single finger operation]
touchstart: finger press
touchmove: finger movement
touchend: finger off
touchcancel: because unforeseen circumstances leading to finger an action (eg shutdown)
[gesture: multi-finger operation]
gesturestart: finger pressed
gesturechange: finger change
gestureend: finger off
...
Fourth, the event binding two modes of operation
[Objective]
to a current event binding element method (either DOM0 or DOM2), are designed to trigger the behavior-related elements, do something (that is, binding the the method of execution); "not only the method of execution, and the browser back way to pass this value is the event object argument information value ===>"
[DOM 0 level event bindings]
[element] .onXXX = function () {}
【DOM 2级事件绑定】
【element】.addEvenListener('xxx' , function( ) { },false);
【element】.attachEvent('onXXX',function( ) { }); IE 6-8
【例子】
box.onclick = functinon ( ev ) {
==>定义一个形参EV用来接收方法执行的时候，浏览器传递的信息值（事件对象：MouseEvent鼠标事件对象、KeyboardEvent键盘事件对象、Event普通事件对象...）
==>事件对象中记录了很多属性名和属性值，这些信息中包含了当前操作的基础信息，例如：鼠标点击位置的x/Y轴坐标，鼠标点击的是谁（事件源）等信息
【MouseEvent】
ev.target => 事件源（操作的哪个元素）
ev.clientX / ev.clientY : 当前鼠标触发点距离当前窗口左上角的X/Y角轴坐标
ev.pageX / ev.pageY : 当前鼠标触发点距离BODY（第一屏幕）左上角的X/Y轴坐标
ev.preventDefault( ):阻止默认行为
ev.stopPropagation( ):阻止事件的冒泡传播
ev.type：当前的事件类型
【keyboardEvent】
ev.code:当前按键'keyE'
ev.key:当前案件'e'
ev.which / ev.keycode:当前案件的键盘码
【常用键值表】
}
Fifth, the compatibility of the event object
[] IE6-8
in IE lower versions of the browser, the browser execution method binding, and not the event object passed in, this time ev === undefined, needs to be based on window.event get (because it is global property values will put the mouse on each operation once operated replaced)
[] to manually set the
low version is not the property, we manually set it: according to their own values to get there first, and then assigned to standard corresponding to the new property.
Sixth, the event's default behavior
of the event itself is born with certain triggering events, even if you do not have binding method, will have some effect, the effect of these default is "default behavior of events"
[For example]
1. A label the click operation there is a default behavior
1. page jump
2. anchor Position (hASH hash positioning [positioning])
2.input label also has its own default behavior
1. enter the content can be presented to the text box
2. enter content some of the information previously entered will appear when it (not all browsers and all cases have)
...
3.submit button
1. click the button to the page will be refreshed
[to prevent the default behavior]
[structure] prevent
[JS] blocked in
1. direct false return
2.ev.preventDefault ev.preventDefault (): ev.returnValue = false;?
Seven, the event propagation mechanism
[capture] stage capturing_phase
Click INNER, the first thing will be to start looking inward from the outermost (find the action of the event source), the purpose is to find, build a bubbling route propagation phase requires dissemination ( Find hierarchy is in accordance with HTML looking)
[target] stage at-target
the relevant operational behavior of the trigger event source (if bound method, put the execution method)
[] bubbling phase bubbling_phase
according to the capture phase planned route, from inside out, the event-related behavior ancestor of the current event source in turn trigger (if one ancestor event binding behavior of the method, put the method execution, not binding methods, behavioral triggers, what are good, continue upwards to spread)
Eight, some of the understanding of the event object
1. The event object is used to store information about the current this operation, and related operations, and not necessarily related elements.
2. When we mouse or keyboard-based operation, the browser will store information on this operation up (standard browser to the default storage memory (can not find their own), IE low version stored in window.event a), the stored value is an object (heap memory); the operation will certainly trigger an action, method, bindings will also perform at this time stored object before the standard browser will (to be exact heap memory address) as the argument to the execution of each method, the operation time, the method has the EV even more, but is a (the object of this operation information stored values hexyl)
Difference nine, onmouseover and mouseenter of:
1. belong to glide over the event, enter from the parent element to the child element, belonging to the left of the parent element, the parent element is triggered out, triggering over the child element
enter belongs to enter, enter from the parent element to child elements, and not leave the parent element, the parent element does not trigger leave, child elements trigger the Enter
2.enter and leave prevents bubbling propagation of an event, but there are still bubbling over and spread out of
3. so in this case the nested child elements of the parent element, do not want to use a lot of things over the operation will happen, then we will enter more simple to use, easy to operate.
Ten, event delegate (the event broker):
use event bubbling propagation mechanism, if descendant elements of a container, many elements of the click behavior (behavior other events also) have to do some processing, then we do not need as before as one by one, get one binding, we just need to click the binding method container can be, so no matter which one is clicked descendant elements, it will be based delivery mechanisms bubbling spread, triggering the click behavior of the container, the correspondence the method of execution, according to event sources, we can know who is clickable, so you can do different things.
XI event binding Detailed:
[binding] DOM 0 level event
only allowed to conduct an event the current element of a binding method, multiple binding, the content of bound behind will replace the previous bound to last once bound based. Principle: the event is to give a certain element of private property assignment (the browser will establish a mechanism to monitor, when we trigger an action element, the browser will own the property value assigned to the execution)
[DOM Level 2 event binding]
1. based on addEventListener complete event binding, is based on "event pooling mechanism" to complete.
2.DOM2 a number of different methods can be bound to a particular element of the current event.
【DOM 2级事件的兼容问题】
1.谷歌 VS IE高版本
在移除事件绑定的时候，如果移除操作法在正要执行的方法之前（例如，点击的时候，正要执行FN8，但是在执行FN4的时候已经移除了FN8），谷歌下是立即移除生效，IE是下一次点击生效。
2.标准 VS IE低版本
标准：addEventListener / removeEventListener
IE低：attachEvent / detachEvent
标准用的行为名称是“click”，IE低版本使用时前面要加on“onclick”
IE低版本出现的所有问题都是因为本身的事件池机制不完整而导致的
【THIS问题】
标准浏览器中，行为触发执行，方法中的THIS是当前元素本身，IE低版本中THIS指向了WINDOW
【重复问题】
标准浏览器中的事件是默认去重复的，同一个元素同一个时间行为不能出现相同的绑定方法，但是IE低版本的事件池机制没有这么完善，不能默认去重。
【顺序问题】
标准浏览器是按照向事件池中存放的顺序依次执行的，而IE低版本是乱序的，没有规律。
【事件传播的相对路径】
【DOM 0级 和 2级 事件绑定的区别】
1.机制不一样
DOM0采用的是给私有属性赋值，所以只能绑定一个方法
DOM2采用的是事件池机制，所以能绑定多个不同的方法
2.移除的操作
3.DOM2事件绑定增加了一些DOM0无法操作的事件行为，例如：DOMContentLoaded事件（当页面中的HTML结构加载完成就会触发执行）
4.两者可以共存，执行顺序根据HTML结构来判断
5.window.onload 和 $function(){} 的区别
1.$function(){} 比前者先执行，前者需要等HTML,CSS,JS加载完才执行，后者只需HTML加载完就可以执行
2.后者可以执行多次