js 事件1

绑定事件

1. 绑定到对象上，句柄式 div.onclick = function() {};
2. 利用方法添加，封装兼容性函数如下：

<!-- 绑定事件 -->
function addEvent(elem, type, handle) {
	if(elem.addEventListener) {
		elem.addEventListener(type, handle, false);
	}else if(elem.attachEvent) {
		elem.attachEvent('on' + type, function () {
			handle.call(elem);
		})
	}else{
		elem['on' + type] = handle;
	}
}

解除事件

1. 句柄式： div.onclick = null 解除对象引用即可；
2. removeEventListener('click', test, false) detachEvent('onclick', test)

事件处理模型

• 冒泡  子元素---->父元素   比如：点击子元素，先执行子元素上的事件，然后执行父元素上的事件
• 捕获   父元素----->子元素  比如：点击子元素，先执行父元素上的事件，然后执行子元素上的事件
• 触发事件，会先执行捕获再执行冒泡
• div.addEventListener('click', test, false)  false表示采用冒泡处理模型， true表示采用捕获处理模型
• 取消冒泡，封装函数如下：

/** 
* @description 阻止冒泡 
* @param e 事件对象 
*/
function stopBubble(e) {
	if(e.stopPropagation) {
		e.stopPropagation();
	}else{
        //IE
		e.cancelBubble = true;
	}
}

取消默认事件

1. 以对象属性方式添加事件  div.oncontextmenu = function () {return false;}
2. 封装函数

/** 
* @description 取消默认事件
* @param e 事件对象 
*/
function cancelHandler(e) {
	if(e.preventDefault) {
		e.preventDefault();
	}else{
		e.returnValue = false;
	}
}

注：

// href="javascript: void()"原理类似于return false，作用也是阻止默认事件
<a href="javascript: void()">demo</a>

 事件对象

1. 事件对象兼容   var e = e || window.event
2. 事件源对象  var target = e.target || e.srcElement
3. 事件委托     利用事件冒泡和事件源对象，将子元素的事件委托到父元素上，从而简化操作

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>
<script>
    var ul = document.getElementsByTagName("ul")[0];
	ul.onclick = function(e) {
		var e = e || window.event;
		var target = e.target || event.srcElement;
		console.log(target.innerText);
	}
</script>

从而可以打印出点击每个元素时相应的文字