Professional JS(13.4.7HTML5 /device/Touch/Gesture Event/Memory&Performance/Simulating Events/Canvas)

1.The MozOrientation Event
+①Firefox 3.6 introduced a new event called MozOrientation to detect device orientation.The event object has three properties with accelerometer(加速度计) data:x,y, and z.Each value is a number between 1 and -1 and represents a different axis(坐标轴).When at rest(静止状态下),x is 0,y is 0,and z is 1(indicating the device is upright).Tilting(倾斜) to the right decreases the value of x,while tilting to the left increases the value.Likewise,tilting away from you decreases the value of y,while tilting toward you(as if to read a paper) increases it.The z value is the vertical acceleration(垂直加速度),ans so is 1 at rest,and decreases when the device is in motion.(It would be 0 with no gravity).

EventUtil.addHandler(window,'MozOrientation',function(event){
    var output=document.getElementById('output');
    output.innerHTML='X='+event.x+', Y='+event.y+', Z='+event.z+'<br>';
});

2.The deviceorientation Event
+①As of 2011,Safari for iOS 4.2+,Chrome,and WebKit for Android are the only implementations of the deviceorientation event.

EventUtil.addHandler(window,'deviceorientation',function(event){
    var output=document.getElementById('output');
    output.innerHTML='Alpha='+event.alpha+', Beta='+event.beta+', 
                      Gamma='+event.gamma+'<br>';
});

②这个事件的作用：了解设备在空间中朝向哪里。

+③devicemotion事件的作用：了解设备何时移动。只有iOS 4.2+中的Safari,Chrome和Andriod版WebKit实现了devicemotion事件。

EventUtil.addHandler(window,'devicemotion',function(event){
    var output=document.getElementById('ouput');
    if(event.rotationRate !== null){
        output.innerHTML +='Ahpha=' +event.rotationRate.alpha +', 
            Beta='+event.rotationRate.beta
        +', Gamma=' +event.rotationRate.gamma;
    }
});

3.Touch and Gesture Event
①触摸事件：
a)touchstart：当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上。
b)touchmove：当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用preventDefault()可以阻止其滚动。
c)touchend：当手指从屏幕上移开时触发。
d)touchcancel：当系统停止跟踪触摸时触发。

+②除了常见的DOM属性外，触摸事件还包含三个用于跟踪触摸的属性：
a)touches：表示当前跟踪的触摸操作的Touch对象的数组。
b)targetTouches：特定于事件目标的Touch对象的数组。
c)changeTouches：表示自从上次触摸以来发生改变的Touch对象的数组。

③Safari for iOS,WebKit for Andriod,Dolfin for bada,BlackBerry WebKit for OS6+,Opera Mobile 10.1+,and Phantom browser for LG-propertary OSs all support touch events.Only Safari on iOS can support multiple touches at once.Both Firefox 6+ and Chrome on the desktop also support touch events.

④iOS 2.0中的Safari引入了一组手势事件。当两个手指触摸屏幕时就会产生手势，手势通常会改变显示项的大小，或者旋转显示项：
a)gesturestart：当一个手指已经按在屏幕上而另一个手指又触摸屏幕时触发。
b)gesturechange：当触摸屏幕的任何一个手指的位置发生变化时触发。
c)gestureend：当任何一个手指从屏幕上移开时触发。

⑤There is a relationship between the touch and the gesture events.When a finger is placed on the screen,the touchstart event fires.When another finger is places on the screen,the gesturestart event fires first and is followed by the touchstart event for that finger.If one or both of the fingers are moved,a gesturechange event is fires.As soon as one of the fingers is removed,the gestureend event fires,followed by touchend for that finger.

