事件對象
第一章: DOM2事件
1.addEventListener()
? 語法: element.addEventListener( event,function(){ },boolean);
? 參數(shù)1: 必寫 要添加的事件 這里直接用" "或者 ' ' 將事件名添加進(jìn)去就行, 如 'click' 'mouseover' 等等.
? 參數(shù)2: 必寫 事件處理程序的函數(shù)
? 參數(shù)3: 可選 true/false true : 捕獲 false/不寫: 冒泡(默認(rèn))
如給按鈕添加click事件,以下三個(gè)例題效果相同
把事件名和函數(shù)都寫在DOM2內(nèi):
例1:
btn.addEventListener('click', function( ){
console.log('click 1');
})
也可以把函數(shù)寫在DOM2事件外面, 并在DOM2內(nèi)引用:
如例2:
function foo(){
console.log('click 1');
}
btn.addEventListener('click', foo );
函數(shù)在外聲明,并在DOM2事件內(nèi)部賦值:
如例3:
var foo;
btn.addEventListener('click', foo = function( ){
console.log('click 1');
})
2.removeEventListener()
? 移除事件
? 語法以及參數(shù)和addEventListener相同
? 但要移除的事件,它的事件處理程序的函數(shù)名必須相同
?
第二章:event
?
| 屬性/方法 | 類型 | 說明 |
|---|---|---|
| type | string | 被觸發(fā)的事件類型 |
| target | element | 指的是目標(biāo)元素,最內(nèi)層元素 |
| currentTarget | element | 其事件處理程序當(dāng)前正在處理事件的那個(gè)元素(注冊事件處理程序的元素) |
| bubbles | boolean | 事件是否冒泡 |
| eventPhase | integer | 得到事件所處的階段,1:捕獲 2:目標(biāo)節(jié)點(diǎn) 3:冒泡 |
| stopPropagation | Function | 取消事件的進(jìn)一步向其他元素節(jié)點(diǎn)捕獲或者冒泡 |
| stopImmediatePropagation | Function | 立即停止傳播,效果和stopPropagation一樣,但它也會取消同一元素的其他監(jiān)聽器捕獲或冒泡 |
| preventDefault | Function | 取消事件的默認(rèn)行為(如阻止submit事件的提交行為) |
| cancelable | Boolean | 表明是否可以取消事件的默認(rèn)行為 |
| defaultPrevented | Boolean | 表明是否調(diào)用了preventDefault事件,即是否取消了事件的默認(rèn)行為 |
實(shí)例:
<div class="div"> //給div添加樣式: width:100px;height:100px;background:red;
<button class="btn">點(diǎn)擊</button>
</div>
1.type:
被觸發(fā)的事件類型
返回類型string
var div = document.querySelector('.div');
var btn = document.querySelector('.btn');
btn.addEventListener('click',function(event){
console.log('btn事件'); //btn事件
console.log(event.type); //click
})
2.target 和 currentTarget :
指的是目標(biāo)元素,最內(nèi)層元素
返回的是整個(gè)元素
div.addEventListener('click',function(event){ //給div添加點(diǎn)擊事件
console.log(event.target);
console.log(event.currentTarget);
})
若點(diǎn)擊的是div,沒點(diǎn)在按鈕上 ,倆個(gè)返回的都是 <div>..</div>
若點(diǎn)擊的是按鈕:
target <button class="btn">點(diǎn)擊</button>//返回的是div的最內(nèi)層元素btn
currentTarget <div>..</div> //返回的是當(dāng)前正在處理的元素,也就是add前面的元素
3.bubble:
是否是冒泡事件
返回布爾類型,是否是冒泡事件
btn.addEventListener('click',function(event){
console.log(event.bubble); //true; //click事件是冒泡事件,所有返回true;
})
btn.addEventListener('mouseenter',function(event){
console.log(event.bubble); //false;
})
4.stopPropagation:
一個(gè)方法 event.stopPropagation( );
取消事件的進(jìn)一步向其他元素節(jié)點(diǎn)捕獲或者冒泡
//例1:
btn.addEventListener('click',function(event){
console.log('btn');
event.stopPropagation(); //給按鈕添加
})
div.addEventListener('click',function(event){ //給div添加第一個(gè)點(diǎn)擊事件
console.log('div1');
})
div.addEventListener('click',function(event){ //給div添加第二個(gè)點(diǎn)擊事件
console.log('div2');
})
| 事件類型 | 事件元素 | 是否添加event.stopPropagation(); | 返回值 |
|---|---|---|---|
| 點(diǎn)擊 | btn | 是 | btn |
| 點(diǎn)擊 | div | div1 div2 |
//例2:
btn.addEventListener('click',function(event){
console.log('btn');
})
div.addEventListener('click',function(event){ //給div添加第一個(gè)點(diǎn)擊事件
console.log('div');
event.stopPropagation(); //給div添加
})
div.addEventListener('click',function(event){ //給div添加第二個(gè)點(diǎn)擊事件
console.log('div2');
})
| 事件類型 | 事件元素 | 是否添加event.stopPropagation(); | 返回值 |
|---|---|---|---|
| 點(diǎn)擊 | btn | btn div1 div2 | |
| 點(diǎn)擊 | div | 是 | div1 div2 |
5.stopImmediatePropagation
一個(gè)方法 event.stopImmediatePropagation( );
立即停止傳播,效果和stopPropagation一樣,但它也會取消同一元素的其他監(jiān)聽器捕獲或冒泡
//例3:
btn.addEventListener('click',function(event){
console.log('btn');
})
div.addEventListener('click',function(event){ //給div添加第一個(gè)點(diǎn)擊事件
console.log('div1');
event.stopImmediatePropagation();
})
div.addEventListener('click',function(event){ //給div添加第二個(gè)點(diǎn)擊事件
console.log('div2');
})
| 事件類型 | 事件元素 | 是否添加event.stopImmediatePropagation() | 返回值 |
|---|---|---|---|
| 點(diǎn)擊 | btn | btn div1 | |
| 點(diǎn)擊 | div | 是 | div1 |
可以看到例2和例3中,同樣是給div 和 btn 添加相同的事件,但event事件的類型不同,
例2中的stopProgation( ) 只能阻止它傳播給給其他元素節(jié)點(diǎn)捕獲或者冒泡,對于自身元素要還有其他的監(jiān)聽事件則不能阻止
例3中的stopImmediatePropagation( ) 既可以阻止前者,也能阻止后者;
6.preventDefault
一個(gè)方法 event.preventDefault( );
取消事件的默認(rèn)行為(如阻止submit事件的提交行為)
<form action="http://www.baidu.com">
<input type="text" name="user">
<input type="submit" value="提交">
</form>
<script>
var form = document.querySelector("form");
form.addEventListener("submit", function (event){
event.preventDefault(); // 阻止默認(rèn)行為 點(diǎn)擊按鈕,不能提交
});
若沒有event.preventDefault( ); 點(diǎn)擊提交按鈕,網(wǎng)頁則會跳轉(zhuǎn)到百度首頁
7.cancelable
表明是否可以取消事件的默認(rèn)行為
返回布爾類型
8.defaultPrevented
表明是否調(diào)用了preventDefault事件,即是否取消了事件的默認(rèn)行為
返回布爾類型
9.事件的觸發(fā)
可以在一個(gè)定時(shí)器內(nèi)放入點(diǎn)擊事件,從而達(dá)到模擬用戶點(diǎn)擊按鈕
的效果
btn.onclick = function (e){
console.log("click...");
console.log(e.isTrusted);
}
setInterval(function (){
btn.click(); // 模擬用戶的點(diǎn)擊
}, 500)
第三章:event事件的高級屬性
1.offsetX和offsetY
? 光標(biāo)相對于觸發(fā)元素邊界的X腾它、Y坐標(biāo)
? 其實(shí)是光標(biāo)相對于觸發(fā)元素的==左上角==的坐標(biāo)处嫌。(把左上角的位置看做0滨攻，0)
2.screenX和screenY
? 當(dāng)前光標(biāo)相對于屏幕邊緣的x屿脐、y坐標(biāo)
? 其實(shí)就是相對于屏幕左上角的坐標(biāo)即彪。(可以看出是絕對坐標(biāo))
3.clientX和clientY
當(dāng)前光標(biāo)相對于瀏覽器瀏覽器窗口客戶區(qū)域左上角的坐標(biāo)(客戶區(qū)域不包括狀態(tài)欄苗分、菜單欄等供鸠。)
img3
第四章: 事件代理(委托)
? 事件委托的原理：
假設(shè)現(xiàn)在要處理多個(gè)具有并列關(guān)系元素的click事件豫柬，當(dāng)我點(diǎn)擊這些元素中的任何一個(gè)元素锌钮，則事件一定會通過冒泡的方式桥温，冒泡到他的上層的父節(jié)點(diǎn)元素然后一直冒到window，所以這個(gè)時(shí)候我們就可以在他的上層元素中添加事件處理程序梁丘，來統(tǒng)一處理這些事件侵浸，在處理的過程中可以通過獲取target的id來知道是點(diǎn)擊的哪個(gè)具體的元素旺韭。這種方式就稱之為事件委托。
<ul id="item">
<li id="item1">1</li>
<li id="item2">2</li>
<li id="item3">3</li>
<li id="item4">4</li>
</ul>
<script>
item.onclick=function(e){
switch (e.target.id){ //使用target來獲取目標(biāo)元素,也就是點(diǎn)擊的那個(gè)li 并通過id來判斷
case "item1":
console.log("你點(diǎn)擊了第一個(gè)li");
break;
case "item2":
console.log("你點(diǎn)擊了第二個(gè)li");
break;
case "item3":
console.log("你點(diǎn)擊了第三個(gè)li");
break;
case "item4":
console.log("你點(diǎn)擊了第四個(gè)li");
break;
}
}
</script>
注:
- 完全可以考慮給document添加一個(gè)事件處理程序掏觉，用來處理頁面上發(fā)生的某種特定類型的事件区端。
- 比較適合事件委托的事件：click 、 mousedown 澳腹、 mouseup 织盼、 keydown 、 keyup 和 keypress;
2222
