JS中的事件流:
三个阶段:捕获 => 目标 => 冒泡
自body出发,一路朝着并到达目标元素,然后原路返回到body
一路上,每个元素最多被触发一次
低IE的元素只能在后半程触发:自目标元素到body
其他:可自定义
可以阻断事件流的传递
事件处理形式:事件动态绑定、事件静态绑定
直接在HTML元素上绑定函数 函数实参由绑定时传入函数括号内的变量 ? 实参this:该HTML元素 可直接传入 event
监听函数的this是绑定该函数的元素 实参:event, 低版本IE 没有实参 on+eventType 只能绑定一个,后面的会覆盖前面的
现代浏览器与低IE
低IE:IE9以下--不支持addEventListener
方法
其他:addEventListener/removeEventListener
低IE:(attachEvent/detachEvent)
执行顺序: 9个内是倒序 , 超过9个会乱
方法可被重复绑定
在所有浏览器中,如果用DOM0的方式来绑定,方法里面用return false也可以阻止默认行为的;这个是可以阻止DOM0的,如果是DOM2级的就不可以了
var event = (function () { var listener = function (ele, type, fn) { (listener = ele.addEventListener ? niceListener : IEListener )(ele, type, fn); }; var remove = function (ele, type, fn) { (remove = ele.removeEventListener ? niceRemove : IERemove )(ele, type, fn); }; return { listener: listener, remove: remove } })(); ? function IERemove(ele, type, fn) { var eventCbArr = ele["handleEvent" + type], i = 0, len = eventCbArr.length; if (eventCbArr && len) { for (; i < len; i++) { if (eventCbArr[i] == fn) { return eventCbArr.splice(i, 1); } } } } ? function IEListener(ele, type, fn) { eventPush(getEventList(ele, type), fn); return ele; } function eventPush(eventCbArr, fn) { for (var i = 0; i < eventCbArr.length; i++) { if (eventCbArr[i] == fn) { return; }; } eventCbArr.push(fn); } function getEventList(ele, type) { if (!ele["handleEvent" + type]) { ele.attachEvent("on" + type, function () { runCb(ele, eventHandle(e)); }); } return ele["handleEvent" + type]; } function runCb(elm, event) { var ary = elm["handleEvent" + event.type]; ? for (var i = 0; i <= ary.length;) { var cb = ary[i]; if (typeof cb === "function") { cb.call(elm, e); // 监听函数的this i++; } else { ary.splice(i, 1); } } } //不再額外考虑 IE 678 的兼容 function eventHandle(e) { e = window.event; e.target = e.srcElement; e.pageX = (document.documentElement.scrollLeft || document.body.scrollLeft) + e.clientX; e.pageY = (document.documentElement.scrollTop || document.body.scrollTop) + e.clientY; e.stopPropagation = function () { e.cancelBubble = true; } // 阻止事件进一步传播 e.preventDefault = function () { e.returnValue = false; } // 阻止事件的默认行为: return e; } ? function niceRemove(ele, type, fn) { ele.removeEventListener(type, fn); return ele; } function niceListener(ele, type, fn) { ele.addEventListener(type, fn, false); return ele; }
原文:https://www.cnblogs.com/nwamtf/p/12588368.html