function handleTouchEvent(event){
    //只跟踪一次触摸
    if(event.touches.length==1){
        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.changeTouched[0].clientX + ','+
                    event.changeTouched[0].clientY + ")";
            break;

            case 'touchmove':
                event.preventDefault();//阻止滚动
                output.innerHTML += "<br>Touch moved(" +
                    event.changeTouched[0].clientX + ','+
                    event.changeTouched[0].clientY +")";
            break;
        }
    }
}
EventUtil.addHandler(document,'touchstart',handleTouchEvent);
EventUtil.addHandler(document,'touchend',handleTouchEvent);
EventUtil.addHandler(document,'touchmove',handleTouchEvent);

+⑥As with touch events,each gesture event object contains all of the standard mouse event properties:bubbles/cancelable/view/clientX/clientY/screenX/screenY/shiftKey/ctrlKey/altKey/metaKey.The two additions to the event object are rotation and scale.The rotatio property indicates the degrees of rotation that the fingers have changed,where negative numbers indicate a counterclockwise(逆时针) rotation and positive numbers indicate clockwise(顺时针) rotation(the value begins as 0).The scale property indicates how much of a distance change occurred between the fingers(making a pinch motion向内收缩).This starts out as 1 and will either increase as the distance increases or decreases as the distance decreases.

function handleGestureEvent(event){
    var output=document.getElementById('output');
    switch(event.type){
        case 'gesturestart':
        output.innerHTML="Gesture started 
        (rotation= " +event.rotation +",scale= " +event.scale+")";
        break;

        case 'gestureend':
        output.innerHTML += "<br>Gesture ended 
        (rotation ="+event.rotation +",scale= "+event.scale+")";
        break;

        case 'gesturechange':
        output.innerHTML += "<br> Gesture changed
        (rotation=" +event.rotation+",scale= "+event.scale+")";
        break;
    }
}
document.addEventListener('gesturestart',handleGestureEvent,false);
document.addEventListener('gestureend',handleGestureEvent,false);
document.addEventListener('gesturechange',handleGestureEvent,false);

4.Memory and Peformance（内存和性能）
①在JS中，添加的事件处理程序的数量直接导致页面的性能问题：
a)每个函数都是对象，内存中的对象越多，加载的时间越长，导致性能越差。
b)必须事先指定所有事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪事件。

+②

<ul id='myLinks'>
    <li id='goSomewhere'>Go somewhere</li>
    <li id='doSomething'>Do something</li>
    <li id='sayHi'>say Hi</li>
</ul>


//传统方法:每个目标元素分别设置一个事件处理程序，也就是访问三次DOM,三个事件处理程序
var item1=document.getElementById('goSomewhere');
var item2=document.getElementById('doSomething');
var item3=document.getElementById('sayHi');

EventUtil.addHandler(item1,'click',function(event){
    location.href='http://www.baidu.com';
});

EventUtil.addHandler(item2,'click',function(event){
    document.title="I changed the document's title";
});

EventUtil.addHandler(item3,'click',function(event){
    alert('Hi yyc');
});


//advanced：将同一个父元素下的子元素聚集起来，用一个事件处理程序来处理它们，访问一次DOM，一个事件处理程序
var list=document.getElementById('myLinks');

EventUtil.addHandler(list,'click',function(event){
    event=EventUtil.getEvent(event);
    var target=EventUtil.getTarget(event);
    //不同的子元素通过它们不同的id来区分
    switch(target.id){
        case 'goSomewhere':
            location.href='http://www.baidu.com';
        break;
        case 'doSomething':
            document.title='yyc';
        break;
        case 'sayHi':
            alert('say yyc');
        break;
    }
});

③移除事件处理程序的两种情况：
a)从文档中移除带有事件处理程序的元素时。如：removeChild()，replaceChild()
+b)使用innerHTML替换页面中某一部分。

<div id='myDiv'>
    <input type='button' value='Click Me' id='myBtn'>
</div>

var btn=document.getElementById('myBtn');
btn.onclick=function(){
    //do something
    //导致onclick事件处理程序孤苦伶仃得被遗忘在内存中
    document.getElementById('myDiv').innerHTML='yyc';
};

