目录
1.事件流:
从子节点 到 根节点 按照特定顺序执行 途径的节点的事件会被执行 这个传播的过程称为事件流
冒泡事件流(常用): 从 目标元素 到 根元素
捕获事件流(不用):从根元素 到目标元素
如果捕获和冒泡同时存在 则先执行捕获 再执行冒泡
通过onClick 绑定的事件 默认为 冒泡事件事件流
event 关键字 事件对象 事件对象包含了一系列的属性和方法
2.停止冒泡事件流:
2.1cancelBubble
event.cancelBubble = true;
2.2Propagation 传播
event.stopPropagation();
2.3Immediate 立即 如果同时绑定同一个事件则执行一个
event.stopImmediatePropagation();
3.通过添加事件监听绑定事件
添加事件监听
p1:触发事件的类型 不能添加on click
p2:事件处理函数
p3:true or false 如果第三个参数不传递 则默认为冒泡事件流
如果为true 则为捕获事件流
small.addEventListener("click", function () {
console.log(" small ======= ");
});
4.事件的代理(委托)
本质 就是利用事件的冒泡
把原本自己(li)要做的事情交给父元素ul来处理
event: 包含了当前点击的各类信息 位置 触发方式 是否按下alt
event.target:触发当前事件的元素 (点击的哪个元素);
event.currentTarget:事件绑定给了哪个元素;
event.type:事件的类型
ul.onclick = function (e) {
event.target.style.color = "red"
console.log(event);// 包含了当前点击的各类信息 位置 触发方式 是否按下alt
console.log(event.target);// 触发当前事件的元素 (点击的哪个元素); li
console.log(event.currentTarget);// 事件绑定给了哪个元素 ul
console.log(event.type);// click
}
// ul.innerText += "<li>444444</li>";// 会导致事件注销
// three.js 处理3D的
var four = document.createElement("li");
four.innerText = "4444444444";
ul.appendChild(four);
5.事件绑定的方式
<div>点我</div> <main οnclick="fn()">再点我!!!</main> <!-- 4.可读性比较差 --> <main οnclick="console.log(1111);alert('警告')">再点我!!!</main> <script> var div = document.querySelector('div'); // 1. div.onclick = function () { console.log(123) } //后者覆盖前者 div.onclick = function () { console.log(456) } // 2. 可以添加多个 都会被执行 div.addEventListener("click", function () { console.log(789); }) div.addEventListener("click", function () { console.log(0000); }) // 3.6.1 function fn() { console.log("第三种方式") } </script>
6.多个按钮绑定同一个事件
第一种方式:可以进行参数传递 不可以写变量 只能传递具体的值
<div onclick="fn(10,20)" class="d1">d1</div> <div onclick="fn('abc')" class="d2">d2</div> <!-- abc 为一个变量 是不可以这么传递的 --> <!-- <div onclick="fn(abc)" class="d2">d2</div> --> function fn(a) { console.log(a) // if(document.querySelector(".d1") === event.target){ // console.log("d11111111111111111111111111"); // event.target.style.color = "blue"; // } // if(document.querySelector(".d2") === event.target){ // console.log("d2222222222222222222222222"); // event.target.style.color = "red"; // } event.target.innerText == "d1" ? event.target.style.color = "blue" : event.target.style.color = "red"; }
<h1>第二种方式:</h1>
<main class="m1"> m 1 </main> <main class="m2"> m 2 </main> var m1 = document.querySelector('.m1'); var m2 = document.querySelector('.m2'); m1.onclick = m2.onclick = function () { if(m1 === event.target){ m1.style.color = "red"; } if(m2 === event.target){ m2.style.color = "blue"; } }
7.鼠标和键盘的事件类型
单击:
div.onclick = function () {
console.log("click");
}
双击:
div.ondblclick = function () {
console.log("双击=----");
}
鼠标按下 鼠标松开
// down - up - click
div.onmousedown = function (e) {
// 可以进行区分 左右中健
// 0 左 1 中 2 滚轮
console.log("鼠标按下", e.button);
}
div.onmouseup = function () {
console.log("鼠标松开");
}
不会冒泡 enter+leave
div.onmouseenter = function () {
console.log("鼠标进入");
}
div.onmouseleave = function () {
console.log("鼠标离开");
}
div.onmousemove = function () {
console.log("移动----");
}
main.onmouseenter = function () {
console.log("main 鼠标进入");
}
main.onmouseleave = function () {
console.log("mian 鼠标离开");
}
会冒泡 over+out
div.onmouseover = function () {
console.log('div over');
}
div.onmouseout = function () {
console.log('div out');
}
键盘的输入 down - press - up
document.onkeydown = function () {
console.log("键盘的输入");
}
document.onkeyup= function (e) {
console.log("键盘的抬起",e);
console.log(e.key); // 获取输入的字符
console.log(e.keyCode);// 获取字符的ASCII 值
}
press 按下 非 alt shift mate ctrl 才有效
document.onkeypress = function () {
console.log("键盘的press");
}
阻止冒泡demo
<style>
.box{
position: relative;
height: 500px;
background: pink;
}
span {
float: right;
margin-right: 20px;
}
.mask{
display: none;
/* 主轴排列方式 居中 */
justify-content: center;
/* 交叉轴轴 居中 */
align-items: center;
position: absolute;
top: 0;
left: 0;
background: lightblue;
width: 100%;
height: 500px;
}
.noLike{
width: 250px;
height: 250px;
border-radius: 50%;
line-height: 250px;
text-align: center;
background: lightcyan;
}
.active {
/* flex 弹性布局
6个 容器属性
6个 元素属性
*/
display: flex;
}
</style>
</head>
<body>
<div class="box">
<span>X</span>
<div class="mask">
<div class="noLike">不喜欢</div>
</div>
</div>
<script>
var box = document.querySelector('.box');
var close = document.querySelector('span');
var mask = document.querySelector('.mask');
var unlike = document.querySelector('.noLike');
close.onclick = function () {
event.stopPropagation();
mask.classList.add("active");
}
unlike.onclick = function () {
event.stopPropagation();
mask.classList.remove("active");
}
box.onclick = function () {
// bom location 位置
location.href = "http://www.baidu.com";
}
</script>