Wheel event is actually a mousewheel event, which tracks the mouse wheel, Mac-like touch-screen version.

First, the client area coordinate position

Mouse events are at a particular location on the browser viewport occur. This location information is stored in clientX and clientY property of the event object. All browsers are supporters of the two properties. clientX and clientY mouse pointer indicates an event occurs depends on the horizontal and vertical coordinates of the mouth.

document.addEventListener('click',function(event){
    document.title=event.clientX+' , '+event.clientY;
},false);

To document specifies the onclick event handler, you can see the coordinate information of the client when you click on the title page.

Note: These values are not included in the page scrolling distance, because this position does not mean that the mouse position on the page.

Second, the page coordinate position

ClientX and mouse can be specified by clientY occurred in the viewport position statement, and the page coordinates by pageX and pageY properties of the event object, the event was able to get what position in the page occurred. I.e. pageX pageY and indicates the position of the mouse cursor on the page, the page coordinates are therefore not itself viewport left and top edge calculations.

document.addEventListener('click',function(event){
    console.log(event.clientX+' , '+event.clientY);
    console.log(event.pageX+' , '+event.pageY);
},false);

In the case of pages without scrolling, and the value of pageX pageY the value clientX and clientY equal.

IE8 and earlier versions do not support the event object coordinates on the page, but using client coordinates and scrolling information can be calculated. This time the need to use the document.body (promiscuous mode) or document.documentElement (standard mode) and the scrollLeft scrollTop properties. as follows:

<script type="text/javascript">
var div=document.getElementById("myDiv");
EventUtil.addHandler(div,"click",function(event){
    event=EventUtil.getEvent(event);
    var pageX=event.pageX,
          pageY=event.pageY;
    if(pageX==undefined)          {
        pageX=event.clientX+(document.body.scrollLeft || document.documentElement.scrollLeft);
    }
    if(pageY==undefined){
        pageY=event.clientY+(document.body.scrollTop || document.documentElement.scrollTop);
    }
    alert("Page coordinates:" +pageX+" , "+pageY);
});
</script>

Third, the screen coordinates

When a mouse event occurs, there will be not only relative to the browser window, there is a relative to the entire computer screen. And by screenX and screenY properties you can determine the coordinates of the mouse pointer relative to the entire screen information when a mouse event occurs.

document.addEventListener('click',function(event){
    console.log("Client coordinates"+event.clientX+' , '+event.clientY);
    console.log("Page coordinates "+event.pageX+' , '+event.pageY);
    console.log("Screen coordinates "+event.screenX+' , '+event.screenY);
},false);

Fourth, the modifier keys

While the mouse events mainly use the mouse to trigger, but when you press the mouse status of certain key on the keyboard can affect the action to be taken. These modifier key is Shift, Ctrl, Alt and Meta (in Windows is Windows key keyboard, the Mac is the Cmd key), which are commonly used to modify the behavior of the mouse events.

Providing that DOM four properties, which represents the state of modifier keys: shiftKey, ctrlKey, altKey and metaKey. These attributes are Boolean included, if the corresponding key is pressed, the value is true, otherwise the value is false. When a mouse event occurs, by detecting these attributes you can determine whether the user pressed at the same time one of the key. as follows:

<script type="text/javascript">
var div=document.getElementById("myDiv");
EventUtil.addHandler(div,"click",function(event){
    event=EventUtil.getEvent(event);
    var keys=new Array();

    if(event.shiftKey){
        keys.push("shift");;
    }
    if(event.ctrlKey){
        keys.push("ctrl");
    }
    if(event.altKey){
        keys.push("alt");
    }
    if(event.metaKey){
        keys.push("meta");
    }

    alert("Keys: "+keys.join(","));
});
</script>

Detecting the state of various modifications of the key by an onclick event handler. An array of keys contains the name of the modified key has been pressed. That is, if the attribute value is true, the corresponding name will be added to modify the keys of the key array. In the final event handler, there is an alert box will display the information of the detected key to the user.

Note: IE8 and earlier versions do not support metaKey property, IE9, Firefox, Safari, Chrome and Opera all support these four keys.

Fifth, related elements

When mouseover and mouseout events, will involve more elements. These two events are directed to move the mouse pointer from one element to the inner boundary to the inner boundary of another element.

For mouseover events, the main goal of the event is to get the cursor elements, and related elements is that the loss of the cursor element.

Similarly, for mouseout events, the main goal of the event is to lose the cursor elements, and related elements are the elements to get the cursor.

DOM access to information related elements by relatedTarget property event object. relatedTarget property only for mouseover and mouseout event contains a value; for other events, the property value is null.

IE8 and earlier versions do not support relatedTarget property, but provides the same information holds different attributes.

When a mouseover event is triggered, fromElement property saved in IE related elements;

When mouseout event triggers, IE's toElement property contains relevant elements; (IE9 support relatedTarget, fromElement, toElement support)