//should be
var btn=document.getElementById('myBtn');
btn.onclick=function(){
    //do something
    //释放掉dangling event handler(空事件处理程序)
    btn.onclick=null;
    document.getElementById('myDiv').innerHTML='yyc';
};

5.DOM Event Simulation
①An event object can be created at any time by using the createEvent() method on document.This method accepts a single argument,which is a string indicating the type of event to create.In DOM Level 2,all of these strings were plural(复数形式),while DOM Level 3 changed them to singular(单数).The string may be one of the following:
a)UIEvents—Generic(一般的) UI event.Mouse Mouse events and keyboard events inherit from UI events.For DOM Level 3,use UIEvent.
b)MouseEvents—-Generic mouse event.For DOM Level 3,use MouseEvent.
c)MutationEvents—-Generic DOM mutation event.For DOM Level 3,use MutationEvent.
d)HTMLEvents—-Generic HTML event.There is no equivalent DOM Level 3(HTML events were dispersed(分散) into other groupings).

+②模拟鼠标事件：createEvent()传入字符串”MouseEvents”，返回的对象有一个名为initMouseEvent()方法。

var btn=document.getElementById('myBtn');
//创建一个鼠标事件的事件对象
var event=document.createEvent('MouseEvents');
/*
1.type（字符串）:要出发的事件类型，如'click'。
2.bubbles（布尔值）:事件是否冒泡。
3.cancelable（布尔值）:事件是否可以取消。
4.view（AbstractView）:与事件关联的视图。
5.detail（整数）：与事件相关的详细信息。
6.screenX：事件相对于屏幕的X坐标。
7.screenY：事件相对于屏幕的Y坐标。
8.clientX：事件相对于视口的X坐标。
9.clientY：事件相对于视口的Y坐标。
10.ctrlKey（布尔值）：是否按下了Ctrl键。默认为false。
11.altKey
12.shiftKey
13.metaKey
14.button（整数）：表示按下了哪个鼠标键，默认值为0
15.relatedTarget（对象）：表示事件相关的对象，仅在mouseover/mouseout时使用。
*/
event.initMouseEvent('click',true,true,document.defaultView,0,0,0,0,0,
    false,false,false,false,0,null);
//触发事件---dispatch派遣，调度
btn.dispatchEvent(event);

+③模拟键盘事件：DOM Level 3—createEvent()传入字符串”KeyboardEvent”，返回的对象有一个名为initKeyboardEvent()方法。

var textbox=document.getElementById('myTextbox');
//以DOM 3级方式创建事件对象
if(document.implementation.hasFeature('KeyboardEvent','3.0')){
    event=document.createEvent('KeyboardEvent');
    /*
    1.type(字符串)：要触发的事件类型。
    2.bubbles(布尔值)
    3.cancelable(布尔值)
    4.view(Abstract View)
    5.key(字符串)
    6.location(整数)：表示按下了哪里的键。0--默认的主键盘/1--左/2--右/3--数字键盘/4--移动设备/5--手柄
    7.modifiers(字符串)：空格分隔的修改键列表，如'Shift'。
    8.repeat(整数)：在一行中按了这个键多少次。
    */
    event.initKeyboardEvent('keydown',true,true,document.defaultView,
        'a',0,'Shift',0);
    //模拟了按下Shift的同时又按下了A键。
}
textbox.dispatchEvent(event);

+④在Firefox中，调用createEvent()传入字符串”KeyEvents”就可以创建一个键盘事件。返回的事件对象包含一个initKeyEvent()方法。

var textbox=document.getElementById('myTextbox');
var event=document.createEvent('KeyEvents');
/*
 1.type(字符串)：要触发的事件类型。
 2.bubbles(布尔值)
 3.cancelable(布尔值)
 4.view(Abstract View)
 5.ctrlKey(布尔值)
 6.altKey(布尔值)
 7.shiftKey(布尔值)
 8.metaKey(布尔值)
 9.keyCode(整数)：被按下或释放键的键码。这个参数对keydown和keyup事件有用，默认值为0.
 10.charCode(整数)：通过按键生成的字符的ASCll编码。这个参数对keypress事件有用，默认值为0.
*/
event.initKeyEvent('keypress',true,true,document.defaultView,false,false，false，false，65,65);
textbox.dispatchEvent(event);

