绑定事件
- onclick，无兼容性问题，但是多次绑定会互相覆盖
e.onclick = null; // 解绑时，设置为null即可
- addEventListener，w3c的标准方式，如果绑定多次不会互相覆盖
e.removeEventListener(event.type, handle, boolean); // 解绑参数与绑定相同
- attachEvent，IE的独有方式，绑定多次不会互相覆盖，只在冒泡阶段触发
e.detachEvent(event.type, handle); // 解绑
兼容的事件绑定方法
function addEvent(ele, event, handle, bool) {
if(ele.addEventListener) {
ele.addEventListener(event, handle, bool);
} else if(ele.attachEvent) {
ele.attachEvent("on"+event, handle);
} else {
ele["on"+event] = handle;
}
}
兼容的事件解绑方法
function removeEvent(ele, event, handle, bool) {
if(ele.removeEventListener) {
ele.removeEventListener(event, handle, bool);
} else if(ele.detachEvent) {
ele.detachEvent("on"+event, handle);
} else {
ele["on"+event] = null;
}
}
阻止默认事件
- onclick => return false;
- addEventListener => event.preventDefault(); // event = e || window.event;
- attachEvent => event.returnValue = false;
阻止事件冒泡与捕获
- 标准：event.stopPropagation();
- IE：event.cancelBubble = true;
事件委托
先将事件绑定到父元素，然后再根据e.target或e.srcElement确定实际触发事件的子元素，而后进行相应的操作。
触发事件
var ele = document.body;
var event = document.createEvent("HTMLEvents");
event.initEvent("scroll", true, false);
ele.dispatchEvent(event);
- createEvent的参数包括五种：
Events：包括所有事件
UIEvents：包括DOMActivate, DOMFocusIn, DOMFocusOut, keydown, keypress, keyup 以及 所有MouseEvents
HTMLEvents：包括abort, blur, change, error, focus, scroll, load, reset, select, submit, unload
** MouseEvents：包括click, mousedown, mousemove, mouseover, mouseout, mouseup
** MutationEvents：都不常用就不列举了 - 需要通过initEvent初始化
HTMLEvents和Events：initEvent(type, bubbles, cancelable);
** UIEvents：initUIEvent(type, bubbles, cancelable, windowObject, detail);
** MouseEvents：initMouseEvent(type, bubbles, cancelable, windowObject, detail, screenX, screenY, clientX, clientY, ctrlKey, altKey, shiftKey, metaKey, button, relatedTarget);
** MutationEvents：**initMutationEvent(type, bubbles, cancelable, relatedNode, prevValue, newValue, attrName, attrChange); - 最后使用dispatchEvent来触发
- 若是IE浏览器，可以跳过前三步，直接使用el.fireEvent(type)来触发
