事件高级
前言
一、注册事件?
1.1注册事件概述
给元素添加事件,成为注册事件或者绑定事件
传统方法和方法监听注册方式
-
传统方法
传统的注册方式:具有注册事件的唯一性。同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数会覆盖注册的处理函数 -
方法监听注册
addEvenlistener
事件监听方式
eventTarget.addEventListener(type , listener [, useCaptuer])
eventTarget.addEventListener()
方法将指定的监听器注册到eventTarget(目标对象)上,当该对象触发指定事件时,就会执行事件处理函数
❤ 该方法接受的三个参数
type:
事件类型字符串、比如click mouseover ,注意这里不用带on
listener:
事件处理函数,事件发生时,会调用该监听函数
useCapture:
可选参数,是一个布尔值,默认是false。
- 删除事件/解绑事件
删除事件removeEventListener()
<button>夕颜</button>
<button>666</button>
<script>
var btns = document.querySelectorAll('button');
btns[0].onclick = function() {
alert('你太帅了');
}
//事件侦听处理程序 addEventListener
//里面的事件类型是字符串 必定加引号 而且不带On
//同一个元素 同以一个事件类型可以添加多个监听器(事件处理程序)
// btns[1].addEventListener('click',function() {
// alert(666);
// })
// btns[1].addEventListener('click',function() {
// alert('你好帅啊');
// })
btns[1].addEventListener('click',fn) // 里面的fn 不需要调用加小括号
function fn() {
alert('你也帅');
}
// 删除事件 removeEventListener
function fn() {
alert('你也帅');
btns[1].removeEventListener('click',fn);
}
</script>
二、DOM事件流
事件流描述从页面接受事件的顺序
事件发生的时会给元素节点之间按照特定顺序传播,这个传播过程即DOM事件流。
比如我们给 <Div></Div>
注册事件有三个阶段
- 1.捕获阶段
- 2.处于目标阶段
- 3.冒泡阶段
JS代码只能执行冒泡或者捕获其中的一个阶段
onclick
只能得到冒泡阶段
捕获阶段 如果 addEventListener
第三个参数是 true
那么则处于捕获阶段 document -> html -> body -> 元素
第三个参数是 false
或者为空 那么则处于冒泡阶段 元素 -> body -> html -> ducument
有些事件是没有冒泡的,比如 onblur,onfous,onmouseenter,onmouseleave. -->
2.常见的事件对象以及方法
事件对象属性方法 | 说明 |
---|---|
e.target | 点击了那个元素 就返回那个元素。 |
e.type | 返回事件的类型 比如click,mouseover , 不带on |
e.srcElement | 返回触发事件的对象 |
e.cancelBubble | 该属性阻止冒泡 |
e.returnValue | 该属性阻止默认事件(默认行为) 比如不让链接跳转 |
e.preventDefault() | 该方法阻止默认事件(默认行为) 比如不让链接跳转 dom标准写法 |
e.stopPropagation | 阻止冒泡规则 ,停止冒泡行为 |
<div>123 </div>
<ul>
<li>夕颜</li>
<li>夕颜</li>
<li>夕颜</li>
</ul>
<script>
// e.target 返回的是触发事件对象(元素) this返回的是绑定事件的对象(元素)
// 区别 e.target 点击了那个元素 就返回那个元素。
var div = document.querySelector('div');
div.addEventListener('click',function(e) {
console.log(e.target);
} )
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e){
console.log(this); 返回绑定的事件ul
console.log(e.target); //返回点击的li
})
</script>
代码如下(示例):
data = pd.read_csv(
'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())
事件委托
<!-- 事件委托原理: 不是给每个子节点单独设置监听器,而是事件监听器设置在父节点上,然后利用冒泡原理影响设置每个子节点 -->
<!-- 以上案例:给ul注册点击事件,然后利用事件对象的target属性来找到当前点击的li 因为点击li 事件会冒泡到ul上,ul有注册事件 ,就会触发事件监听器。 -->
<!-- 事件委托作用: 只操作了一次DOM -->
<ul>
<li>1</li>
<li>12</li>
<li>123</li>
<li>1234</li>
<li>12345</li>
</ul>
<script>
// 事件委托原理:给父节点添加侦听器,利用事件冒泡影响每一个子节点
var ul = document.querySelector('ul');
ul.addEventListener('click',function(e){
alert('123');
e.target.style.backgroundColor = 'red';
})
</script>
- 常见的鼠标对象
<script>
// 1.contextmenu 我们可以禁用右键菜单
document.addEventListener('contextmenu',function(e){
e.preventDefault();
})
// 2.禁止选中文字 selectstart
document.addEventListener('selectstart',function(e){
e.preventDefault();
})
// 鼠标事件对象MouseEvent
document.addEventListener('click',function(e){
// 1.client 鼠标在可视区里面的x和y坐标
console.log(e.clientX);
console.log(e.clientY);
console.log('---------------------');
// 2.page 鼠标在页面文档中的坐标
console.log(e.pageX);
console.log(e.pageY);
console.log('---------------------');
//3.screen 鼠标在电脑屏幕的坐标
console.log(e.screenX);
console.log(e.screenY);
console.log('---------------------');
})
</script>
案例
❤CSS设置
<style>
/* body {
position:relative;
} */
img {
position: absolute;
}
</style>
❤HTML设置
```javascript
<!-- 鼠标不断移动,使用鼠标移动事件 : mousemove
在页面中移动,给docunment注册事件
图片要移动距离,而且不占用位置,我们使用绝对定位即可
核心原理: 每次鼠标移动,我们都会获得最新的鼠标坐标,把这个坐标的x和y作为图片的top和left值就可以移动图片 -->
<img src="images/angel.gif" alt="">
❤JS设置
<script>
var img = document.querySelector('img') ;
document.addEventListener('mousemove',function(e){
// 1.mousemove 只要我们移动1px 就会触发这个事件
// 2.核心原理 :每次鼠标移动,我们都会获得最新的鼠标坐标,把这个坐标的x和y作为图片的top和left值就可以移动图片
var x = e.pageX;
var y = e.pageY;
console.log(x);
img.style.left = x -36+ 'px';
img.style.top = y -40 + 'px';
})
</script>
- 常见的键盘对象
事件除了鼠标还能用键盘触发
onkeyup
某个键盘按键被送松开时触发
onkeydown
某个键盘按键被按下时触发
onkeypress
某个键盘按键被按下时触发 但是她不能识别功能键 比如 shift ctrl 等
如果使用addEventListener不需要加on
三个事件的执行顺序是 keydown----keypress-----keyup
<script>
document.addEventListener('keyup',function(e){
console.log(e.key); //输出按下的是哪个键
})
</script>
案例-模拟京东按键输入内容
核心思路:用户按下s键就把光标自动定位到搜索框
<style>
/* body {
position:relative;
} */
</style>
</head>
<body>
<input type="text">
<script>
var ipt = document.querySelector('input')
document.addEventListener('keyup',function(e){
if (e.key == 's')
ipt.focus();
})
</script>
总结
<<--------------------------------------------DOM到这就全部结束------------------------------->>
下一个篇章更新BOM