文章目錄
一、event對象和事件冒泡
1.1 什麼是event對象
Event 對象代表事件的狀態,比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態,可以幫助我們去獲取事件的一些信息。
1.2 document
每個載入瀏覽器的 HTML 文檔都會成爲 Document 對象。
Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問。
提示:Document 對象是 Window 對象的一部分,可通過 window.document 屬性對其進行訪問。
document 可以把它想象成是<!DOCUTYPE HTML>和<html> 的父級
類似這樣:
<document>
<!DOCTYPE html>
<html>
</html>
<document>
我們可以使用 document.onclick 來監聽整個頁面的點擊事件
1.3 event.clientX event.clientY 鼠標點擊的X座標和Y座標
clientX 返回當事件被觸發時,鼠標指針的水平座標。
clientY 返回當事件被觸發時,鼠標指針的垂直座標。
注意兼容性:IE6-IE8 是ev 其他是event 示例:
<script>
window.onload=function(){
//兼容性寫法:IE6-IE8是ev 其他是event
document.onclick=function(ev){
var event = ev||event;
alert("X:"+event.clientX+" Y:"+event.clientY);
}
}
</script>
效果:
1.4 事件冒泡
簡單點來說就是子級的事件會傳遞給父級,直到傳遞給document
例如:
<!DOCTYPE html>
<html lang="en" onclick="alert('html')">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件冒泡</title>
<style>
div{
padding: 100px;
}
</style>
</head>
<body onclick="alert('body')">
<div style="background: #ccc;" 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>
如果點擊最裏邊的紅色DIV會依次彈出5個DIV
如圖:
1.5 event.cancelBubble=true 取消事件冒泡
使用event.cancelBubble = true; 可以取消事件冒泡
例如:
<style>
#div1{
width: 400px;
height: 300px;
background: #ccc;
display: none;
}
</style>
<body>
<input id="btn" type="button" value="顯示">
<div id="div1"></div>
</body>
<script>
window.onload=function(){
var btn = document.getElementById('btn');
var div = document.getElementById('div1');
btn.onclick=function(ev){
var event=ev||event;
event.cancelBubble=true;
div.style.display='block';
}
document.onclick=function(){
div.style.display='none';
}
}
</script>
這個例子的意思是當我們點擊按鈕過後,顯示一個預設好的div,但是如果沒有取消事件冒泡的話,document.onclick默認會執行,會把div再次隱藏,而我們把事件冒泡取消了,所以點擊按鈕不會隱藏,需要點擊頁面的其他地方纔會隱藏,
如圖:
二、鼠標事件
2.1 onmousemove 鼠標移動事件
onmousemove 事件會在鼠標指針移動時發生。
示例:
<style>
#div1{
width: 200px;
height: 200px;
background: red;
position: absolute;
}
</style>
<body style="height: 2000px;">
<div id="div1"></div>
</body>
<script>
document.onmousemove=function(){
var div=document.getElementById('div1');
//可視區到頁面頂部的距離
var scrollTop = document.documentElement.scrollTop;
var scrollLeft = document.documentElement.scrollLeft;
div.style.left=event.clientX+scrollLeft+'px';
div.style.top=event.clientY+scrollTop+'px';
}
</script>
這個例子的意思是,監聽頁面的鼠標移動事件,並且把div的left與top綁定到鼠標當前位置。
需要注意的是由於 event.clientY獲取的是可視區的Y座標,因此需要我們加上scrollTop
效果如圖:
這裏我們把當前的鼠標位置封裝成一個函數,以便以後使用,返回值是返回一個json類型的數據:
function getPos(){
var scrollTop = document.documentElement.scrollTop;
var scrollLeft = document.documentElement.scrollLeft;
return {x:event.clientX+scrollLeft,y:event.clientY+scrollTop};
}
2.2 實例一串跟着鼠標移動的DIV
這裏DIV的數量自己設置,數量越多,跟着鼠標的數量也就越多。
<style>
div{
width: 10px;
height: 10px;
background: red;
position: absolute;
}
</style>
<script>
function getPos(){
var scrollTop = document.documentElement.scrollTop;
var scrollLeft = document.documentElement.scrollLeft;
return {x:event.clientX+scrollLeft,y:event.clientY+scrollTop};
}
document.onmousemove=function(ev){
var aDiv=document.getElementsByTagName('div');
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';
}
var pos=getPos();
aDiv[0].style.left=pos.x+'px';
aDiv[0].style.top=pos.y+'px';
};
</script>
效果;
三、鍵盤事件
3.1 onkeydown 鍵盤按下事件
鍵盤按下觸發 onkeydown事件
<script>
document.onkeydown=function(){
//按下a、b、c、d 對應 65、66、67、68
alert(event.keyCode);
}
</script>
3.2 onkeyup 鍵盤松開事件
3.3 onkeypress 鍵盤按下並且沒有鬆開
onkeypress 事件在用戶按下並放開任何字母數字鍵時發生。但是系統按鈕(例如:箭頭鍵、功能鍵)無法得到識別。
3.4 ctrlKey 判斷ctrl是否按下
3.5 shiftKey 判斷shift是否按下
3.6 altKey 判斷alt是否按下
ctrlKey 事件屬性可返回一個布爾值,指示當事件發生時,Ctrl 鍵是否被按下並保持住。
3.7 實例 Ctrl+enter 提交內容
我們可以使用onkeydown+ctrlKey,實現Ctrl+Enter提交內容
示例:
<body>
<input id="txt1" type="text">
<input id="btn1" type="button" value="發佈">
<br>
<textarea name="" id="txt2" cols="30" rows="10"></textarea>
</body>
<script>
window.onload=function(){
var txt1=document.getElementById('txt1');
var txt2=document.getElementById('txt2');
// var btn=document.getElementById('btn1');
//13回車鍵
txt1.onkeydown=function(){
if(event.keyCode==13 && event.ctrlKey){
txt2.value+=txt1.value+'\n';
txt1.value='';
}
}
}
</script>
效果: