事件对象
- 是个对象，这个对象里有事件触发时的相关信息
获取
- 在事件绑定的回调函数的第一个参数就是事件对象
- 一般命名为event、ev、e
常用属性
-
type
- 获取当前的事件类型
-
clientX/clientY
- 获取光标相对于视口左上角的位置
-
offsetX/offsetY
- 获取光标相对于当前DOM元素左上角的位置
-
跟随鼠标案例
- <body>
<img src="./images/tianshi.gif" alt="" />
<script>
// 获取元素
let img = document.querySelector('img')
// 添加监听
document.addEventListener('mousemove', function (e) {
// 把鼠标位置赋值给图片
console.log(e.clientX, e.clientY);
img.style.left = e.clientX - img.offsetWidth / 2 + 'px'
img.style.top = e.clientY + 'px'
})
</script>
</body>
- 按下回车发布微博案例
// 添加enter的事件
area.addEventListener('keyup', function (e) {
// 添加判断
if (e.key === 'Enter') {
console.log(e);
send.click()
}
事件流
事件流指的是事件完整执行过程中的流动路径
事件冒泡
- 当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发的过程
- 当一个元素触发事件后，会依次向上调用所有父级元素的同名事件
- 事件冒泡是默认存在的
事件捕获
- 从DOM的根元素开始去执行对应的事件 (从外到里)
阻止事件流动
-
因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
-
事件对象 . stopPropagation() -
以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效
-
鼠标经过事件
- mouseover 和 mouseout 会有冒泡效果
- mouseenter 和 mouseleave 没有冒泡效果(推荐)
-
e.preventDfault()
- 阻止默认行为，比如链接点击不跳转，表单域的不提交
事件委托
-
事件委托其实是利用事件冒泡的特点， 给父元素添加事件，子元素可以触发
-
给父级元素加事件（可以提高性能）
-
事件对象.target 可以获得真正触发事件的元素
<body>
<button>添加li元素</button>
<ul>
<li>我是第1个小li</li>
<li>我是第2个小li</li>
<li>我是第3个小li</li>
<li>我是第4个小li</li>
<li>我是第5个小li</li>
</ul>
<script>
// 获取元素
let ul = document.querySelector('ul')
let btn = document.querySelector('button')
// 绑定父元素
btn.addEventListener('click', function (e) {
// 创建li
let newli = document.createElement('li')
newli.innerHTML = '新li'
// li插入ul
ul.append(newli)
})
// 事件委托
ul.addEventListener('click', function (e) {
e.target.style.color = 'red'
})
</script>
</body>
