莫克力学习博客

JavaScript事件处理机制

js事件流分为事件捕获流与事件冒泡流
事件捕获是从DOM树最顶部元素到相应元素
事件冒泡是从相应元素到DOM树最顶部元素

现在W3C标准合并了两种流，DOM标准同时支持两种事件模型，即捕获型事件与冒泡型事件，但是，捕获型事件先发生。两种事件流都会触发DOM中的所有对象，从document对象开始，也在document对象结束

但是，对于IE8及更低版本IE，不支持捕获阶段，因此捕获阶段的事件监听目前尚不通用。

事件处理方法形式

1
2
3
4
5
function eventHandler(e) {  
    e = e || window.event;  
    var target = e.target || e.srcElement;  
    ... ...  
}

注册事件监听方法

  • 直接写在HTML的DOM元素的属性里
    1
    <button id="btn" onclick="alert(123)">CLICK</button>
  • 在Javascript中，赋值给相应的DOM元素
    1
    document.getElementById('btn2').onclick = eventHandler;
  • addEventListener || attachEvent
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    var EventUtil = {
    	addHandler: function(element, type, handler) {
    		if (element.addEventListener) {
    			element.addEventListener(type, handler, false);
    		} else if (element.attachEvent) {
    			element.attachEvent("on" + type, handler);
    		} else {
    			element["on" + type] = handler;
    		}
    	},
    	getEvent: function(event) {
    		return event ? event : window.event;
    	},
    	getTarget: function(event) {
    		return event.target || event.srcElement;
    	}
    };
    这里第三个参数是标识何时触发eventHandler，false表示在事件起泡阶段触发，true表示在事件捕获阶段触发。因为在IE8即更低版本不支持事件捕获，因此不经常使用true。
    可以给同一个控件调用多次此注册方法，注册多个handler。
    removeEventListener与之对应。
    在IE8及更低版本IE中，使用attachEvent方法

阻止浏览器默认操作

  • 对于通过第一种、第二种方法注册的监听方法： return false
  • 对于通过第三种方法注册的监听方法，返回值无效，可以通过event.preventDefault()来阻止浏览器的默认操作。对于IE8即更低版本IE，不支持preventDefault方法，只能通过event.returnValue=false来实现。
    对于阻止事件冒泡：e.stopPropagation();