event: 事件對象警医，當(dāng)一個事件發(fā)生的時候，和當(dāng)前這個對象發(fā)生的這個事件有關(guān)的一些詳細(xì)信息都會被臨時保存到一個指定的地方-event對象，供我們在需要的時候調(diào)用滔迈。
事件對象必須在一個事件調(diào)用的函數(shù)里面使用才有內(nèi)容
事件函數(shù)：事件調(diào)用的函數(shù)揩懒，一個函數(shù)是不是事件函數(shù)什乙，不在定義的時候決定，而是取決于誰調(diào)用這個函數(shù)已球。
function f1(){
alert(event);
}
f1();
document.onclick=f1;
//給一個對象綁定一個事件處理函數(shù)的第一種形式
注意兼容：ie/chrome ：event是一個內(nèi)置的全局變量
標(biāo)準(zhǔn)下的瀏覽器:事件對象是通過事件函數(shù)的第一個參數(shù)傳入的臣镣。（非標(biāo)準(zhǔn)瀏覽器ie 6 、7不支持智亮，非標(biāo)準(zhǔn)支持event）忆某；
如果一個函數(shù)是被事件調(diào)用的，那么阔蛉，這個函數(shù)定義的第一個參數(shù)就是事件對象弃舒。下列案例中a就是事件對象
function f1(a){
alert(a);
}
document.onclick=f1;
兼容寫法
function f1(a){
var a=a || event;
for(var attr in a){
console.log('屬性：'+attr+'值：'+a[attr]);
}
}
document.onclick=f1;
clientX、clientY：當(dāng)一個事件發(fā)生的時候状原，鼠標(biāo)到頁面可視區(qū)域的距離
var i=0;
document.onmousemove= function (ev) {
document.title=i++;
};
var div1=document.getElementById('div1');
document.onmousemove= function (ev) {
var ev=ev||event;
div1.style.left=ev.clientX+'px';
div1.style.top=ev.clientY+'px';
};
事件流~~~~
一.事件冒泡
當(dāng)一個元素接收到事件的時候聋呢，會把他接收到的所有傳播給他的父級，一直到頂層window遭笋，事件冒泡機(jī)制坝冕。
阻止冒泡:當(dāng)前要阻止冒泡的事件函數(shù)中調(diào)用 ev.cancelBubble=true;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
div{
padding: 40px;
}
#div1{
background: pink;
}
#div2{
background: yellow;
}
#div3{
background: yellowgreen;
}
</style>
<script>
window.onload= function () {
var div1=document.getElementById('div1');
var div2=document.getElementById('div2');
var div3=document.getElementById('div3');
div1.onclick=function(ev){
var ev=ev||event;
ev.cancelBubble=true;
alert(this.id);
};
div2.onclick=function(){
alert(this.id);
};
div3.onclick=function(){
alert(this.id);
};
};
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
</html>
按鈕點(diǎn)擊的時候顯示，點(diǎn)擊任何地方消失
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
#div1{
width: 100px;
height: 200px;
border: 1px solid red;
display: none;
}
</style>
<script>
window.onload= function () {
var div1=document.getElementById('div1');
var btn=document.getElementById('btn');
btn.onclick= function (ev) {
var ev=ev||event;
ev.cancelBubble=true;
div1.style.display='block';
};
document.onclick= function () {
div1.style.display='none';
};
};
</script>
</head>
<body>
<input type="button" value="按鈕" id="btn"/>
<div id="div1"></div>
</body>
</html>
function fn1(){
alert(1)
}
function fn2(){
alert(2)
}
document.onclick=fn1;
document.onclick=fn2;
上面的綁定函數(shù)的時候是有一些問題的
為了解決這個問題瓦呼，給一個對象同一個事件綁定多個不同的函數(shù)喂窟。
ie下：obj.attachEvent(事件名稱，事件函數(shù))央串；
1.沒有事件捕獲
2.事件名稱中沒有on
3.事件執(zhí)行順序 非標(biāo)準(zhǔn)->倒序
4.this指向window
function fn1(){
alert(1)
}
function fn2(){
alert(2)
}
document.attachEvent('onclick',fn1);
document.attachEvent('onclick',fn2);
// document.attachEvent('onclick', function () {
// fn1.call(document);
// })
2.標(biāo)準(zhǔn)下 document.addEventListener(事件名稱磨澡，事件函數(shù)，是否捕獲)
1.有捕獲
2.事件名稱中沒有on
3.事件執(zhí)行是正序
4.this指向該觸發(fā)事件的對象
//第三個參數(shù):是否捕獲（默認(rèn)是false） false：冒泡 true：是捕獲
document.addEventListener('click', fn1,false);
document.addEventListener('click', fn2,false);
call(),函數(shù)下的一個方法质和，call方法第一個參數(shù)可以改變函數(shù)執(zhí)行過程中的內(nèi)部this指向,call方法第二個參數(shù)開始就是原來函數(shù)的參數(shù)列表
function a(){
alert(this);
}
// a();
a.call(); //a()==a.call()
// a.call(1)
function fn(a,b){
alert(this);
alert(a+b);
}
fn.call(1,10,20);
// fn.call(null,10,20); 不改變原來的指向
封裝的函數(shù)addEventListener和attachEvent調(diào)兼容
<script>
function fn1(){
alert(this);
}
function fn2(){
alert(2);
}
function getfn(obj,evname,fn){
if(obj.addEventListener){
return obj.addEventListener(evname,fn,false);
}else{
return obj.attachEvent('on'+evname, function () {
fn.call(obj);
})
}
}
getfn(document,'click',fn1);
</script>
二.事件捕獲
在綁定事件中稳摄，標(biāo)準(zhǔn)下瀏覽器是有事件捕獲的，非標(biāo)準(zhǔn)無事件捕獲饲宿。
addEventListener(事件名稱厦酬，事件函數(shù)胆描，是否捕獲’)
第三個參數(shù):是否捕獲（默認(rèn)是false） false：冒泡 true：是捕獲
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
div{
padding: 40px;
}
#div1{
background: pink;
}
#div2{
background: yellow;
}
#div3{
background: yellowgreen;
}
</style>
<script>
window.onload= function () {
var div1=document.getElementById('div1');
var div2=document.getElementById('div2');
var div3=document.getElementById('div3');
function fn(){
alert(this.id);
}
// div3.onclick=fn;
// div2.onclick=fn;
// div1.onclick=fn;
// false=冒泡
// 告訴div1，如果有一個出去的事件觸發(fā)了你仗阅，你就去執(zhí)行這個函數(shù)
// div1.addEventListener('click',fn,false);
// div2.addEventListener('click',fn,false);
// div3.addEventListener('click',fn,false);
//true 事件捕獲
//告訴div1昌讲，如果有一個進(jìn)去的事件觸發(fā)了你，你就去執(zhí)行這個函數(shù)
// true和false就是監(jiān)聽是進(jìn)來的一項(xiàng)還是出去的一項(xiàng)
div1.addEventListener('click',fn,true);
div2.addEventListener('click',fn,true);
div3.addEventListener('click',fn,true);
};
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
</html>
取消事件的綁定函數(shù)
1.事件綁定形式的取消
function fn1(){
alert(1);
}
function fn2(){
alert(2);
}
document.onclick=fn1;
document.onclick=null;
ie：detachEvent
標(biāo)準(zhǔn)下：removeEventListener
function fn1(){
alert(1);
}
function fn2(){
alert(2);
}
// document.attachEvent('onclick',fn1);
// document.attachEvent('onclick',fn2);
// document.detachEvent('onclick',fn1);
document.addEventListener('click',fn1,false);
document.addEventListener('click',fn2,false);
document.removeEventListener('click',fn1,false);
