js里跨浏览器事件监听

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>js中跨浏览器监听事件</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
    <script>
    function bindEvent(evt){ 
    	evt=evt||window.event;
    	var target=evt.target||evt.srcElement;//srcElement是ie中特有的反映触发事件目标元素的属性
    	alert(target.nodeName);
    }
    if(document.addEventListener){ //主流浏览器支持的事件绑定
    	document.addEventListener("click",bindEvent,false);
    }
    else if(document.attachEvent){  //ie支持的事件绑定
    	document.attachEvent("onclick",bindEvent);
    }
    else {
    	document.onclick=bindEvent;   //使用属性绑定事件,不会获得相关的事件参数(如event)
    }
    /*
		1、ie中没有addEventListener()方法,但是有一个attachEvent()的等效方法。对于早期的版本,我们就只能通过属性方法(例如onclick属性)来解决问题。
		2、对于单击事件来说,使用attachEvent()就等同于使用onclick属性
		3、如果我们使用老式手法来进行事件监听(例如,通过将某个函数赋值给onclick属性),那么当该回调函数被调用时,它不会获得相关的事件参数。但只要我们设置了事件监听器,ie中总会有一个全局对象window.event会指向该事件。
		4、在ie的事件对象中,没有用于反映触发事件目标元素的target属性,但我们可以使用它的等效属性srcElement。
		5、ie不支持事件捕捉法,而使用冒泡法来运作
		6、ie中没有stopPropagation()方法,我们可以通过将IE-only属性cancelBubble设置为true来完成相同的操作
		7、ie中没有preventDefault()方法,我们可以通过将IE-only属性returnValue设置为false来完成相同操作
		8、对于事件的取消监听操作,ie中使用的不是removeEventListener()方法,我们要调用的是detachEvent()方法。



    */
    </script>
</body>
</html>

你可能感兴趣的:(js里跨浏览器事件监听)