发表于： 2022-12-26 20:05:27
0 323
今天学习的js知识点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册事件两种方式</title>
</head>
<body>
<button>传统注册事件</button>
<button>方法监听注册事件</button>
<button>attachEvent</button>
<script>
var btns = document.querySelectorAll('button');
//1.传统方式注册事件
btns[0].onclick = function () {
alert('hi');
}
btns[0].onclick = function () {
alert('hao a you');
}
//2.事件侦听注册事件 addEventListener
//(1)里面的事件 类型是字符串 必定加引号 而且是 click 不带on
//(2)同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
btns[1].addEventListener('click', function () {
alert('2');
})
btns[1].addEventListener('click', function () {
alert('22');
})
//3.attachEvent ie9以前的版本支持
// btns[2].attachEvent('onclick',function () {
// alert('33')
// } )
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除事件</title>
<style>
div {
width: 100px;
height: 100px;
margin: 10px 0;
background-color: red;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
var divs = document.querySelectorAll('div');
divs[0].onclick = function () {
alert(11);
//1.传统方式删除事件
divs[0].onclick = null;
}
//2.removeEventListener 删除事件
divs[1].addEventListener('click', fn) //里面的fn 不需要调用加小括号
function fn() {
alert(22);
divs[1].removeEventListener('click',fn);
}
//3. detachEvent 删除事件
// divs[2].attachEvent('onclick', fn1)
// function fn1() {
// alert(33);
// div[2].detachEvent('onclick', fn1);
// }
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM事件流</title>
<style>
.father {
margin: 100px auto;
width: 100px;
height: 100px;
background-color: pink;
}
.son {
margin:auto;
width: 50px;
height: 50px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son盒子</div>
</div>
<script>
//dom 事件流三个阶段
//1. js 代码中只能执行捕获或者冒泡其中的一个阶段
//2.onclick 和 attachEvent(ie) 只能得到冒泡阶段
//3. 捕获阶段 如果 addEventListener 第三个参数是 true 那么则处于捕获阶段
// 捕获阶段 document -> html -> body -> father -> son
// var son = document.querySelector('.son');
// son.addEventListener('click', function (){
// alert('son');
// }, true)
//
// var father = document.querySelector('.father');
// father.addEventListener('click', function (){
// alert('father');
// }, true)
//4. 冒泡阶段 如果 addEventListener 第三个参数是 false或者胜率 那么则处于冒泡阶段
// 冒泡阶段 son -> father -> body -> html -> document
var son = document.querySelector('.son');
son.addEventListener('click', function (){
alert('son');
}, false)
var father = document.querySelector('.father');
father.addEventListener('click', function (){
alert('father');
}, false)
document.addEventListener('click', function () {
alert('document');
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件对象</title>
<style>
div {
height: 100px;
width: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>123</div>
<script>
//事件对象
var div = document.querySelector('div');
// div.onclick = function (event) {
// console.log(event);
// }
div.addEventListener('click',function (e) {
console.log(e);
})
//1. event 就是一个事件对象 写到我们的侦听函数的 小括号里面 当形参来看
//2.事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
//3.事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，
//鼠标坐标啊，如果是键盘事件里面就包含的键盘事件信息 比如 判断用户按下个那个键
//4.这个事件对象我们可以自己命名 比如 event 、evt 、 e
//5.事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法 e = e || window.event;
</script>
</body>
</html>
返回列表
评论