事件對象
默認事件
<!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>
<a href="https://www.csdn.net/">CSDN</a>
<script>
{
var a=document.querySelector('a');
a.addEventListener('click',function(e){
// e 事件對象
console.log(e);
})
}
</script>
</body>
</html>
這裏因爲a標籤有默認跳轉事件，因此剛打印完畢事件對象e，就馬上執行跳轉了。
這裏a默認行爲是瀏覽器給的，瀏覽器給的功能都是默認事件（默認行爲）。
我們要想看事件對象，就需要阻止默認行爲！！
{
var a=document.querySelector('a');
a.addEventListener('click',function(e){
// e 事件對象
console.log(e);
// 阻止瀏覽器默認行爲！
e.preventDefault();
})
}
<!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>
<a href="https://www.csdn.net/">a標籤</a>
<script>
{
var a=document.querySelector('a');
a.addEventListener('click',function(e){
alert("a標籤！");
})
}
</script>
</body>
</html>
先執行事件監聽中事件處理函數，再執行a標籤的默認事件。
{
var a=document.querySelector('a');
a.addEventListener('click',function(e){
alert("a標籤！");
// 阻止瀏覽器默認行爲
e.preventDefault();
})
}
{
var a=document.querySelector('a');
a.addEventListener('click',function(e){
alert('a');
e.preventDefault();
},{
passive:true
});
}
事件監聽函數的第三個參數 還可以 傳遞對象：{}
capture:true/false 是否在捕獲階段執行
once:true/false 只執行一次事件
passive:false/true //阻止取消默認事件
取消事件監聽
<!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>
div{
width: 100px;
height: 100px;
background: crimson;
}
</style>
</head>
<body>
<div></div>
<input type="button" value="取消事件">
<script>
{
var div = document.querySelector('div');
var inp = document.querySelector("input");
div.addEventListener('click', function(){
alert("點擊事件");
});
inp.addEventListener('click', function(){
div.removeEventListener('click', function(){
alert("點擊事件");
});
});
}
</script>
</body>
</html>
我們發現取消了事件監聽，但沒有任何效果。
removeEventListener(event,fn)
綁定的事件函數-必須是命名函數！(不能是匿名函數)
{
var div = document.querySelector('div');
var inp = document.querySelector("input");
function fn(){
alert('點擊事件')
}
div.addEventListener('click', fn);
inp.addEventListener('click', function(){
div.removeEventListener('click', fn);
});
}
Event事件對象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background: red;
margin: 100px auto;
}
p{
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
<script>
var div=document.querySelector('div');
var p=document.querySelector('p');
// 事件函數中有一個默認參數ev（事件對象）
div.addEventListener('click',function(e){
console.log(e);
})
</script>
</body>
</html>
形參e：事件對象 - 存儲了許多和這個事件相關的屬性！
e.target 事件觸發的目標源元素
var div=document.querySelector('div');
var p=document.querySelector('p');
// 事件函數中有一個默認參數ev（事件對象）
div.addEventListener('click',function(e){
// console.log(e);
console.log(e.target);
})
沒給p標籤添加點擊事件，但是點擊之後就執行了。因爲這裏其實就是事件冒泡，點擊子元素，就相當於點擊了父元素，然後它會一層一層的往上找，找到父元素有點擊事件，那就會執行父元素的點擊事件。但這裏的target拿到的是事件觸發的目標元素，這裏主要看目標源。
（後續待補充）