js 事件繫結
給一個物件繫結一個事件處理函式的第一種形式
obj.onclick = fn;
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<script type="text/javascript">
function fn1(){
alert(1);
}
function fn2(){
alert(2);
}
document.onclick = fn1;
document.onclick = fn2;//會覆蓋前面繫結的fn1
</script>
</head>
<body>
</body>
</html>
給一個物件的同一個事件繫結多個不同的函式
給一個元素繫結事件函式的第二種形式
ie:obj.attachEvent(事件名稱，事件函式); ie11不支援！！！！！
1.沒有捕獲
2.事件名稱有on
3.事件函式執行的順序：標準ie->正序 非標準ie->倒序
4.this指向window（見下面的用call解決）
標準：obj.addEventListener(事件名稱，事件函式，是否捕獲);
1.有捕獲
2.事件名稱沒有on
3.事件函式執行的順序：正序
4.this觸發該事件的物件
是否捕獲：預設false, false:冒泡 true：捕獲
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<script type="text/javascript">
function fn1(){
alert(1);
}
function fn2(){
alert(2);
}
document.addEventListener('click',fn1,false);
document.addEventListener('click',fn2,false);
</script>
</head>
<body>
</body>
</html>
ie:obj.attachEvent(事件名稱，事件函式); ie11不支援！！！！！
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<script type="text/javascript">
function fn1(){
alert(1);
}
function fn2(){
alert(2);
}
document.attachEvent('onclick',fn1);
document.attachEvent('onclick',fn2);
</script>
</head>
<body>
</body>
</html>
//call 函式下的一個方法，call方法第一個引數可以改變函式執行過程中的內部this的指向，call方法第二個引數開始就是原來函式的引數列表
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<script type="text/javascript">
function fn1(){
alert(this);
}
fn1.call();//呼叫函式 fn1() == fn1.call()
</script>
</head>
<body>
</body>
</html>
------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<script type="text/javascript">
function fn1(a,b){
alert(this);
alert(a+b);
}
fn1.call(1,10,20);
</script>
</head>
<body>
</body>
</html>
解決ie下指向window改為指向document
-----------------封裝--------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<script type="text/javascript">
function fn1(){
alert(this);
}
function bind(obj,evname,fn){
if(obj.addEventListener){
obj.addEventListener(evname,fn,false);
}else{
obj.attachEvent('on'+evname,function(){
fn.call(obj);
});
}
}
bind(document,'click',fn1);
</script>
</head>
<body>
</body>
</html>