⑤UI事件不允许向event对象中再添加新属性（Safari除外）。

+⑥自定义DOM事件

var div=document.getElementById('myDiv');
var event;

EventUtil.addHandler(div,'myevent',function(event){
    alert('Div: '+event.detail);
});
EventUtil.addHandler(document,'myevent',function(event){
    alert('Document: '+event.detail);
});

if(document.implementation.hasFeature('CustomEvent','3.0')){
    event=document.createEvent('CustomEvent');
    //该事件返回的对象有个initCustoEvent()的方法接收四个参数：type/bubbles/cancelable/detail
    event.initCustomEvent('myevent',true,false,'Hello yyc.');
    //触发事件
    div.dispatchEvent(event);
}

+⑦IE中的事件模拟：The createEventObject() method of document creates an event object.Unlike the DOM,this method accepts no arguments and returns a generic event object.After that,you must manually assign all of the properties that you want to have on the object.(There is no method to do this).The last step is to call fireEvent() on the target,which accepts two arguments:the name of the event handler and the event object.When fireEvent() is called,the srcElement and type properties are automatically assigned to the event object;all other properties must be manually assigned.This means that all events that IE supports are simulated using the same algorithm.

var btn=document.getElementById('myBtn');
//创建事件对象---createEventObject
var event=document.createEventObject();
//初始化事件对象
event.screenX=100;
event.screenY=0;
event.clientX=0;
event.clientY=0;
event.ctrlKey=false;
event.altKey=false;
event.shiftKey=false;
event.metaKey=false;
event.button=0;
//触发事件--fireEvent--两个参数（事件处理程序的名称/event对象）
btn.fireEvent('onclick',event);

【canvas】
6.basic usage(基本用法)
①The <canvas> element requires at least its width and height attributes to be set in order to indicate the size of the drawing to be created.

@@@+②To begin drawing on a canvas,you need to retrieve a drawing context.A reference to a drawing context is retrieved using the getContext() method and passing in the name of the context.For example,passing ‘2d’ retrieved a 2D context object.

var drawing=document.getElementById('drawing');
//确认<canvas>元素的getContext()方法是否存在&确定浏览器支持<canvas>元素
if(drawing.getContext){
    var context=drawing.getContext('2d');
    //more codes here
}

③描边线条的宽度由lineWidth属性控制，该属性的值可以是任意整数。通过lineGap属性可以控制线条末端的形状是平头（butt）、圆头（round）还是方头（square），通过lineJoin属性可以控制线条相交的方式是圆交（round）、斜交（bevel）还是斜接（miter）

7.Drawing Paths
@+①要绘制路径，首先必须调用beginPath()方法，表示要开始绘制新路径。然后，通过调用一些方法来实际绘制路径。
a)arcTo(x1,y1,x2,y2,radius)：从上一点开始绘制一条弧线，到(x2,y2)为止，并且以给定的半径radius穿过(x1,y1)。
b)bezierCurveTo(c1x,c1y,c2x,c2y,x,y)【贝塞尔曲线】：从上一点绘制一条曲线，到(x,y)为止，并以(c1x,c1y)和(c2x,c2y)作为控制点。
c)quadraticCurveTo(cx,cy,x,y)【二次方程式曲线】：从上一点开始绘制一条二次曲线，到(x,y)为止。并以(cx,cy)作为控制点。
d)rect(x,y,width,height)：以点(x,y)开始绘制一个矩形，宽度和高度分别有width和height指定。该方法绘制的是矩形路径，而不是strokeRect()和fillRect()所绘制的独立的形状。

②isPointInPath()方法：接收x,y坐标作为参数，用于在路径被关闭前确定画布上的某点是否位于路径上。