阻止默認行為
標準下: event.preventDefault();//默認菜單
ie下: event.returnValue = false;
target
Element 只讀 觸發事件的目標元素
事件處理函數
<!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);
// }
//給元素添加相應的事件屬性
//缺點: 只能添加一個相同類型的事件處理函數
//參數說明:
//1. 事件類型(字符串)
//2. 事件處理函數
// 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>
移除事件綁定函數
div.onclick = null;
DOM2級事件定義了兩個方法用于處理指定和刪除事件處理程序的操作：
綁定事件處理函數: addEventListener
function fn1() {
alert(1);
}
document.addEventListener('click', fn1, false);
移除事件綁定函數: removeEventListener
document.removeEventListener('click', fn1, false);
事件的捕獲
事件流包括三個階段，事件捕獲階段，處于目標階段，事件冒泡階段，首先發生的是事件捕獲，為截取事件提供機會，然后是實際目標接收事件，最后是冒泡階段
<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);//在捕獲階段觸發
oDiv1.addEventListener('click', function(ev){
alert( '我是冒泡階段'+this.id );
}, false);
oDiv3.addEventListener('click', function(){
alert('目標階段'+this.id);
}, false);
</script>
</body>
鍵盤事件
keydown:當鍵盤按鍵按下的時候觸發;
能夠捕獲焦點的能夠觸發keydown事件；
//input
keyup : 當鍵盤按鍵抬起的時候觸發
與鍵盤事件相關的事件對象的屬性值
event.keyCode : 數字類型 鍵盤按鍵的值 鍵值；
event.ctrlKey, event.shiftKey, event.altKey
當一個事件發生的時候，如果ctrl || shift || alt 是按下的狀態，相應的屬性值返回true，否則返回false
示例： 留言板 當輸入完成， 并且按住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上下左右移動，使用鍵盤
<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
自定義菜單環境
<!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;//阻止默認行為
// }
//自定義菜單環境
window.addEventListener('contextmenu',function(ev){
ev.preventDefault();//阻止默認行為
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 : 移動元素
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';
}
//移動div時，給window加事件，
window.addEventListener('mousemove',moveEvent,false);
function mouseUp(){
window.removeEventListener('mousemove',moveEvent,false);
div.removeEventListener('mouseup',mouseUp,false);
}
//添加onmouseup 事件，在里面放移出事件函數
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>
