阻止默认行为
标准下: 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>
网友评论