<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>如何绑定事件处理函数</title>
<style type="text/css"></style>
</head>
<body>
<div style=" 100px;height: 100px; background-color: red;"></div>
<script type="text/javascript">
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); //.call()方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)
})
}else{
elem['on'+type] = handle;
}
}
var div = document.getElementsByTagName('div')[0];
addEvent(div,'click',function () {
console.log('aaa')
})
addEvent(div,'click',function () {
console.log('bbb')
})
</script>
</body>
</html>
<strong>代码说明</strong>
<div><b>1.</b>obj.addEventListener(type,fn,false)IE9以下不兼容，可以为一个事件绑定多个处理程序</div>
<div><b>2.obj.attachEvent('on'+type,fn)</b>IE独有，一个事件同样可以绑定多个处理程序</div>
<div><b>3.</b>ele.onxxx=function(event){}兼容性很好，但是一个元素的同一个事件上只能绑定一个处理程序；基本等同于写在HTML行间上</div>
效果图：使用原生js，addEventListener,给每个li元素绑定一个click事件，输出他们的顺序?
1.obj.addEventListener(type,fn,false);
div.addEventListener(事件类型，处理函数，false);
如：div.addEventListener('click',function(){},false)