1.注册事件(绑定事件)
给元素添加事件,称为注册事件或绑定事件
注册事件有两种方式:传统方式和方法监听注册方式
1.传统注册方式
利用on开头的事件onclick,onblur…
特点:注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数
2.方法监听事件
W3c标准 推荐方式
addEventListence()
IE9之前的IE不支持此方法,可使用attachEvent()代替
特点:同一个元素同一个事件可以注册多次
按注册顺序依次执行
addEventListener事件监听方式
eventTarget.addEventListener(type,listener[,useCapture])
将指定的监听器注册到eventTarget(目标对象)上;当该对象参数触发指定的事件,就会执行事件处理函数。
type:事件类型字符串,比如click,mouseover,注意这里不要带on
**listener:**事件处理函数,事件发生时,会调用该监听函数
useCapture:可选一个参数,是一个布尔值,默认时false
**(1)addEventListener() IE9以上 **
<body>
<button>按钮</button>
<script>
var but = document.querySelector('button');
but.addEventListener('click',function(){
alert('123');
})
</script>
</body>
注意:addEventListener里面的事件类型是字符串,要加引号,并且不带on
(2)attachEvent() IE9以前 不建议使用
<body>
<button>按钮</button>
<script>
var but = document.querySelector('button');
but.attachEvent('onclick',function(){
alert('123');
})
</script>
</body>
2.删除事件(解绑事件)
1.传统注册方式
eventTarget.onclick = null;
2.方法监听注册方式
(1)eventTarget.removeEventListener(type,listener[,useCapture])
<body>
<button>按钮</button>
<script>
var but = document.querySelector('button');
but.addEventListener('click',fn);//这里的fn不需要调用加小括号
function fn(){
alert('123');
but.removeEventListener('click',fn);
}
</script>
</body>
(2)eventTarget.datachEvent();
<body>
<button>按钮</button>
<script>
var but = document.querySelector('button');
but.attachEvent('onclick',fu);
function fu(){
alert('123');
but.datachEvent('onclick',);
}
</script>
</body>
3.DOM事件流
事件流描述的是从页面中接受事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程叫DOM事件流
DOM事件流分3个阶段
1.捕获阶段 从上往下依次捕获
2.当前目标阶段
3.冒泡阶段 从下往上
注意:
1.JS代码只能执行捕获或者冒泡其中一个阶段
2.onclick和attchEvent(ie9以前版本)只能得到冒泡阶段
3.addEventListener(type,listener[,useCapture])第三个参数如果时true,表示在事件捕获阶段调用事件处理程序;如果是false,表示在事件冒泡阶段调用事件处理程序
4.实际开发中我们很少用事件捕获,我们更关注事件冒泡
5.有些事件是没有冒泡的,比如onblur,onfocus,onmouseenter,onmouseleave
6.事件冒泡有时候会带来麻烦,有时候又会帮助很巧妙的做某些事件
4.事件对象
<body>
<div>123</div>
<script>
var div = document.querySelector('div');
div.onclick = function(e){
//e = e||window.event//解决兼容性问题
console.log(e);
}
//1.event就是一个事件对象,写在监听函数的小括号里 当形参看
//2.事件对象只有有了事件才会存在,系统自动创建,不需要传递参数
//3.事件对象是事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击就包含了鼠标的相关信息,鼠标坐标
//事件对象可以自己命名比如event,evt,e
//事件对象有兼容性问题,ie678通过window.event兼容性写法 e= e||window.event
</script>
</body>
1.常见的事件对象属性和方法
1.
<div>123</div>
<script>
var div = document.querySelector('div');
div.addEventListener(e){
console.log(e.target);//返回触发事件的对象(元素)
console.log(this);//this返回绑定事件的对象(元素)
}
</script>
事件对象属性方法 | 说明 |
---|---|
e.target | 返回触发事件的对象 标准 |
e.srcElement | 返回触发事件的对象 非标准 ie6-8 |
e.type | 返回事件的类型 比如click mouseover 不带on |
e.returnValue | 该属性阻止默认行为 非标准ie6-8使用 比如不让链接跳转 |
e.preventDefault() | 该方法阻止默认事件 标准 比如不让链接跳转 |
e.stopPropagation() | 阻止冒泡 标准 |
阻止事件冒泡(面试可能会问)
1.标准:利用事件对象里面的stopPropagation()方法
e.stopPropagation()
2.非标准:IE6-8利用事件对象cancelBubble属性
e.cancelBubble = true
事件委托
事件委托也称事件代理,在jQuery里面称为事件委派
事件委托的原理(面试可能会问)
不是给每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点
7.常用的鼠标事件
1.常见的鼠标事件
(1)禁止鼠标右键菜单contextmenu
<body
不愿分享的文字
<script>
document.addEventListener('contextmenu',function(e){
e.preventDefault();
})
</script>
</body>
(2)禁止鼠标选中(selectstart 开始选中)
<body
不愿分享的文字
<script>
document.addEventListener('selectstart',function(e){
e.preventDefault();
})
</script>
</body>
2.鼠标事件对象
鼠标事件对象 | 说明 |
---|---|
e.clientX | 返回鼠标相对于浏览器窗口可视区的X坐标 |
e.clientY | 返回鼠标相对于浏览器窗口可视区的Y坐标 |
e.pageX | 返回鼠标相对于页面的X坐标 IE9+支持 |
e.pageY | 返回鼠标相对于页面的Y坐标 IE9+支持 |
e.screenX | 返回鼠标相对于电脑屏幕的X坐标 |
e.screenY | 返回鼠标相对于电脑屏幕的Y坐标 |
8.常用的键盘事件
键盘事件 | 触发条件 |
---|---|
onkeyup | 某个键盘键被松开时触发 |
onkeydown | 某个键盘被按下时触发 |
onkeypress | 某个键盘被按下是触发 但是它不识别功能键 比如ctrl shift等 |
三个事件执行顺序:keydown-keypress-keyup
2.键盘事件对象
键盘事件对象 | 说明 |
---|---|
keyCode | 返回该键的ASCII值 |
注意:
onkeydown和onkeyup 不区分大小写,onkeypress区分字母大小写
在实际开发中,我们更多的使用keyup和keydown,它们能识别所有的键(包括功能键)
keypress不识别功能键,但keyCode属性能区分大小写,返回不同的ASCII值