注册事件
给元素添加事件,被称为注册事件或者绑定事件。
注册事件有两种方式:传统方法和方法监听注册
传统方法
传统注册方式都是以on开头的事件,例如onclick
具有唯一性,对于同一个元素同一个实践,只能设置一个处理函数,最后注册的处理函数会覆盖前面注册的处理函数
方法监听注册
W3C推荐方法
使用addEventListener()方法
IE9之前的浏览器不支持,可以使用attachEvent()代替(attachEvent()方法非标准)
对于同一个元素同一个事件可以设置多个监听器
使用:
元素名.addEventListener(type,listener[,useCapture])
type是事件类型字符串,比如click、mouseover,注意这里没有on
listener:事件处理函数,事件发生时,会调用该监听函数
useCapture:可选参数,是一个布尔值,默认false,为true则处于捕获阶段,为false则处于冒泡阶段
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>点击</button>
<script>
var btn=document.querySelector('button');
// 方法监听注册事件
// 点击按钮,弹出弹窗
btn.addEventListener('click',function(){
alert('hello');
})
</script>
</body>
</html>
删除事件
对于传统方式注册的事件,使用元素名.事件名=null就可以实现,例如:element.οnclick=null
对于方法监听注册,可以通过元素名.removeEventListener(type,listener[,useCapture])实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>点击</button>
<script>
var btn=document.querySelector('button');
// 第一次点击按钮时,弹出弹窗
btn.addEventListener('click',fn);
function fn(){
alert('hello');
btn.removeEventListener('click',fn);
}
</script>
</body>
</html>
DOM事件流
事件流描述的是从页面中接收事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程就是DOM事件流
分为三个阶段:捕获阶段、当前目标阶段、冒泡阶段
事件对象
事件对象就是写在侦听函数的小括号里面的,可以当形参。
是系统自动创建的,不需要我们创建,但如果要使用,必须在小括号中写event或自己命名
事件对象是我们事件的一系列相关数据的集合,和事件相关
IE6、7、8使用window.event
常见属性和方法:
IE6、7、8中阻止冒泡使用event.cancelBubble=true
事件委托
事件委托:不给每个子节点单独设置事件监听器,而是将事件监听器设置在父节点之上,然后利用冒泡原理影响每个子节点
只操作了一次DOM,效率更高
常用的鼠标事件
禁止鼠标右键显示菜单
//contextmenu主要控制应该何时显示上下文菜单
document.addEventListener('contextmenu',function(e){
e.preventDefault(); //阻止默认事件
}
禁止鼠标选中
document.addEventListener('selectstart',function(e){
e.preventDefault(); //阻止默认事件
}
鼠标事件对象
MouseEvent
图片跟随鼠标
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img{
position: absolute;
display: none;
width: 10px;
height: 10px;
}
</style>
</head>
<body>
<img src="img/i1.jpg" />
<script>
var img=document.querySelector('img')
document.onmousemove=function(e){
var x=e.clientX;
var y=e.clientY;
console.log(x);
console.log(y);
img.style.top=y+'px';
img.style.left=x+'px';
img.style.display='block';
}
</script>
</body>
</html>
常用键盘事件
如果使用addEventListener,前面不需要加on
三个事件的执行顺序:onkeydown onkeypress onkeyup
键盘事件对象
类似鼠标事件对象
注意keyup和keydown不区分大小写,keypress区分大小写