example:

<div id="myDiv" style="height: 100px;width: 100px;"></div>

var div=document.getElementById("myDiv");
EventUtil.addHandler(div,"mouseout",function(event){
    event=EventUtil.getEvent(event);
    var target=EventUtil.getTarget(event);
    var relatedTarget=EventUtil.getRelatedTarget(event);
    alert("Moused out of "+target.nodeName+" to "+relatedTarget.tagName);
});

Sixth, the mouse button

For mouseup and mousedown events, there is a button in the event properties of objects representing a button is pressed or released.

DOM-button property has three values:

0: primary mouse button (left mouse button)
1: represents the middle mouse button (mouse wheel button)
2: the second mouse button (right mouse button)

IE8 and earlier versions also offer a button attribute, but the value of the button and DOM This property is very different.

0: do not press the button. - " 0
1: means to press the left mouse button - "0
2: means to press the right mouse button - "2
3: Indicates while pressing the left mouse button - "0
4: represents the middle mouse button pressed - "1
5: represents the mouse while pressing the left and middle mouse button - "0
6: represents the right mouse button while pressing the middle mouse button and - "2
7: Indicates mouse button while pressing the three - "" DOM0

button attributes of DOM model is more simple and practical than the button attributes IE model, because a plurality of pressing the mouse button while the case is very rare.

The most common practice is to IE DOM model normalized way, after all, in addition to IE8 and earlier versions support the DOM model.

The IE other options are converted into a press as can the three buttons (buttons while the main priority as an object selected).

IE 5 and 7 returned are converted to 0 DOM model.

Key: Because alone can not determine the ability to detect differences (both models have the same name as the button attributes), and therefore must be another way. DOM mouse events supported version of the browser can be detected by hasFeature () method, so cross-browser getButton () method is as follows:

getButton:function(event){
        if(document.implementation.hasFeature("MouseEvents","2.0")){
            return event.button;
        }else{
            switch(event.buton){
                case 0:
                case 1:
                case 3:
                case 5:
                case 7:
                        return 0;
                case 2:
                case 6:
                        return 2;
                case 4:
                        return 1;                                                
            }
        }        

    }

document.implementation.hasFeature ( "MouseEvents", "2.0")) by detecting a "MouseEvents" this feature, you can determine the properties button event exists in the object contains the correct value.

Note: When onmouseup event handler, button values indicate which button is released. In addition, if not press or release the primary mouse button, Opera does not trigger mouseup or mousedown event.

Seven more event information

"DOM2-level events" standard object in the event also provides detail attribute, gives more information about the event for. For mouse events for, detail contains a value that represents how many times the click occurred at a given position.

On the same pixel sequentially occurs once and once mouseup mousedown event counts as a single click. detail attribute start counting from 1, incremented each time you click. If the mouse is moved between a position mousedown and mouseup, the detail will be reset to zero.

Eight, mouse wheel events

When the user is not interacting with the page scroll wheel, (whether up or down), mousewheel event triggered when the page is scrolled in the vertical direction. Since the mousewheel event is very popular, and all browsers support it, so HTML5 also joined the mousewheel event.

mousewheel event can be triggered at any of the above elements will eventually bubble to the document (IE8) or window (IE9, Opera, Chrome and Safari) objects.

Related Properties: In addition to all standard information mouse events, mousewheel event corresponding to the event object comprises a further special wheelDelta properties.

When the user scrolls the mouse wheel forward, wheelDelta is a multiple of 120; when the user scrolls the mouse wheel backward, wheelDelta is a multiple of -120.

In most cases, you only need to know the mouse wheel to scroll in the direction, which is achieved by the sign of wheelDelta.

compatibility:

Versions prior to 9.5 Opera, sign wheelDelta values are reversed.

Firefox supports a DOMMouseScroll of similar incidents, also triggered when the mouse wheel to scroll wheel. For information on saving mouse properties in detail. When rolling the mouse wheel forward, the value of this attribute is a multiple-3, when the mouse wheel is rolled back, this value is a multiple of 3.

The following is a compatibility processing.

getWheelDelta:function(event){
    if(event.wheelDelta){
        return(client.engine.opera && client.engine.opera<9.5? -event.wheelDelta:event.wheelDelta);
    }else{
        return -event.detail*40;
    }
}

Nine, touch devices

iPhone and iPad no mouse.

It does not support dblclick event. Double-click on the browser window will enlarge the screen, and there is no way to change this behavior.
Tap to click on an element triggers mousemove event. If this will lead to changes in the content, there will be no other incidents; if the screen has not changed, it will in turn trigger the mousedown, mouseup and click events. Tap not clickable elements will not trigger any event. Clickable elements are those elements (such as links) can generate the default action of clicking, or those that have been designated elements onclik event handler.
mousemove event will trigger mouseover and mouseout events.

