目录
一、注册事件三种方式
1. 传统方式
利用 on 开头的事件 onclick
<button οnclick="alert('hi~')"></button>
btn.onclick = function(){ }
特点: 注册事件的 唯一性
同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数
2. 方法监听注册方式
eventTarget . addEventListener (type, listener[, useCapture])
eventTarget . addEventListener ()方法将指定的监听器注册到eventTarget (目标对象)上,当该对象触发指定的事件时, 就会执行事件处理函数
该方法接收三个参数:
● type : 事件类型字符串,比如click、 mouseover , 注意这里不要带on
● listener : 事件处理函数,事件发生时,会调用该监听函数
● useCapture : 可选参数,是一个布尔值,默认是false
3. attachEvent( )
eventTarget . attachEvent (eventNameWithOn, callback)
eventTarget .attachEvent ()方法将指定的监听器注册到eventTarget (目标对象)上,当该对象触
发指定的事件时,指定的回调函数就会被执行
该方法接收两个参数:
● eventNameWithOn : 事件类型字符串,比如onclick、onmouseover ,这里要带on
● callback: 事件处理函数,当目标触发事件时回调函数被调用
二、删除事件的三种方式
1. 传统方式
str.onclick = null;把注册事件赋值为 空 即可
str.onclick = function() {
alert(11);
str.onclick = null;
}
执行完一次即删除
2. 方法监听删除方式
event.removeEventListener(type,listener [, useCapture]);
因为删除时需要写要删除的事件。所以函数要另外定义
例子:
str.addEventListener('click',fun); //里面的 fn 不需要调用加小括号
function fn( ) {
alert(22);
str.removeEventListener('click',fn);
}
3. detachEvent( )
str.attachEvent('onclick',fn);
function fn() {
alert(33);
str.detachEvent('onclick',fn);
}
三、事件流理论及验证
事件流描述的是从页面中接收事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流
比如我们给一个div 注册了点击事件:
DOM事件流分为3个阶段:
1.捕获阶段
2.当前目标阶段
3.冒泡阶段
● 事件冒泡: IE最早提出,事件开始时由最具体的元素接收,然后逐级向.上传播到到DOM最顶层节点的过程。
● 事件捕获:网景最早提出,由DOM最顶层节点开始,然后逐级向下传播到到最具体的元素接收的过程。
注意
1. JS代码中只能执行捕获或者冒泡其中的一个阶段。
2. onclick 和 attachEvent 只能得到冒泡阶段
3. addEventListener (type, listener [, useCapture] )第三个参数如果是true ,表示在事件捕
获阶段调用事件处理程序;如果是false (不写默认就是false ) ,表示在事件冒泡阶段调用事件处理
程序
4. 有些事件是没有冒泡的,比如 onblur、onfocus、 onmouseenter、onmouseleave
四、事件对象
1. str.onclick = function(event) {
console.log(event);
}2. str.addEventListener ('click',function(event) {
console.log(event);
})
官方解释: event 对象代表事件的状态,比如键盘按键的状态、鼠标的位置、鼠标按钮的状态
补充:
1. event 就是一个事件对象,写到我们侦听函数的 小括号里面 当形参来看
2. 事件对象只有有了事件才会存在,它是系统给我们自动创建的,不需要我们传递参数
3.事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象event.它有很多属性和方法
4. 这个事件对象我们可以自己命名 比如 event 、 evt 、e
5.事件对象也有兼容性问题 ie678 通过 window.event 获取,一个字也不能差
6. 解决兼容性问题: e = e || window.event; console.log(e);
如果识别 e 就输出 e 否则 就另一个
五、事件对象常见属性和方法
事件对象常见属性和方法:
1. e.target 和 this 的区别
div.addEventListener('click', function(e){
console.log(e.target); //要写这个function 括号里面必须也写 e
console.log(this);
console.log(e.currentTarget);
})
区别:
1. e.target 返回的是出发事件的对象(元素)即点了谁返回谁; this 返回的是绑定事件的对象(元素)即谁绑定的这个点击事件就返回谁.
2. [了解] 跟 this 相似的属性 currentTarget ie678不认识,返回的也是绑定的对象
2. 阻止默认行为
阻止默认行为(事件) 让链接不跳转 或者让提交按钮不提交
一、 方法监听注册方式
str.addEventListener('click', function(e){
e.preventDefault();
//dom 标准写法
})
二、 传统的注册方式
str.onclick = function(e) {
//普通浏览器 此为方法,要加 ( )
e.preventDefault( );
// 低版本浏览器 ie678 此为属性
e.returnValue;
// 利用 return false 也能阻止默认行为 没有兼容性问题 特点: return 后面的代码不执行了而且只限于传统的注册方式
return false;
alert(11);
}
3.阻止事件冒泡
1.标准写法:利用事件对象里面的 stopPropagation() 方法
2.非标准写法: IE 6-8 利用事件对象 cancelBubble 属性
son.addEventListener('click', function(e){
alert('son');
e.stopPropagation( );
e.cancelBubble = true;
})
4.事件委托
事件委托也称为事件代理,在jQuery里面称为事件委派
事件委托的原理:
不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点
案例:给 ul 注册点击事件,因为点击li,事件会冒泡到ul 上,ul 有注册事件,就会触发事件监听器.如果想要改变所点击 li 的背景颜色,可以利用事件对象的target来找到当前点击的li,改其背景颜色.
事件委托的作用: 只操作一次DOM,提高了程序的性能
5. 禁止选中文字和禁止右键菜单
5.1 禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单
document.addEventListener ('contextmenu', function(e) {
e. preventDefault () ;
})
5.2 禁止鼠标选中( selectstart开始选中)
document.addEventListener ('selectstart', function(e) {
e.preventDefault();
})
6.鼠标事件对象
鼠标事件对象 | 说明 |
---|---|
e.clientX | 返回鼠标相对于浏览器窗口可视区域的 X 坐标 |
e.clientY | 返回鼠标相对于浏览器窗口可视区的 Y 坐标 |
e.pageX | 返回鼠标相对于文档页面的 X 坐标 IE9+ 支持 |
e.pageY | 返回鼠标相对于文档页面的 Y 坐标 IE9+ 支持 |
e.screenX | 返回鼠标相对于电脑屏幕的 X 坐标 |
e.screenY | 返回鼠标相对于电脑屏幕的 Y 坐标 |
案例:跟随鼠标移动的图标(图片可以随便放一张自己喜欢的)
<title>Document</title>
<style>
img {
position: absolute;
}
</style>
</head>
<body>
<img src="../images/angel.gif" alt="">
<script>
var pic = document.querySelector('img');
document.addEventListener('mousemove',function(e){
var x = e.pageX;
var y = e.pageY;
pic.style.top = y - 40 + 'px';
pic.style.left = x - 45 + 'px';
})
</script>
</body>
六、常用的键盘事件
事件除了使用鼠标触发,还可以使用键盘触发。
键盘事件 | 触发条件 |
---|---|
onkeyup | 某个键盘按键被松开时触发 |
onkeydown | 某个键盘按键被按下时触发 |
onkeypress | 某个键盘按键被按下时 触发 |
注意:
1.如果使用addEventListener不需要加 on
2. onkeypress 和前面2个的区别是,它不识别功能键,比如左右箭头, shift 等。
3.三个事件的执行顺序是: keydown --- keypress --- keyup
案例:按下 s 键获取焦点
<title>Document</title>
</head>
<body>
<input type="text">
<script>
var ipt = document.querySelector('input');
document.addEventListener('keyup', function(e){
if(e.keyCode === 83) {
ipt.focus();
}
})
</script>
</body>