JS事宜模子

事宜模子以及周边

• 事宜捕捉

• 事宜冒泡

• 事宜触发

• 挪动端事宜模仿

• 事宜托付

事宜流

事宜捕捉(event capturing)&事宜冒泡(event bubbling)

<div class="out">
    <p class="inner"></p>
</div>

给inner,out均绑定点击事宜.点击inner,假如out先实行,inner后实行.则是事宜捕捉.若inner先实行.out后实行则是事宜冒泡.(这两种模子来自于初期浏览器之争)

W3C模子

先事宜捕捉,抵达目的后再举行冒泡

示例演示

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)

点击inner后,实行递次: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)

点击inner后,实行递次: out clicked => inner clicked => document clicked

事宜模子

1.DOM0级事宜(默许发作在冒泡阶段.只能绑定一个事宜)

事宜绑定

 ele.onclick = function (){
     //
 }

事宜消除绑定

ele.onclick = null;

2.DOM2级事宜(默许发作在冒泡阶段,由第三个参数决议,可绑定多个事宜)

事宜绑定

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);

事宜对象

DOM事宜模子中的事宜对象经常使用属性:

• type用于猎取事宜范例

• target猎取事宜目的

• stopPropagation()阻挠事宜冒泡

• preventDefault()阻挠事宜默许行动

IE事宜模子中的事宜对象经常使用属性:

• srcElement猎取事宜目的

• cancelBubble阻挠事宜冒泡

• returnValue阻挠事宜默许行动

兼容处置惩罚

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
         }
    }
};

挪动端事宜

Touch事宜

touchstart:当手指触摸屏幕时触发；纵然已经有一个手指放在了屏幕上也会触发。
touchmove:当手指在屏幕上滑动时一连的触发。在这个事宜发作时期，挪用preventDefault()可阻挠转动

touchend:当手指从屏幕上移开时触发。
touchcancel:当体系住手跟踪触摸时触发。关于此事宜的确实触发事宜，文档中没有明白申明。
以上事宜的event对象上面都存在以下属性：
touches:示意当前跟踪的触摸操纵的Touch对象的数组。
targetTouches:特定于事宜目的的Touch对象的数组。
changeTouches:示意自上次触摸以来发作了什么转变的Touch对象的数组。

• 每一个Touch对象包括以下属性：
  identifier：示意触摸的唯一ID。

clientX:触摸目的在视口中的X坐标。
clientY:触摸目的在视口中的Y坐标。
pageX：触摸目的在页面中的x坐标。
pageY：触摸目的在页面中的y坐标。
screenX:触摸目的在屏幕中的x坐标。
screenY:触摸目的在屏幕中的y坐标。
target:触摸的DOM节点坐标

触发历程

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;
        })
};

事宜托付

把本应绑定在本身的事宜绑定到其他元素上来触发即事宜托付

//HTML
<ul id="ul">
    <li>a</li>
    <li>b</li>
</ul>

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