事件（下）
事件對象
在事件對象中記錄了很多事件的信息檬寂。趾牧。。
事件類型
e.type// 事件的類型
例：
<buttonid="btn">
?? 按鈕
</button>
<script>
btn.onclick=function(e){
vare=e||window.event;
console.log(e.type);// MouseClick
?? }
btn.onmouseover=function(e){
vare=e||window.event;
console.log(e.type);// MouseOver
?? }
</script>
鼠標按鍵信息
e.button// 鼠標按鍵的信息
0表示左鍵，1表示鼠標滾輪持舆，2表示右鍵
<body>
<buttonid="btn">按鈕</button>
</body>
<scripttype="text/javascript">
btn.onmousedown=function(e){
varev=e||window.event;
varcode=ev.button;
if(code==0){
console.log("您點擊的是左鍵");
}elseif(code==1){
console.log("您點擊的滾輪");
}elseif(code==2){
console.log("您點擊的是右鍵");
}else{
console.log("不知道你點擊的是什么");
?? }
}
</script>
按鍵鍵碼
e.keyCode// 鍵盤的鍵碼
常見的按鍵碼：
13： 回車鍵（enter）
32： 空格鍵（space）
數(shù)字和字母的鍵碼是數(shù)字或字母對應的阿斯克碼
<body>
<buttonid="btn">按鈕</button>
</body>
<scripttype="text/javascript">
document.onkeypress=function(e){
varev=e||window.event;
console.log(ev.keyCode);
}
</script>
<font color="blue">作業(yè)：模擬打字游戲仆百。</font>
組合按鍵的判斷：
altKey ：alt 鍵按下得到 true慌闭，否則得到 false
shiftKey ：shift 鍵按下得到 true初坠，否則得到 false
ctrlKey ：ctrl 鍵按下得到 true，否則得到 false
document.onkeyup=function(e) {
e=e||window.event
keyCode=e.keyCode||e.which
if(e.shiftKey&&keyCode===97) {
console.log('你同時按下了 shift 和 a')
? }
}
使用說明：火狐firefox2.0和低版本IE中keyCode不兼容铜幽，可以使用e.which來獲取
<font color="red">現(xiàn)在的低版本ie和火狐都能兼容keyCode</font>
鼠標坐標點
從元素內(nèi)部開始計算的坐標：offsetX 和 offsetY
<body>
<style>
#box{
width:200px;
height:200px;
border:1pxsolid#000;
}
</style>
<divid="box"></div>
</body>
<scripttype="text/javascript">
box.onclick=function(e){
varev=e||window.event;
console.log(ev.offsetX,ev.offsetY);
}
</script>
訪問結(jié)果：
元素內(nèi)部的點擊坐標
相對于瀏覽器的坐標滞谢，使用：clientX和clientY
<body>
<style>
#box{
width:200px;
height:200px;
border:1pxsolid#000;
margin:100px;
?? }
</style>
<divid="box"></div>
</body>
<scripttype="text/javascript">
box.onclick=function(e){
varev=e||window.event;
console.log(ev.clientX,ev.clientY);
}
</script>
訪問結(jié)果：
相對于瀏覽器的坐標
使用說明：不管頁面滾動到哪里，都是根據(jù)窗口來計算坐標除抛。（不會隨著滾動條的滾動而發(fā)生改變）
相對于頁面的坐標狮杨，會隨著滾動條的滾動而加大，使用：pageX和pageY
<body>
<style>
#box{
width:20px;
border:1pxsolid#000;
margin:100px;
?? }
</style>
<div id="box">
? ? ?? 沒有什么能夠阻擋
? ? ?? 你對自由的向往
? ? ?? 天馬行空的生涯
? ? ?? 你的心了無牽掛
? ? ?? 穿過幽暗的歲月
? ? ?? 也曾感到彷徨
? ? ?? 當你低頭的瞬間
? ? ?? 才發(fā)覺腳下的路
? ? ?? 心中那自由的世界
? ? ?? 如此的清澈高遠
? ? ?? 盛開著永不凋零
? ? ?? 藍蓮花
</div>
</body>
<scripttype="text/javascript">
box.onclick=function(e){
varev=e||window.event;
console.log(ev.pageY);
}
</script>
訪問結(jié)果：
橫向坐標也是一樣的到忽。
拖拽效果
鼠標移動事件：mousemove
<body>
<style>
#box{
width:100px;
height:100px;
background:pink;
position:absolute;
left:0;
top:0;
}
</style>
<divid="box"></div>
</body>
<scripttype="text/javascript">
varx,y;
box.onmousedown=function(){
this.onmousemove=function(e){
varev=e||window.event;
x=ev.clientX-50;
y=ev.clientY-50;
if(x<0){
x=0;
? ? ?? }
if(y<0){
y=0;
? ? ?? }
// 屏幕寬度和屏幕高度
varmaxWidth=document.documentElement.clientWidth;
varmaxHeight=document.documentElement.clientHeight;
// 能移動的最大寬度 = 屏幕寬度 - 盒子寬度
varmoveMaxWidth=maxWidth-100;
varmoveMaxHeight=maxHeight-100;
if(x>moveMaxWidth){
x=moveMaxWidth;
? ? ?? }
if(y>moveMaxHeight){
y=moveMaxHeight;
? ? ?? }
this.style.left=x+"px";
this.style.top=y+"px";
?? }
}
box.onmouseup=function(){
this.onmousemove=null;
}
</script>
<font color="red">注意：獲取鼠標坐標位置的時候橄教，不能使用offset來獲取，因為offset獲取到的值是鼠標在當前元素上的位置绘趋，也就是說一開始獲取的是大盒子的位置，但是一旦設(shè)置了小盒子的位置颗管，鼠標會出現(xiàn)在小盒子上陷遮，獲取到的位置就成了鼠標在小盒子上的位置了</font>
默認行為
具有默認行為的常見的兩個標簽
鏈接<ahref="/index.php">點我</a>往屬性href指定的地址跳轉(zhuǎn)
提交按鈕<inputtype=”submit”>往form表單屬性action指定的地址跳轉(zhuǎn)
阻止默認行為的方法：
1.給鏈接地址設(shè)置為javascript:;或 javascript:void(0)
2.在事件中最后return false
3.通過對象阻止，代碼如下：
functionstopDefault(event) {
vare=event||window.event;
if(e.preventDefault){
e.preventDefault();// w3c標準瀏覽器
}else{
e.returnValue=false;// IE瀏覽器
?? }
}
鼠標右鍵也有默認行為垦江。
事件委托
事件委托也叫事件代理（看站誰的角度）帽馋，使用事件委托技術(shù)能避免對每個子節(jié)點添加事件監(jiān)聽,相反把事件監(jiān)聽委托給父元素即可，這樣可提高綁定事件的性能。
傳統(tǒng)的給每個元素綁定事件：
<ul>
? ? <li>首頁</li>
? ? <li>公司介紹</li>
? ? <li>產(chǎn)品中心</li>
</ul>
<script>
varoLis=document.getElementsByTagName("li");// 獲取到所有l(wèi)i
for(variinoLis){
? ? oLis[i].onclick=function(){
? ? ? ? alert(this.innerText);
? ? }
}
</script>
代碼的缺點：
li標簽比較多的時候绽族，性能特別差姨涡，畢竟使用for循環(huán)相當于綁定了多次
當動態(tài)給li添加元素的時候，新元素沒有事件綁定
ul>
? ? <li>首頁</li>
? ? <li>公司介紹</li>
? ? <li>產(chǎn)品中心</li>
</ul>
<buttonid="btn">添加新元素</button>
<script>
btn.onclick=function(){
? ? varoNewLi=document.createElement("li");
? ? oNewLi.innerText="新聞中心";
? ? varoUl=document.getElementsByTagName("ul")[0];
? ? oUl.appendChild(oNewLi)
}
varoLis=document.getElementsByTagName("li");// 獲取到所有l(wèi)i
for(variinoLis){
? ? oLis[i].onclick=function(){
? ? ? ? alert(this.innerText);
? ? }
}
</script>
分析：當點擊按鈕給ul添加新元素以后吧慢，新元素不具備點擊事件涛漂，點擊沒有效果
解決方案：使用事件委托，將所有子元素的點擊事件委托給父元素
<ul>
? ? <li>首頁</li>
? ? <li>公司介紹</li>
? ? <li>產(chǎn)品中心</li>
</ul>
<buttonid="btn">添加新元素</button>
<script>
varoUl=document.getElementsByTagName("ul")[0];
btn.onclick=function(){
? ? varoNewLi=document.createElement("li");
? ? oNewLi.innerText="新聞中心";
? ? oUl.appendChild(oNewLi)
}
oUl.onclick=function(e){
? ? varev=e||window.event;
? ? // 獲取到單擊的目標元素dom對象
? ? vartarget=ev.target||ev.srcElement;
? ? // 判斷是否是li標簽
? ? if(target.nodeName=="li"){
? ? ? ? // 完成業(yè)務(wù)邏輯
? ? ? ? alert(target.innerText);
? ? }
}
</script>
使用事件委托的好處：
提高性能(事件委托中并沒有使用循環(huán)給每個節(jié)點設(shè)置事件检诗，只給一個父元素ul綁定事件)
后續(xù)動態(tài)添加的節(jié)點也有事件的處理
注意：事件委托底層就是通過事件冒泡來完成的匈仗，先觸發(fā)父元素的事件，在通過事件對象的target屬性找到具體的目標元素逢慌，進而在處理目標元素要執(zhí)行的業(yè)務(wù)邏輯悠轩。
事件對象總結(jié)
在行內(nèi)綁定的事件，在行內(nèi)傳入event攻泼，其他事件驅(qū)動函數(shù)在定義的時候傳入自定義參數(shù)火架。在函數(shù)中通過獲取參數(shù)或者window.event來得到事件對象。
名稱? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 意義? ? ? ? ? ? ? ? ? ? ? ? 使用方式? ? ? ? ? ? ? ? ? ? ? ? ? 兼容問題
stopPropagation方法? ? ?阻止冒泡? ? ? ? ? ? ? ? ?e.propagation()? ? ? ? ? ? ? ? ?e.cancelBubble=true
preventDefault方法? ? ? ?阻止默認行為? ? ? ? ? ?e.preventDefault()? ? ? ? ? ? e.returnValue=false
clientX? ? ? ? ? ? ? ? ? ? ? ? ? ?鼠標點擊坐標? ? ? ? ? ?e.clientX? ? ? ? ? ? ? ? ? ? ? ? ? ?無
offsetX? ? ? ? ? ? ? ? ? ? ? ? ? ?鼠標點擊坐標? ? ? ? ? ?e.offsetX? ? ? ? ? ? ? ? ? ? ? ? ? 無
pageX? ? ? ? ? ? ? ? ? ? ? ? ? ? 鼠標點擊坐標? ? ? ? ? ?e.pageX? ? ? ? ? ? ? ? ? ? ? ? ? ?無
target? ? ? ? ? ? ? ? ? ? ? ? ? ? ?精準的事件源? ? ? ? ? ?e.target? ? ? ? ? ? ? ? ? ? ? ? ? ? ?e.srcElement
keyCode? ? ? ? ? ? ? ? ? ? ? ? 鍵盤碼? ? ? ? ? ? ? ? ? ? ? e.keyCode? ? ? ? ? ? ? ? ? ? ? ? e.which
type? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?事件類型? ? ? ? ? ? ? ? ? ?e.type? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 無
button? ? ? ? ? ? ? ? ? ? ? ? ? ? 鼠標按鍵信息? ? ? ? ? ? e.button? ? ? ? ? ? ? ? ? ? ? ? ? ? ?無
