搞一个兼容浏览器的事件函数
生活随笔
收集整理的這篇文章主要介紹了
搞一个兼容浏览器的事件函数
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title>
</head><body><p id="demo"><a>點擊我將獲得節點1</a><a>點擊我將獲得節點2</a></p><script type="text/javascript">// event(事件)工具集eventUntil = {// 頁面加載完成后// 主要是原生JS，頁面只能加載一次window.onload；這里使用該方法可以綁定多個方法。readyEvent: function (fn) {if (fn == null) {fn = document;}var oldonload = window.onload;if (typeof window.onload != 'function') {window.onload = fn;} else {window.onload = function () {oldonload();fn();};}},// 視能力分別使用dom0||dom2||IE方式 來綁定事件// 下面的順序：標準dom2，IE dom2， dom// 參數： 操作的元素,事件名稱 ,事件處理程序addEvent: function (element, type, handler) {if (element.addEventListener) {//事件類型、需要執行的函數、是否捕捉element.addEventListener(type, handler, false);} else if (element.attachEvent) {element.attachEvent('on' + type, function () {handler.call(element);});} else {element['on' + type] = handler;}},// 移除事件removeEvent: function (element, type, handler) {if (element.removeEnentListener) {element.removeEnentListener(type, handler, false);} else if (element.datachEvent) {element.detachEvent('on' + type, handler);} else {element['on' + type] = null;}},// 阻止事件 (主要是事件冒泡，因為IE不支持事件捕獲)stopPropagation: function (ev) {if (ev.stopPropagation) {ev.stopPropagation();// 標準w3c} else {ev.cancelBubble = true;// IE}},// 取消事件的默認行為preventDefault: function (event) {if (event.preventDefault) {event.preventDefault();// 標準w3c} else {event.returnValue = false;// IE}},// 獲取事件目標getTarget: function (event) {// 標準W3C 和 IEreturn event.target || event.srcElement;},// 獲取event對象的引用，取到事件的所有信息，確保隨時能使用event；getEvent: function (e) {var ev = e || window.event;if (!ev) {var c = this.getEvent.caller;while (c) {ev = c.arguments[0];if (ev && Event == ev.constructor) {break;}c = c.caller;}}return ev;}};eventUntil.readyEvent(function () {console.log("相比于window.onload可以綁定多個 按順序執行。");})eventUntil.addEvent(document.getElementById("demo"), "click", function () {alert("我點擊了p元素")})</script>
</body></html>復制代碼
總結
以上是生活随笔為你收集整理的搞一个兼容浏览器的事件函数的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【记录一个问题】linux+opencv
- 下一篇： 2017年html5行业报告,云适配发布