And two fingers on the trigger page and scroll mousewheel event with the fingers moving scroll on the screen.

Ten, touch events

touchstart: Triggered when a finger touches the screen; even if you have a finger on the screen will be the trigger.
touchmove: continuously triggered when a finger slide on the screen. During this world happen, call the preventDefault () can stop scrolling.
touchend: Triggered when the finger is removed on the screen.
touchcancel: Triggered when the system stops tracking touch. The exact trigger time about this event, the document did not specify.

These events will bubble up above, can also be canceled. Although these touch events are not defined in the DOM specification, but they are implemented in a manner compatible with the DOM. Therefore, event object for each event a touch of the mouse event provides common properties: bubbles, cancelable, view, clientX, clientY, screenX, screenY, detail, altKey, shiftKey, ctrlKey and metaKey.

In addition to the common DOM attribute, touch the world also contains the following three properties for tracking touch.

touches: Touch objects represent touch operation of the current tracking array .
targetTouches: Touch target-specific event object array .
changedTouches: Touch objects represent no change since the last touch of the word occurred in the array .

Touch Each object contains the following properties:

clientX: Touch the target in the mouth, as the x-coordinate.
clientY: Touch the target in the mouth, as the y-coordinate.
identifier: unique ID identifies the touch.
pageX: x coordinate of the touch target on the page.
pageY: Touch the target in the y coordinate of the page.
screenX: Touch the target in the x coordinate of the screen.
screenY: Touch the target in the y-coordinate screen.
target: Touch DOM node target.

Using these attributes can track a user's touch operation on the screen.

<div id="output"></div>

function handlerTouchEvent(event){
    //只跟踪一次触摸
    if(event.touches.length==1 || event.touches.length==0){//书上这里有错
        var output=document.getElementById("output");
        switch(event.type){
            case "touchstart":
                output.innerHTML="Touch started ( "+event.touches[0].clientX+", "+event.touches[0].clientY+")";
                break;
            case "touchend":
                output.innerHTML+="<br/>Touch ended ("+event.changedTouches[0].clientX+", "+event.changedTouches[0].clientY+")";
                break;
            case "touchmove":
                event.preventDefault (); // stop rolling
                output.innerHTML+="<br/>Touch moved ("+event.changedTouches[0].clientX+", "+event.changedTouches[0].clientY+")";
        }
    }
}

EventUtil.addHandler(document,"touchstart",handlerTouchEvent);
EventUtil.addHandler(document,"touchend",handlerTouchEvent);
EventUtil.addHandler(document,"touchmove",handlerTouchEvent);

The above code will track one-touch operation occurring on the screen. For simplicity, only the output information in case there is an event touch operation.

When touchstart occurs, an output of the touch position information to a <div> element.

When touchmove event occurs, cancel the default behavior, stop the scroll (the default behavior is to scroll touch move), then the output change information touch operation.

The event will be touched final output information about touch operation.

Note : In the event when touched, touches not have any Touch collection objects, because there is no active touch operation; this time, it is necessary to switch to changedTouches collection.

/ * When the trigger touchstart touchmove events and there is no problem if the program can then enter the correct execution according to the corresponding case statement, but when touchend trigger event, event.touches.length already equal to 0, and can not enter if the , it can not be executed case statements, so when touchend never trigger execution of the program. Therefore, the determination condition to add event.touches.length == 0. * /

These events will trigger all the elements in the document above, which can operate in different parts of the page, respectively. When the element on the touch screen, events (including mouse events) occur in sequence as follows:

touchstart
mouseover
mousemove (a)
mousedown
mouseup
click
touched

Chrome desktop version of Firefox 6+ and also supports touch events.

XI gesture events

When the two fingers touching the screen will have a gesture, a gesture usually change the size of the displayed items, or rotate the display items. There are three gesture event, as follows:

gesturestart: Triggered when a finger is already on the screen by the other finger and touch the screen.
gesturechange: Triggered when any position of a finger touching the screen changes.
gestureend: Triggered when any one finger away from the screen.

These events will trigger only when two fingers touch the receiving vessel to the event.

Set an event handler on an element, it means that the two fingers must be located within the range of elements to trigger gesture events (this element is the goal).

Because of these events bubble, so to talk about the event handler on the document can also handle all the gestures events.

At this point, the goal of the event even if two fingers are in that element within its scope.

Touch events and gestures relations events:

gesture event object for each event are included with the standard mouse event properties: bubbles, cancelable, view, clientX, clientY, screenX, screenY, detail, altKey, shiftKey, ctrlKey and metaKey. There are also two additional properties: rotation and scale.

rotation property: the rotation angle of the finger changes due to a negative value indicates a counterclockwise rotation, a positive value indicates a clockwise rotation (from the zero value).
scale property: represents the distance between two fingers of the change (e.g., inward shrinkage will shorten the distance); from a start value, and widening grow with distance, decreases with distance is shortened.