阻止默認(rèn)行為
標(biāo)準(zhǔn)下: event.preventDefault();//默認(rèn)菜單
ie下: event.returnValue = false;
target
Element 只讀 觸發(fā)事件的目標(biāo)元素
事件處理函數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>aaaaa</div>
<script>
var div = document.getElementsByTagName('div')[0];
// div.onclick = function(){
// alert(1);
// }
// div.onclick = function(){
// alert(2);
// }
//給元素添加相應(yīng)的事件屬性
//缺點(diǎn): 只能添加一個(gè)相同類型的事件處理函數(shù)
//參數(shù)說明:
//1. 事件類型(字符串)
//2. 事件處理函數(shù)
// 3. true/false 就寫false
div.addEventListener( 'click', function(ev){ alert(ev.target.innerHTML) }, false );
div.addEventListener( 'click', function(ev){ alert(2) }, false );
//推薦使用addEventListener
</script>
</body>
</html>
移除事件綁定函數(shù)
div.onclick = null;
DOM2級事件定義了兩個(gè)方法用于處理指定和刪除事件處理程序的操作：
綁定事件處理函數(shù): addEventListener
function fn1() {
alert(1);
}
document.addEventListener('click', fn1, false);
移除事件綁定函數(shù): removeEventListener
document.removeEventListener('click', fn1, false);
事件的捕獲
事件流包括三個(gè)階段，事件捕獲階段，處于目標(biāo)階段，事件冒泡階段，首先發(fā)生的是事件捕獲，為截取事件提供機(jī)會(huì)，然后是實(shí)際目標(biāo)接收事件，最后是冒泡階段
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
<script>
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
oDiv1.addEventListener('click', function(ev){
alert( '我是捕獲階段'+this.id );
}, true);//在捕獲階段觸發(fā)
oDiv1.addEventListener('click', function(ev){
alert( '我是冒泡階段'+this.id );
}, false);
oDiv3.addEventListener('click', function(){
alert('目標(biāo)階段'+this.id);
}, false);
</script>
</body>
鍵盤事件
keydown:當(dāng)鍵盤按鍵按下的時(shí)候觸發(fā);
能夠捕獲焦點(diǎn)的能夠觸發(fā)keydown事件；
//input
keyup : 當(dāng)鍵盤按鍵抬起的時(shí)候觸發(fā)
與鍵盤事件相關(guān)的事件對象的屬性值
event.keyCode : 數(shù)字類型 鍵盤按鍵的值 鍵值；
event.ctrlKey, event.shiftKey, event.altKey
當(dāng)一個(gè)事件發(fā)生的時(shí)候，如果ctrl || shift || alt 是按下的狀態(tài)，相應(yīng)的屬性值返回true，否則返回false
示例： 留言板 當(dāng)輸入完成， 并且按住ctrl +enter(回車) ,添加留言
<body>
<input type="text">
<p></p>
<script>
var input = document.getElementsByTagName('input')[0];
var p = document.getElementsByTagName('p')[0];
input.addEventListener('keydown',function(ev){
if(ev.keyCode===13 && ev.ctrlKey){
var value=input.value
var span=document.createElement('span');
span.innerHTML=value;
p.appendChild(span);
}
},false)
</script>
</body>
讓div上下左右移動(dòng)，使用鍵盤
<body>
<div></div>
<script>
var div=document.getElementsByTagName('div')[0];
//注意在window上加keydown事件！
window.addEventListener('keydown',function(ev){
if(ev.keyCode==37){
var left=div.offsetLeft;
left-=10;
div.style.left=left+'px';
}
else if(ev.keyCode==38){
var Top=div.offsetTop;
Top-=10;
div.style.top=Top+'px';
}
else if(ev.keyCode==39){
var left=div.offsetLeft;
left+=10;
div.style.left=left+'px';
}
else if(ev.keyCode==40){
var Top=div.offsetTop;
Top+=10;
div.style.top=Top+'px';
}
},false)
</script>
</body>
oncontextmenu
自定義菜單環(huán)境
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#contextmenu{
display: none;
width: 100px;
height: 200px;
background: red;
position: absolute;
}
</style>
</head>
<body style="height: 2000px;">
<div id="contextmenu"></div>
<script>
var contextmenu = document.getElementById('contextmenu');
// document.oncontextmenu = function(){
// alert(1);
// return false;//阻止默認(rèn)行為
// }
//自定義菜單環(huán)境
window.addEventListener('contextmenu',function(ev){
ev.preventDefault();//阻止默認(rèn)行為
ev.stopPropagation();//阻止冒泡
contextmenu.style.display='block';
contextmenu.style.left=ev.clientX+window.scrollX+'px';
contextmenu.style.top=ev.clientY+window.scrollY+'px';
},false)
</script>
</body>
</html>
拖拽div
拖拽原理
三大事件
onmousedown : 選擇元素
onmousemove : 移動(dòng)元素
onmouseup : 釋放元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<style>
div{
width:100px;
height:100px;
background:#cac;
position: absolute;
}
</style>
</head>
<body>
<div></div>
<script>
var div=document.getElementsByTagName('div')[0];
div.addEventListener('mousedown',function(ev){
var disX=ev.clientX-div.offsetLeft;
var disY=ev.clientY-div.offsetTop;
function moveEvent(ev){
div.style.left=ev.clientX-disX+'px';
div.style.top=ev.clientY-disY+'px';
}
//移動(dòng)div時(shí)，給window加事件，
window.addEventListener('mousemove',moveEvent,false);
function mouseUp(){
window.removeEventListener('mousemove',moveEvent,false);
div.removeEventListener('mouseup',mouseUp,false);
}
//添加onmouseup 事件，在里面放移出事件函數(shù)
div.addEventListener('mouseup',mouseUp,false);
},false)
//封裝添加事件
function bindEvent(obj,eventType,fn){
obj.addEventListener(eventType,fn,false);
}
//封裝移出事件
function bindEvent(obj,eventType,fn){
obj.removeEventListener(eventType,fn,false);
}
</script>
</body>
</html>
