事件兼容 · 前端技術總結

> 沒有jquery情況下，使用原生js去寫一個事件是很煩的，各種兼容和封裝，結果還不一定能考慮的那么全，這時造輪子還不如使用現成的輪子，當然作為一個前端，即使不造，也要知道如何寫的，具體look at the following.. ## 一、事件兼容性 **1、添加事件** ~~~ // 其他：addEventListener // IE:attachEvent /* @param ele object(元素對象) @param type string(事件類型) @param handler function(處理函數) */ function addEventFn(ele, type, handler) { if(ele.addEventListener) { ele.addEventListener(type, handler, false); } else if(ele.attachEvent) { ele.attachEvent('on'+type, handler); } else { ele['on'+type] = handler; } } addEventFn(document.body, 'click', function(e) { // e是W3C標準，window.event針對ie瀏覽器 e = e || window.event; // 事件目標 var target = e.target || e.srcElement; // 阻止事件冒泡 if(e.stopPropagation) { e.stopPropagation(); // W3C標準 } else { e.cancelBuble = true; // 針對IE } // 阻止默認事件 if(e.preventDefault) { e.preventDefault(); // W3C標準 } else { e.returnValue = false; // 針對IE } }); ~~~ **2、刪除事件** ~~~ // 其他：removeEventListener // IE:detachEvent /* @param ele object(元素對象) @param type string(事件類型) @param handler function(處理函數) */ function removeEventFn(ele, type, handler) { if(ele.removeEventListener) { ele.removeEventListener(type, handler, false); } else if(ele.detachEvent) { ele.detachEvent('on'+type, handler); } else { ele['on'+type] = ''; } } function alertFn() { alert(1); } addEventFn(document.body, 'click', alertFn); removeEventFn(document.body, 'click', alertFn); ~~~ **3、觸發事件** ~~~ // W3C標準：dispatchEvent // 低版本IE：fireEvent(IE8及以下) function addEventFn(ele, type, handler) { if(ele.addEventListener) { ele.addEventListener(type, handler, false); } else if(ele.attachEvent) { ele.attachEvent('on'+type, handler); } else { ele['on'+type] = handler; } } addEventFn(document.body, 'click', function() { alert(1); }); /* @param ele object(元素對象) @param sort string(事件分類) @param type string(事件類型) */ function triggerEventFn(ele, sort, type) { if(ele.dispatchEvent) { var evt = document.createEvent(sort); evt.initEvent(type, true, true); // initEvent(eventType, canBubble, cancelable) ele.dispatchEvent(evt); } else { var evt = document.createEventObject(); ele.fireEvent('on'+type, evt); } } triggerEventFn(document.body, 'HTMLEvents', 'click'); ~~~ **4、滾輪事件** ~~~ // 其他：mousewheel // 火狐：DOMMouseScroll var mousewheel = document.mozHidden != false ? 'mousewheel' : 'DOMMouseScroll'; // document.mozHidden是firefox的私有屬性 addEventFn(document, mousewheel, function() { e = e || window.event; var delta = e.wheelDelta ? (e.wheelDelta / 120) : (- e.detail / 3); // 使滾輪滾動的值為1 if(delta > 0) { console.log('向上滾動'); } else { console.log('向下滾動'); } }); // jquery $('.box').on('mousewheel DOMMouseScroll', function(e) { var delta = e.originalEvent.wheelDelta ? (e.originalEvent.wheelDelta / 120) : (- e.originalEvent.detail / 3); if(delta < 0) { console.log('向下'); } else { console.log('向上'); } }); ~~~ **5、鼠標左中右事件** ~~~ // 阻止右鍵菜單 document.oncontextmenu = function(e) { e = window.event || event; if(e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } } // 鼠標點擊 document.body.onmousedown = function(e) { e = window.event || event; switch (e.button) { case 0: alert('點擊了左鍵'); break; case 1: alert('點擊了中鍵'); break; case 2: alert('點擊了右鍵'); break; default: alert('沒有效果'); break; } } ~~~ **6、DOM加載完成** ~~~ function ready(fn) { if (document.readyState != 'loading'){ fn(); } else if (document.addEventListener) { document.addEventListener('DOMContentLoaded', fn); } else { document.attachEvent('onreadystatechange', function() { if (document.readyState != 'loading') fn(); }); } } ~~~ **7、觸發事件** ~~~ if (document.createEvent) { var event = document.createEvent('HTMLEvents'); event.initEvent('change', true, false); el.dispatchEvent(event); } else { el.fireEvent('onchange'); } ~~~ ## 二、H5新出事件 **1、touch事件** ~~~ // 手指在box容器中點擊時的記錄 var startX, startY; $('.box').on("touchstart", function(e) { startX = e.originalEvent.changedTouches[0].pageX; // 記錄最初點擊時第一個觸摸點的x坐標 startY = e.originalEvent.changedTouches[0].pageY; // 記錄最初點擊時第一個觸摸點的y坐標 }); // 阻止touchmove時的box默認事件 $('.box').on('touchmove', function(e) { e.preventDefault(); }); // 記錄/操作當手指離開的操作 $('.box') $('.box').on("touchend", function(e) { var moveEndX = e.originalEvent.changedTouches[0].pageX; // 手指離開時的x坐標 var moveEndY = e.originalEvent.changedTouches[0].pageY; // 手指離開時的y坐標 var X = moveEndX - startX; // 離開時的x坐標 - 開始觸摸的x坐標 = 橫向偏移值 var Y = moveEndY - startY; // 離開時的y坐標 - 開始觸摸的y坐標 = 縱向偏移值 if ( Math.abs(X) > Math.abs(Y) && X > 0 ) { // 從左到右 alert("left 2 right"); } else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) { // 從右到左 alert("right 2 left"); } else if ( Math.abs(Y) > Math.abs(X) && Y > 0) { // 從上到下 alert("top 2 bottom"); } else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) { // 從下到上 alert("bottom 2 top"); } else{ alert("just touch"); } }); ~~~ **2、drag事件** 在拖動目標上觸發事件 (源元素): ondragstart - 用戶開始拖動元素時觸發 ondrag - 元素正在拖動時觸發 ondragend - 用戶完成元素拖動后觸發釋放目標時觸發的事件: ondragenter - 當被鼠標拖動的對象進入其容器范圍內時觸發此事件 ondragover - 當某被拖動的對象在另一對象容器范圍內拖動時觸發此事件 ondragleave - 當被鼠標拖動的對象離開其容器范圍內時觸發此事件 ondrop - 在一個拖動過程中，釋放鼠標鍵時觸發此事件 dataTransfer對象(了解就行了)： dropEffect 設置放下效果（copy move link none） effectAllowed 允許的效果 (copy move link copyLink copyMove linkMove allnone uninitialized(默認值，等同于all)) files FileList對象 setDragImage() setData() getData() clearData() 詳細 [【傳送門】](https://segmentfault.com/a/1190000007336316)