摘要：在這個(gè)事件發(fā)生期間，調(diào)用可阻止?jié)L動(dòng)當(dāng)手指從屏幕上移開時(shí)觸發(fā)。關(guān)于此事件的確切觸發(fā)事件，文檔中沒有明確說明。特定于事件目標(biāo)的對(duì)象的數(shù)組。

事件模型以及周邊

事件捕獲

事件冒泡

事件觸發(fā)

移動(dòng)端事件模擬

事件委托

給inner,out均綁定點(diǎn)擊事件.點(diǎn)擊inner,如果out先執(zhí)行,inner后執(zhí)行.則是事件捕獲.若inner先執(zhí)行.out后執(zhí)行則是事件冒泡.(這兩種模型來自于早期瀏覽器之爭)

先事件捕獲,到達(dá)目標(biāo)后再進(jìn)行冒泡

out.addEventListener("click", (e) => {
   console.log("out clicked! ")
}, true)
inner.addEventListener("click", (e) => {
    console.log("inner clicked! ")
}, false)
document.addEventListener("click", (e) => {
    console.log("document clicked! ")
}, true)

點(diǎn)擊inner后,執(zhí)行順序:document clicked => out clicked => inner clicked

out.addEventListener("click", (e) => {
   console.log("out clicked! ")
}, true)
inner.addEventListener("click", (e) => {
    console.log("inner clicked! ")
}, false)
document.addEventListener("click", (e) => {
    console.log("document clicked! ")
}, false)

點(diǎn)擊inner后,執(zhí)行順序: out clicked => inner clicked => document clicked

 ele.onclick = function (){
     //
 }

ele.onclick = null;

ele.addEventListener(eventType, handler, useCapture)//eventType不帶on,如click
//IE下用attachEvent
ele.attachEvent(eventType, handler);

ele.removeEventListener(eventType, handler, useCapture)
//IE下使用detachEvent
ele.detachEvent(eventType, handler);

type用于獲取事件類型

target獲取事件目標(biāo)

stopPropagation()阻止事件冒泡

preventDefault()阻止事件默認(rèn)行為

srcElement獲取事件目標(biāo)

cancelBubble阻止事件冒泡

returnValue阻止事件默認(rèn)行為

var eventUtil = {
    addEvent: function(ele, event, func, bool) {
        bool = bool || false;
        if (ele.addEventListener) {
            ele.addEventListener(event, func, bool)
        } else {
            ele.attachEvent("on" + event, func, bool);
        }
    },
    removeEvent: function(ele, event, func, bool) {
        bool = bool || false;
        if (ele.removeEventListener) {
            ele.removeEventListener(event, func, bool);
        } else {
            ele.detachEvent("on" + event, func, bool);
        }
    },
    getEvent: function(event) {
        return event || window.event;
    },
    getTarget: function(event) {
        return event.target || event.srcElement;
    },
    preventDefault:function (event) {
         if (event.preventDefault) {
            event.preventDefault();
         }else {
             event.returnValue = false;//IE
         }
    },
    stopPropagation:function  (event) {
         if (event.stopPropagation) {
            event.stopPropagation();
         } else {
             event.cancelBubble = true;//IE
         }
    }
};

touchstart:當(dāng)手指觸摸屏幕時(shí)觸發(fā)；即使已經(jīng)有一個(gè)手指放在了屏幕上也會(huì)觸發(fā)。
touchmove:當(dāng)手指在屏幕上滑動(dòng)時(shí)連續(xù)的觸發(fā)。在這個(gè)事件發(fā)生期間，調(diào)用preventDefault()可阻止?jié)L動(dòng)

touchend:當(dāng)手指從屏幕上移開時(shí)觸發(fā)。
touchcancel:當(dāng)系統(tǒng)停止跟蹤觸摸時(shí)觸發(fā)。關(guān)于此事件的確切觸發(fā)事件，文檔中沒有明確說明。
以上事件的event對(duì)象上面都存在如下屬性：
touches:表示當(dāng)前跟蹤的觸摸操作的Touch對(duì)象的數(shù)組。
targetTouches:特定于事件目標(biāo)的Touch對(duì)象的數(shù)組。
changeTouches:表示自上次觸摸以來發(fā)生了什么改變的Touch對(duì)象的數(shù)組。

每個(gè)Touch對(duì)象包含下列屬性：
identifier：表示觸摸的唯一ID。

clientX:觸摸目標(biāo)在視口中的X坐標(biāo)。
clientY:觸摸目標(biāo)在視口中的Y坐標(biāo)。
pageX：觸摸目標(biāo)在頁面中的x坐標(biāo)。
pageY：觸摸目標(biāo)在頁面中的y坐標(biāo)。
screenX:觸摸目標(biāo)在屏幕中的x坐標(biāo)。
screenY:觸摸目標(biāo)在屏幕中的y坐標(biāo)。
target:觸摸的DOM節(jié)點(diǎn)坐標(biāo)

touchstart =>touchmove =>touchend =>click(延遲300~200ms)

Tap事件封裝原理:利用touchstart =>touchmove =>touchen模擬click

HTMLElement.prototype.tap = function (handler,interval) {
     that = this
     this.isMove = false,
     this.startTime = 0,
     this.addEventListener("touchstart",function(e){
            startTime = Date.now();
        }),
     this.addEventListener("touchmove",function(e){
            isMove = true;
        }),
     this.addEventListener("touchend",function(e){
            if(!this.isMove && (Date.now()-startTime) < interval){
                handler();
            }
            this.isMove = false;
            this.startTime = 0;
        })
};

把本應(yīng)綁定在自身的事件綁定到其他元素上來觸發(fā)即事件委托

//HTML

    
a
    
b


//JS
    var oUl = document.getElementById("ul");
    oUl.onmouseover = function(ev){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        if((/li/i).test(target.nodeName)){
        target.style.background = "red";
        }
    }
    oUl.onmouseout = function(ev){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        if((/li/i).test(target.nodeName)){
             target.style.background = "";
        }
    }
//JS