JS第十二次笔记1.阻止默认行为 2.移除事件监听无论点击几次L2和L0 都只会执行一次因为在触发一次之后就已经解绑

1.阻止默认行为

//1.阻止点击链接之后跳转到相应网站
<!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.baidu.com/">click it to turn to baidu</a>
  <script>
    //点击"click it to turn to baidu"会默认跳转到baidu.com
    //阻止默认行为
    const a = document.querySelector('a');
    a.addEventListener('click', function (e) {
      //1.阻止默认行为
      e.preventDefault();
      alert('阻止成功')
    })

  </script>
</body>

</html>

//阻止提交之后再button处绑定提交事件，在阻止默认行为的前提下，点击按钮又可以跳转
//注意：是from标签提交的事件而不是button
<!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.baidu.com/">click it to turn to baidu</a>
  <br>
  <form action="https://www.baidu.com/">
    <button type="submit">提交</button>
  </form>
  <script>
    //点击"click it to turn to baidu"会默认跳转到baidu.com
    //阻止默认行为
    const a = document.querySelector('a');
    a.addEventListener('click', function (e) {
      //1.阻止默认行为
      e.preventDefault();
      alert('阻止成功')
    })

  </script>
</body>

</html>

2.移除事件监听

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>移除事件监听</title>
</head>


<body>
  <button class="L2">移除L2的事件监听</button>
  <button class="L0">移除L0的事件监听</button>
  <script>
    ////////l2的事件移除 注意：不能移除匿名函数,所以只能使用具名函数
    const L2 = document.querySelector('.L2');
    function fn() {
      console.log('L2执行了一次');
      L2.removeEventListener('click', fn)
    }
    L2.addEventListener('click', fn)
    //移除事件监听



    ////////l0的事件移除 可以使用匿名函数
    const L0 = document.querySelector('.L0');

    L0.onclick = function () {
      console.log('L0执行一次了');
      L0.onclick = null//使用null值覆盖 以达到事件移除的效果
    }
  </script>
</body>

</html>

无论点击几次L2和L0 都只会执行一次因为在触发一次之后就已经解绑

（1）两种注册事件的区别

3.其他事件

（1）页面加载事件

<1>load事件

<!DOCTYPE html>
<html lang="en">

![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b36e47ba303847f2a34d4fae4f759428~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg54ix5rOh6ISa55qE6bih6IW_:q75.awebp?rk3s=f64ab15b&x-expires=1775809404&x-signature=e4MBZbKVyYLi9UnitpsSn82oF1U%3D)
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面加载</title>

![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/70d74f76fcdd4304a40189c63c8d93d8~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg54ix5rOh6ISa55qE6bih6IW_:q75.awebp?rk3s=f64ab15b&x-expires=1775809404&x-signature=cb9vf6pmthwb0Pe5L8rOhOZWL9E%3D)

![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/5d256a364722435b84b9bd52d579272a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg54ix5rOh6ISa55qE6bih6IW_:q75.awebp?rk3s=f64ab15b&x-expires=1775809404&x-signature=DCgbRlCZs5FCkvJAss%2FaZefNtZk%3D)
  <script>
    window.addEventListener('load', function () {
      //若不使用load，则页面加载完毕之前，div中的文本不会被修改，而且会报错
      //因为程序执行的顺序是从上到下的，使用load会先加载页面事件监听，再执行页面加载完毕事件
      //load可以让代码放置在任何位置而且不影响执行
      console.log('页面加载完毕')
      const div = document.querySelector('div')
      div.innerHTML = '现在是新文本了'
    })
  </script>
</head>

<body>
  <div>文本</div>
</body>
</html>

注意：load事件是监听页面所有资源加载完毕的，所以当页面资源过多，load事件的执行效率就会低下 所以，遇到这种情况，我们不止可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件

<2>DOMcontenLoaded

只要html加载完就触发，而不会等待css 视频 js 图片等

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面加载</title>
  <script>
    //2.html元素加载事件：DOMcontentLoaded
   document.addEventListener('DOMContentLoaded', function () {
      const div = document.querySelector('div')
      div.innerHTML = 'DOM文本'

    })
  </script>
</head>
<body>
  <div>文本</div>
</body>
</html>

（2）页面滚动事件

可以给Window或者document添加scroll事件

<1>给Window加页面滚动事件

//监听页面的滚动（Window）
<!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>
    body {
      /* 最小高度为 3000px 当3000px时候 页面自动弹出滚动条*/

      min-height: 3000px;
    }
  </style>
</head>

<body>
  <script>
    //给Window绑定滚动事件
    //scroll是一个持续触发的事件，所以当滚动时，控制台会不断地输出console.log()的内容
    window.addEventListener('scroll', function () {
      console.log('执行了几次')
    })
  </script>
</body>
</html>

scroll是一个持续触发的事件，所以当滚动时，控制台会不断地输出console.log()的内容

<2>给某个元素添加scroll事件（div）

<!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>
<style>
  div {
    width: 300px;
    height: 100px;
    overflow: auto;
    /* auto：若超出，则自动生成滚动条 */

  }
</style>

<body>
  <div>
    1
    <br>
    2
    <br>
    3
    <br>
    4
    <br>
    5
    <br>
    6
    <br>
    7
    <br>
    8
    <br>
    9
    <br>
    10
    <br>
    11
    <br>
    12
    <br>
    13
    <br>
    14
    <br>
    15
    <br>
    16
    <br>
    17
    </br>
  </div>
  <script>
    const div = document.querySelector('div')
    div.addEventListener('scroll', function () {
      console.log('<==执行了')
    })
  </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>
</head>
<style>
  div {
    width: 300px;
    height: 100px;
    overflow: auto;
    /* auto：若超出，则自动生成滚动条 */

  }
</style>

<body>
  <div>
    1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
    <br>
    2 2
    <br>
    3
    <br>
    4
    <br>
    5
    <br>
    6
    <br>
    7
    <br>
    8
    <br>
    9
    <br>
    10
    <br>
    11
    <br>
    12
    <br>
    13
    <br>
    14
    <br>
    15
    <br>
    16
    <br>
    17
    </br>
  </div>
  <script>
    const div = document.querySelector('div')
    div.addEventListener('scroll', function () {
      const n = div.scrollTop
      const m = div.scrollLeft
      //得到向下滚动的距离
      console.log(n)
      //得到向右滚动的距离
      console.log(m)

    })
  </script>
</body>

</html>