js事件基礎（事件event物件,事件冒泡，滑鼠鍵盤事件）
阿新 • • 發佈：2019-02-15
事件物件（獲取事件的詳細資訊）和事件冒泡：
- 什麼是event物件：獲取事件的詳細資訊：滑鼠位置、鍵盤按鍵。
document本質：document.childNodes[0].tagName
- 獲取event物件（相容性寫法）：var oEvent=ev||event;
//點選介面沒有反應。因為body裡面沒有內容，沒有撐開。 <script> window.onload=function(){ document.body.onclick=function(){ alert('a'); } } </script> </head> <body> </body>
//此時點選黑框中的東西，就可彈出。
<script>
window.onload=function(){
document.body.onclick=function(){
alert('a');
}
}
</script>
</head>
<body style="border: 1px solid black">
<input type="button" value="aaa"/>
</body>直接document.onclick就可以啦。
- 事件event物件：
- 用來獲取事件的詳細資訊：滑鼠位置、鍵盤按鍵。
- 滑鼠事件：
- 可視區位置：clientX、clientY
- 例子：跟隨滑鼠的div 消除滾動條的影響 滾動條的意義：可視區與頁面頂部的距離
<script> window.onload=function(){ document.onclick=function(){ //IE alert(event.clientX+' '+event.clientY);//獲取橫縱座標。 } } </script>
<script>
window.onload=function(){
document.onclick=function(ev){
//IE
//alert(event.clientX+' '+event.clientY);//獲取橫縱座標。
//火狐
alert(ev.clientX+' '+ev.clientY);
//相容的事件物件
var oEvent=ev||event;
alert(oEvent.clientX+' '+oEvent.clientY)
}
}
</script>- 事件冒泡：事件會順著層級一直往它的父級上傳。一直傳到document上為止。
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
padding: 100px;
}
</style>
</head>
<body onclick="alert('body')">
<div style="background: #cccccc" onclick="alert(this.style.background);">
<div style="background: green" onclick="alert(this.style.background);">
<div style="background: red" onclick="alert(this.style.background);"></div>
</div>
</div>
</body>
</html>大部分時候事件冒泡會給我們帶來麻煩。我們一般不會主動使用它。
點選按鈕灰框顯示，點選灰框和按鈕以外的地方，灰框消失。
<style>
#div1{
width: 100px;
height: 100px;
background: #cccccc;
display: none;
}
</style>
<script>
window.onload=function(){
var oBtn=document.getElementById('oBtn');
var oDiv=document.getElementById('div1');
oBtn.onclick=function(){
oDiv.style.display='block';
/*alert('按鈕被點選了')*/
}
document.onclick=function(){
oDiv.style.display='none';
/*alert('document被點選了')*/
}
}
</script>
</head>
<body>
<input type="button" id="oBtn" value="顯示"/>
<div id="div1"></div>
</body>以上這種做法錯誤，灰框非但不會消失，也不會顯示。這就是事件冒泡帶來的影響。
<script>
window.onload=function(ev){
var oBtn=document.getElementById('oBtn');
var oDiv=document.getElementById('div1');
oBtn.onclick=function(ev){
var oEvent=ev||event;
oDiv.style.display='block';
oEvent.cancelBubble=true;
/*alert('按鈕被點選了')*/
}
document.onclick=function(){
oDiv.style.display='none';
/*alert('document被點選了')*/
}
}
</script>div一直跟著滑鼠走。
<style>
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
<script>
document.onmousemove=function(ev){
var oEvent=ev||event;
var oDiv=document.getElementById('div1');
oDiv.style.left=oEvent.clientX+'px';
oDiv.style.top=oEvent.clientY+'px';
}
</script>
</head>
<body>
<div id="div1"></div>
</body>存在隱患：
//div和滑鼠的距離會隨著滾動條的距離增大而增大。
<body style="height: 2000px;">
<div id="div1"></div>
</body>
<script>
document.onmousemove=function(ev){
var oEvent=ev||event;
var oDiv=document.getElementById('div1');
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
oDiv.style.left=oEvent.clientX+'px';
oDiv.style.top=oEvent.clientY+scrollTop+'px';
}
</script>clientY要配合scrollTop來使用。但凡遇到clientX和clientY就要用到scrollTop和scrollLeft.
封裝成函式：
<script>
function getPos(ev){
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};
}
document.onmousemove=function(ev){
var oEvent=ev||event;
var oDiv=document.getElementById('div1');
var pos=getPos(oEvent);
oDiv.style.left=pos.x+'px';
oDiv.style.top=pos.y+'px';
}
</script>例子：很多小div,div跟著滑鼠移動。
-
style> div{ width: 20px; height: 20px; background: red; position: absolute; } </style> <script> //獲取的是滑鼠的位置 function getPos(ev){ var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop}; } document.onmousemove=function(ev){ var aDiv=document.getElementsByTagName('div'); var oEvent=ev||event; var pos=getPos(oEvent); for(var i=aDiv.length-1;i>0;i--){ //後一個跟前一個走 aDiv[i].style.left=aDiv[i-1].offsetLeft+'px'; aDiv[i].style.top=aDiv[i-1].offsetTop+'px'; } //第一個跟滑鼠走 aDiv[0].style.left=pos.x+'px'; aDiv[0].style.top=pos.y+'px'; } </script> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </body> - 鍵盤事件：
- keyCode
- 其他屬性：ctrlKey、shiftKey、altKey
//彈出我們按的ASCII碼值
<script>
document.onkeydown=function(ev){
var oEvent=ev||event;
alert(oEvent.keyCode);
}
</script>例子：鍵盤控制div移動。
<style>
#div1{
width: 100px;
height: 100px;
background: #cccccc;
position: absolute;
}
</style>
<script>
document.onkeydown=function(ev){
var oEvent=ev||event;
//alert(oEvent.keyCode);
var oDiv=document.getElementById('div1');
if(oEvent.keyCode==38){
oDiv.style.top=oDiv.offsetTop-10+'px';
}else if(oEvent.keyCode==40){
oDiv.style.top=oDiv.offsetTop+10+'px';
}else if(oEvent.keyCode==37){
oDiv.style.left=oDiv.offsetLeft-10+'px';
}else if(oEvent.keyCode==39){
oDiv.style.left=oDiv.offsetLeft+10+'px';
}
}
</script>
</head>
<body>
<div id="div1"></div>其他屬性：ctrl+回車 提交留言
點選按鈕提交：
<script>
window.onload=function(){
var oTxt1=document.getElementById('txt1');
var oTxt2=document.getElementById('txt2');
var oBtn=document.getElementById('btn1');
oBtn.onclick=function(){
oTxt2.innerHTML+=oTxt1.value+'\n';
oTxt1.value='';
}
}
</script>
</head>
<body>
<input type="text" id="txt1"/>
<input type="button" id="btn1" value="釋出"/><br/>
<textarea name="" id="txt2" cols="30" rows="10">
</textarea>
</body>按回車提交：
<script>
window.onload=function(){
var oTxt1=document.getElementById('txt1');
var oTxt2=document.getElementById('txt2');
oTxt1.onkeydown=function(ev){
var oEvent=ev||event;
if(oEvent.keyCode==13){
oTxt2.innerHTML+=oTxt1.value+'\n';
oTxt1.value='';
}
}
}
</script>按ctrl和回車提交：
<script>
window.onload=function(){
var oTxt1=document.getElementById('txt1');
var oTxt2=document.getElementById('txt2');
oTxt1.onkeydown=function(ev){
var oEvent=ev||event;
if(oEvent.keyCode==13&&oEvent.ctrlKey){
oTxt2.innerHTML+=oTxt1.value+'\n';
oTxt1.value='';
}
}
}
</script>