最近發(fā)現(xiàn)身邊的一些技術(shù)人員,對于事件對象,不了解其原理,只知道基本的使用,所以我在此整理了事件對象的知識點(diǎn).
1 事件對象的作用
主要是用于存儲事件的相關(guān)信息,事件對象由用戶產(chǎn)生的（用戶觸發(fā)鼠標(biāo)事件，鍵盤事件等）
事件存儲數(shù)據(jù)有,按的那個鍵盤,觸發(fā)的哪個事件,當(dāng)前點(diǎn)擊光標(biāo)所在位置等等.還有其他很多信息,但是大家平常基本都用不上.
事件對象也可以阻止事件流，阻止瀏覽器默認(rèn)動作等,這個在我們的工作中使用的還是比較多的.
2、獲取事件對象
因為兼容的問題,不同瀏覽器獲取事件對象的方法也不一樣,這點(diǎn)大家使用的時候要注意.(兼容是前端最讓人頭疼的地方)
ie6、7、8獲取事件對象的方法(現(xiàn)在基本沒有,知道就好)
節(jié)點(diǎn)對象.事件類型 = function() {
console.log(window.event);
}
注意哈,event對象在函數(shù)體內(nèi)才有
主流瀏覽器的獲取方法
節(jié)點(diǎn)對象.事件類型 = function(evt) {
console.log(evt); //相當(dāng)于 window.event
}
直接在事件后面寫回調(diào)函數(shù),觸發(fā)事件的時候,系統(tǒng)會自動的給回調(diào)函數(shù)穿遞event對象.我們使用參數(shù)接收,就可以直接獲取了.
后面是兼容的寫法,工作中都是這么寫的.大家記住這個就行了.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="div1" style="width: 100px; height: 100px; background: red;"></div>
<script type="text/javascript">
div1.onclick = function(evt) {
var evtObj = evt ? evt : window.event;
console.log(evtObj);
}
</script>
</body>
</html>
3、事件對象的使用場景
1）判斷是否回車表單提交
我們通過綁定鍵盤事件onkeydown,進(jìn)而獲取event對象,再通過event得到當(dāng)前點(diǎn)擊的鍵盤上的鍵盤碼,通過鍵盤碼判斷是否點(diǎn)擊了回車.
使用到的知識點(diǎn):
表單對象.submit() 提交表單
表單對象.onsubmit = function() {} 監(jiān)聽表單是否提交
上代碼,大家來看.
好多人搞不清楚,submint和onsubmit,下面詳細(xì)說一下
submit是js去提交表單，onsubmit是監(jiān)聽表單是否提交；
通過js的submit方法提交表單，不會觸發(fā)onsubmit事件，原因：一個由用于觸發(fā)，另個是由程序觸發(fā)的；
2）阻止瀏覽器默認(rèn)動作
Event對象的在我們的使用中,另一個重大作用就是阻止默認(rèn)動作.比如像要使用a標(biāo)簽的樣式,但是不想要跳轉(zhuǎn)功能.
DOM1級事件 return false；
DOM1級事件或者DOM2級事件 evt.preventDefault();
2）事件對象中記錄的鼠標(biāo)位置
我們工作中很多的時候要制作各種特效,比方元素跟隨鼠標(biāo)的移動等,這個時候都要獲取鼠標(biāo)的各種坐標(biāo).其實(shí)這些呢,大家不用去記單詞,主要知道有這個屬性就行,用的時候查一查.
evt.screenX 相對于屏幕的左上角為原點(diǎn)
evt.screenY
evt.clientX 相對于瀏覽器的客戶端左上角為原點(diǎn)（不計算滾動條位置）
evt.clientY
evt.pageX 相對于瀏覽器的客戶端左上角為原點(diǎn)（計算滾動條的位置）
evt.pageY
evt.offsetX 以自己的左上角為原點(diǎn)
evt.offsetY
這里來個小案例,就是點(diǎn)擊添加星星
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
//1. 給屏幕添加點(diǎn)擊事件 onclick
document.onclick = function(evt) {
var evtObj = evt ? evt : window.event;
//2. 在頁面追加星星
//2.1 創(chuàng)建img標(biāo)簽
var imgObj = document.createElement('img');
//2.2 給img標(biāo)簽設(shè)置src屬性
imgObj.setAttribute('src', 'star.gif');
//獲取對象默認(rèn)寬度
//console.log(imgObj.width);
//2.3 設(shè)置對象寬度
imgObj.width = imgObj.width * Math.random();
//2.4設(shè)置定位
imgObj.style.position = 'absolute';
imgObj.style.top = evtObj.clientY + 'px';
imgObj.style.left = evtObj.clientX + 'px';
//理論核心DOM（1）得一層一層獲取，但是獲取body可以直接獲取
document.body.appendChild(imgObj);
}
</script>
</body>
</html>
3）阻止事件流
關(guān)于事件流這塊的,大家看一看,在嵌套元素的時候,使用的比較多.
ie6、7、8：event.cancelBubble=true;
主流瀏覽器：evt.stopPropagation();
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1 {width: 800px; height: 800px; background: red;}
#div2 {width: 400px; height: 400px; background: blue;}
#div3 {width: 200px; height: 200px; background: green;}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3">
</div>
</div>
</div>
<script type="text/javascript">
div1.addEventListener('click', function(evt){
var evtObj = evt ? evt : window.event;
alert(1);
evtObj.stopPropagation();
});
div2.addEventListener('click', function(evt){
var evtObj = evt ? evt : window.event;
alert(1);
evtObj.stopPropagation();
});
div3.addEventListener('click', function(evt){
var evtObj = evt ? evt : window.event;
alert(1);
evtObj.stopPropagation();
});
</script>
</body>
</html>
寫在最后
以上就是關(guān)于event對象的總結(jié),大家如果有什么問題,歡迎在下方留言討論.看完之后順手已贊,你是最帥的,哈哈!
