第四天：事件对象（常用的两个属性和两个方法）

由于放假，信息没能及时更新，抱歉

学习内容：

事件对象：

在触发DOM事件的时候，都会产生一个对象

事件的常见属性

type ：获取事件类型

target：获取事件目标

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件对象</title>
</head>
<body>
<button id="btn" onclick="">按钮</button>
</body>
<script>
  document.getElementById("btn").addEventListener("click",showType);
  function showType(event){
  //  alert(event.type);   获取事件的类型 “click”，如果修改成mouseover也可以           
    alert(event.target);   获取事件的目标
  }

</script>
</html>

补充说明：
获取事件类型时，弹出对话框，对话框显示内容为click
获取事件目标时，点击按钮，弹出框如下：

事件的常见方法

stopPropagation（）：阻止事件冒泡

preventDefault（）：阻止事件默认行为

举例说明什么是事件冒泡

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件对象</title>
</head>
<body>
<div id="div">
<button id="btn" onclick="">按钮</button>
</div>
</body>
<script>
  document.getElementById("btn").addEventListener("click",showType);
  document.getElementById("div").addEventListener("click",showDiv);
  function showType(event){
 
    alert(event.target);
  }
  function showDiv(event){
      alert("div");
  }
</script>
</html>

运行结果：

点击按钮，弹出了对话框，返回事件目标，关闭对话框后，再次弹出对话框内容为“div”

虽然只是点击了按钮，但是事件向上传递，因为button属于div中，这就是事件的冒泡，如何阻止事件的冒泡，就增加如下一条代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件对象</title>
</head>
<body>
<div id="div">
<button id="btn" onclick="">按钮</button>
</div>
</body>
<script>
  document.getElementById("btn").addEventListener("click",showType);
  document.getElementById("div").addEventListener("click",showDiv);
  function showType(event){

    alert(event.target);
    event.stopPropagation();  //阻止事件冒泡
  }
  function showDiv(event){
      alert("div");
  }
</script>
</html>

阻止事件的冒泡，则第一个框弹出后，不会弹出showdiv这个函数的内容


阻止事件的默认行为

什么是事件的默认行为，例如我们添加一个连接，连接文字“百度”就会默认跳转到百度页

例如：<a href="http://www.baidu.com" >百度</a>

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件对象</title>
</head>
<body>
<div id="div">
<button id="btn" onclick="">按钮</button>
  <a href="http://www.baidu.com" id="aid">百度</a>
</div>
</body>
<script>
  document.getElementById("btn").addEventListener("click",showType);
  document.getElementById("div").addEventListener("click",showDiv);
  document.getElementById("aid").addEventListener("click",showA);
  function showType(event){
    alert(event.target);
    event.stopPropagation();
  }
  function showDiv(event){
      alert("div");
  }
  function showA(event){
    event.stopPropagation();   // 阻止了冒泡行为，不然先跳出div
    event.preventDefault();   //阻止了默认行为，打开百度
  }
</script>
</html>