一、事件的三种方式
1 、行内绑定
2、动态绑定
3、监听绑定
一、行内绑定
注意事项:行内绑定的时候 this 是指向windower
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div onclick="fn()">盒子</div>
<script>
// 1. 绑定事件
function fn(){
console.log('行内绑定');
alert(111);
// 注意:行内绑定时,this指向window
console.log(this)
}
</script>
</body>
</html>
二 、动态绑定
注意 当调用已经写好的函数时候 就不用加()
<body>
<button id="btn3">按钮</button>
<script>
// 1.2 动态绑定
// 绑定相同的多个事件时,后面的会覆盖前面的
document.querySelector('#btn3').onclick = function(){
console.log('动态绑定');
}
document.querySelector('#btn3').onclick = function(){
console.log('动态绑定1111111');
console.log(this)
}
document.querySelector('#btn3').onclick = fn;
</script>
</body>
三、监听绑定
addEventListener:绑定监听事件,可以给同一元素绑定多个相同事件(不会发生事件覆盖)
参数一:事件类型,字符串,注意不带on前缀
参数二:事件具体要执行的函数
注意 当应用函数的时候 就可以直接用函数名 不要加括号
this 指向的元素 是被绑定的元素 也就是事件源
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn1">按钮</button>
<button id="btn2">按钮</button>
<script>
// 监听绑定
// addEventListener:绑定监听事件,可以给同一元素绑定多个相同事件(不会发生事件覆盖)
// 参数一:事件类型,字符串,注意不带on前缀
// 参数二:事件具体要执行的函数
//方式一
document.querySelector('#btn1').addEventListener('click',function(event){
alert("你好鸭");
//this 指向的是被绑定的元素(标签)
console.log(this);
})
//方式二 注意带引用函数时候 不用带括号
document.querySelector('#btn2').addEventListener('click',fn)
function fn(){
alert(111);
//this 指向的是被绑定的元素(标签)
console.log(this);
}
</script>
</body>
</html>
绑定事件行参
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 1000px;
height: 400px;
background-color: pink;
margin: 50px auto;
}
.child{
width: 500px;
height: 200px;
background-color: blueviolet;
margin: 0 auto;
}
.child1{
width: 300px;
height: 100px;
background-color: green;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box">
<div class="child">
<div class="child1"></div>
</div>
</div>
<script>
document.querySelector('.box').addEventListener('click', function(e){
console.log('事件对象,有事件相关的信息e', e);
// e.target:触发事件的元素
console.log('触发事件的元素',e.target)
console.log('绑定事件的元素(事件源)',e.currentTarget)
// this 指向绑定事件的元素(事件源)
console.log(this)
})
</script>
</body>
</html>
preventDefault()的用法 作用是 阻止默认行为(事件) 比如 a 标签的跳转
<body>
<a href="https://www.baidu.com/?tn=15007414_12_dg">跳转</a>
<script>
document.querySelector('a').addEventListener('click',function(e){
// 阻止默认行为(事件),重点
e.preventDefault();
})
</script>
</body>
阻止事件的冒泡
<div1 id="box1">
<div2 id=box2>
<div3 id=box3></div3>
</div2>
</div1>
冒泡事件
当三个盒子都绑定了监听事件时候 当点击box3 这时候会发生冒泡 box2 box1的事件监听都会发生 要使这种情况不会发生 只需要在div3上添加
e.stopPropagation(); 这个代码就好 了
最后总代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box,.box1{
width: 1000px;
height: 400px;
background-color: pink;
margin: 50px auto;
}
.child,.box2{
width: 500px;
height: 200px;
background-color: blueviolet;
margin: 0 auto;
}
.child1,.box3{
width: 300px;
height: 100px;
background-color: green;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 1.1 行内绑定 -->
<button onclick="alert('点击')">按钮</button>
<button onclick="fn()">按钮</button>
<button id="btn3">按钮</button>
<button id="btn4">按钮</button>
<button id="btn5">按钮</button>
<div class="box">
<div class="child">
<div class="child1"></div>
</div>
</div>
<a href="">跳转</a>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
<script>
// 1. 绑定事件
function fn(){
console.log('行内绑定');
alert(111)
// 注意:行内绑定时,this指向window
// 动态和监听绑定时this指向绑定事件的元素
console.log(this)
}
// 1.2 动态绑定
// 绑定相同的多个事件时,后面的会覆盖前面的
document.querySelector('#btn3').onclick = function(){
console.log('动态绑定');
}
document.querySelector('#btn3').onclick = function(){
console.log('动态绑定1111111');
console.log(this)
}
document.querySelector('#btn3').onclick = fn;
// 1.3 监听绑定
// addEventListener:绑定监听事件,可以给同一元素绑定多个相同事件(不会发生事件覆盖)
// 参数一:事件类型,字符串,注意不带on前缀
// 参数二:事件具体要执行的函数
document.getElementById('btn4').addEventListener('click', function(event){
// 执行动作
// alert(1122)
console.log('event', event)
})
document.getElementById('btn4').addEventListener('click', fn)
document.querySelector('.box').addEventListener('click', function(e){
console.log('事件对象,有事件相关的信息e', e);
// e.target:触发事件的元素
console.log('触发事件的元素',e.target)
console.log('绑定事件的元素(事件源)',e.currentTarget)
// this 指向绑定事件的元素(事件源)
console.log(this)
})
document.querySelector('a').addEventListener('click', function(event){
// 阻止默认行为(事件),重点
event.preventDefault();
// document.querySelector('a').style.color = 'blue'
// this.style.color = 'red'
event.currentTarget.style.color = 'pink'
})
// 事件的冒泡:由内到外,一层一层外往执行,box3 -> box2 -> box1 -> body (点击box3)
document.querySelector('.box1').addEventListener('click', function(e){
console.log('粉色')
})
document.querySelector('.box2').addEventListener('click', function(e){
console.log('紫色')
})
document.querySelector('.box3').addEventListener('click', function(e){
console.log('绿色')
// 阻止事件冒泡,重点
e.stopPropagation();
})
document.querySelector('body').addEventListener('click', function(e){
console.log('body')
})
document.getElementById('btn5').addEventListener('click', getFn)
function getFn(){
console.log(22222);
// 移除监听事件
document.getElementById('btn5').removeEventListener('click', getFn);
}
</script>
</body>
</html>