一、事件添加
1.使用多种方式为元素添加事件
(1)通过事件属性为元素添加事件
事件属性:通过属性为元素添加事件,这个属性即事件属性。语法:on+事件,如onclick,onclick即为一个事件属性。
<!-- 通过事件属性添加事件 按钮1234-->
<div>
<button onclick="console.log((document.querySelector('button')).innerText);">按钮1</button>
<button onclick="BtnClick2()">按钮2</button>
<button onclick="BtnClick3(this)">按钮3</button>
<!--传递当前事件对象 -->
<button onclick="BtnClick4(event)">按钮4</button>
</div>
<script>
function BtnClick2() {
console.log(document.querySelector("button:nth-of-type(2)").innerText);
}
function BtnClick3(ev) {
console.log(ev.innerText);
}
function BtnClick4(ev) {
console.log(ev.target); //event对象代表对事务的状态 属性target返回触发事件的元素
}
</script>
(2)通过脚本为元素添加事件(给元素对象添加事件)
<!-- 通过脚本添加事件 不需要添加事件属性 -->
<div class="btn">
<button class="btn5">按钮5</button>
<button class="btn6">按钮6</button>
<button class="btn_ad">广告按钮</button>
</div>
<script>
const btn5 = document.querySelector(".btn5");
btn5.onclick = (ev) => console.log(ev.target); //传入元素event对象 event.type为事件名称
//onclick只能添加一个事件 使用事件监听器可以添加多个事件
//addEventListener(事件名称,回调方法,传递机制:捕获/冒泡)
//false:冒泡 true:捕获
const btn6 = document.querySelector(".btn6");
btn6.addEventListener(
"click",
(ev) => console.log(ev.target.innerText),
false
);
// btn6.addEventListener("mouseover", () => console.log("移入"), false);
// btn6.addEventListener("mouseout", () => console.log("移出"), false);
//使用事件派发器自动执行某个工作
const btn_ad = document.querySelector(".btn_ad");
btn_ad.addEventListener(
"click",
(ev) => console.log("广告已经点击"),
false
);
//创建一个点击事件的实例
const ev = new Event("click");
//btn_ad.dispatchEvent(ev);
setInterval(() => btn5.dispatchEvent(ev), 1000); //dispatchEvent() 方法给节点分派一个合成事件。
</script>
dispatchEvent() 方法给节点派发一个事件。(自定义事件)
setInterval()方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval(fn/string,毫秒)
二、事件传递机制
1.捕获 true
const grandpa = document.querySelector(".grandpa");
const father = document.querySelector(".father");
const son = document.querySelector(".son");
grandpa.addEventListener(
"click",
(ev) =>
console.log(
" grandpa 触发元素:%s,绑定元素:%s",
ev.target.classList.item(0), //classList.item[index]返回元素中索引值对应的类名,索引从0开始
ev.currentTarget.classList.item(0) //currentTarget返回其监听器触发事件的节点
),
true
);
father.addEventListener(
"click",
(ev) =>
console.log(
" father 触发元素:%s,绑定元素:%s",
ev.target.classList.item(0),
ev.currentTarget.classList.item(0)
),
true
);
son.addEventListener(
"click",
(ev) =>
console.log(
" son 触发元素:%s,绑定元素:%s",
ev.target.classList.item(0),
ev.currentTarget.classList.item(0)
),
true
);
2.冒泡 flase
阻止事件冒泡:stopPropagation()和window.event.cancelBubble = true
阻止默认行为:preventDefault()和return false
三、事件代理
根据冒泡原理 子元素的同名事件会向上冒泡父级元素的同名事件。 所以直接将事件添加给父元素就可以,可以极大的简化代码和业务逻辑。轮播图和选项卡中运用会多点。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
const ul = document.querySelector("ul");
ul.addEventListener("click", (ev) =>
console.log("第%s个列", ev.target.innerText)
);//给父元素ul添加点击事件
</script>
四、总结
想了很久才明白冒泡和捕获的区别,事件代理的意思也好理解。但是让我有点沮丧的是,可能是前面有些地方学的没到位,学到这里自己想着写个轮播图或者选项卡还是有点困难,还是要看后面老师讲的案例再去背和写了。