DOM選擇器
html5為了我們提供了一個非常好的DOM選擇器，就是document.querySelector和document.querySelectorAll這兩個方法，這兩個方法在android2.1+以及ios3+以后，都可以使用，其接受的參數為css選擇器。在實際web開發中，有一部大部分工作會用到DOM的操作，通過這個神器，可以解決大多數的DOM的操作。建議大家使用的時候，可以多多使用這兩個方法。
其他的DOM的選擇器的兼容性并不是太好，建議不要使用。
庫和框架
對于jquery大家應該比較的熟悉，在web手機上也有一個輕量級的類庫工具，那就是Zepto，它的很多api接口保持和jquery的接口兼容，其體積非常小，gzip的包在10k左右，非常適合在手機上的無線環境中加載。建議大家在使用類庫的時候，推薦使用，其api地址為:http://zeptojs.com/
對于框架，我們熟悉的Angular以及比較新的vue、react等也都可以使用
click的300ms延遲響應
說到移動開發，不得不說一下這個click事件，在手機上被叫的最多的就是點擊的反應慢，就是click惹出來的事情。情況是在這樣，在手機早期，瀏覽器有系統級的放大和縮小的功能，用戶在屏幕上點擊兩次之后，系統會觸發站點的放大/縮小功能。不過由于系統需要判斷用戶在點擊之后，有沒有接下來的第二次點擊，因此在用戶點擊第一次的時候，會強制等待300ms，等待用戶在這個時間內，是否有用戶第二次的提交，如果沒有的話，就會click的事件，否則就會觸發放大/縮小的效果。
這個設計本來沒有問題，但是在絕大多數的手機操作中，用戶的單擊事件的概率大大大于雙擊的，因此所有用戶的點擊都必須要等300ms，才能觸發click事件，造成給用戶給反應遲鈍的反應，這個難以解決。業界普遍解決的方案是自己通過touch的事件完成tap，替代click。不過tap事件來實際的應用中存在下面所說的問題。
好消息是，就是手機版chrome21.0之后，對于viewport width=device-width，并且禁止縮放的設置，click點擊取消了300ms的強制等待時間，這個會使web的響應時間大大提升。但ios仍然存在這個問題。
移動事件
javascript有很多用戶交互相關事件，在移動上有一些比較特有的事件，大家在日常開發中，可能會接觸到，這些事件的特性，這里說一下：
- orientationchange 這個事件是在當設備發生旋轉的時候，發生的事件。這個在某些場合會非常的實用。
- touchstart、touchmove、touchend、touchcancel等四個觸摸事件，在所有移動web的中，都支持這四個事件。通過這兩個事件，可以模擬出各種用戶的手勢，不過由于其處理比較復雜，可能模擬最多的是tap事件。很多web移動類庫，都有tap的事件的實現，不過從實踐中，tap都不是處理的很好，tap的主要問題，有兩個，一個是tap和滾動同時觸發的時候，往往會觸發tap事件，二是tap的敏感度，經常會失誤觸發tap。
- scroll事件 這個事件在PC上的觸發時機和手機上的觸發時機不同，scroll事件在手機上，只有在滾動停止的時候才會發生,因此這個事件在移動端用的比較少，因為觸發的時機已經晚了。對于需要在移動中，改變頁面結構的功能，用scroll是無法完成的。
手勢事件
- touchstart //當手指接觸屏幕時觸發
- touchmove //當已經接觸屏幕的手指開始移動后觸發
- touchend //當手指離開屏幕時觸發
- touchcancel
觸摸事件
- gesturestart //當兩個手指接觸屏幕時觸發
- gesturechange //當兩個手指接觸屏幕后開始移動時觸發
- gestureend
屏幕旋轉事件
- onorientationchange
檢測觸摸屏幕的手指何時改變方向
- orientationchange
touch事件支持的相關屬性
- touches
- targetTouches
- changedTouches
- clientX // X coordinate of touch relative to + the viewport (excludes scroll offset)
- clientY // Y coordinate of touch relative to + the viewport (excludes scroll offset)
- screenX // Relative to the screen
- screenY // Relative to the screen
- pageX // Relative to the full page (includes scrolling)
- pageY // Relative to the full page (includes scrolling)
- target // Node the touch event originated from
- identifier // An identifying number, unique to each touch event
- 屏幕旋轉事件：onorientationchange
判斷屏幕是否旋轉
function orientationChange() {
switch(window.orientation) {
case 0:
alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case -90:
alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case 90:
alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case 180:
alert("風景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
};};
添加事件監聽
addEventListener('load', function(){
orientationChange();
window.onorientationchange = orientationChange;
});
雙手指滑動事件：
// 雙手指滑動事件
addEventListener('load',
function(){window.onmousewheel = twoFingerScroll;},
false // 兼容各瀏覽器，表示在冒泡階段調用事件處理程序 (true 捕獲階段)
);
function twoFingerScroll(ev) {
var delta =ev.wheelDelta/120; //對 delta 值進行判斷(比如正負) ，而后執行相應操作
return true;
};
