dom 事件
2019-04-24 本文已影响0人
不染事非
1、点击事件的方法
- onclick 缺点是： 两次点击事件，第二次会覆盖第一次的点击事件
- addEventListen 逐步的执行
2、dom三要素
- 事件源
- 事件类型
- 冒泡或捕获
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box {
width: 200px;
height: 200px;
background: gray;
}
button {
position: absolute;
left: 400px;
top: 400px;
margin: 30px;
}
</style>
</head>
<body>
<div id="box">
<button id="btn">
点击
</button>
</div>
<script>
var $btn = document.getElementById('btn');
// 有三个参数 1-事件名称 2-函数(监听器) 3-事件监听的阶段 捕获阶段 冒泡阶段
$btn.addEventListener('click', function (event) {
// 阻止事件冒泡
event.stopPropagation();
alert('点击了按钮');
}, false);
var $box = document.getElementById('box');
$box.addEventListener('click', function (ev) {
alert('box元素被点击了');
}, false);
</script>
</body>
</html>
3.事件类别
DOM事件级别.png
DOM1也是存在，只是没有涉及到事件，DOM3比DOM2多了键盘和鼠标一些事件**
DOM的事件模型： 捕获----> 冒泡
DOM的事件流（三个阶段）：捕获阶段---->目标阶段 -----> 冒泡阶段
4、DOM事件的Event对象的常见应用：
- event.preventDefault() : 阻止默认事件
- event.stopPropagation(): 阻止冒泡
- event.stopImmediatePropagation(): 除了该事件的冒泡行为被阻止之外(event.stopPropagation方法的作用),该元素绑定的后序相同类型事件的监听函数的执行也将被阻止.
- event.target: 返回触发事件的元素
- event.currentTarget: 返回绑定事件的元素
DOM的自定义事件：
var eve = new Event('eventName') //eventName 自定义事件的名称
dom.addEventListener('eventName',function(){
}) //注册事件
dom.dispatchEvent(eve); // 触发事件，
---------------------------------------------------------
这个事件不能添加参数，想要添加参数，得自定义 CustomEvent事件
// 添加一个适当的事件监听器
obj.addEventListener("cat", function(e) { process(e.detail) })
// 创建并分发事件
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}})
obj.dispatchEvent(event)
