发表于： 2020-07-30 21:57:23
1 1262
今天完成的事情：
了解事件的绑定，监听的用法及作用
事件监听有3个阶段：捕获阶段，目标阶段，冒泡
<input type="button" value="click me" onclick="hello()">
<input type="button" value="click" id="btn">
<script>
// 事件绑定
// 在DOM中直接绑定事件
function hello() {
alert("hello world!");
}
// JavaScript代码中绑定事件
document.getElementById("btn").onclick = function () {
alert("hello!");
}
// 事件监听
// element.addEventListener(event, function, useCapture)
//event : （必需）事件名，支持所有DOM事件 。
//function：（必需）指定要事件触发时执行的函数。
//useCapture：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认false。
document.getElementById("btn1").addEventListener("click", hello);
function hello() {
alert("hello the world!");
}
// 特性
// 可以绑定多个事件
var btn3 = document.getElementById("btn3");
btn3.onclick = function () {
alert("hello 1"); //不执行
}
btn3.onclick = function () {
alert("hello 2"); //执行
}
var btn4 = document.getElementById("btn4");
btn4.addEventListener("click", hello1);
btn4.addEventListener("click", hello2);
function hello1() {
alert("hello 1");
}
function hello2() {
alert("hello 2");
}
// 封装事件监听
//绑定监听事件
function addEventHandler(target, type, fn) {
if (target.addEventListener) {
target.addEventListener(type, fn);
} else {
target.attachEvent("on" + type, fn);
}
}
//移除监听事件
function removeEventHandler(target, type, fn) {
if (target.removeEventListener) {
target.removeEventListener(type, fn);
} else {
target.detachEvent("on" + type, fn);
}
}
//测试
var btn5 = document.getElementById("btn5");
addEventHandler(btn5, "click", hello1);//添加事件hello1
addEventHandler(btn5, "click", hello2);//添加事件hello2
removeEventHandler(btn5, "click", hello1);//移除事件hello1
明天的计划：
事件绑定完成滑动条
返回列表
评论