事件介绍-2021-07-01

作者: simok | 来源:发表于2021-07-01 16:14 被阅读0次

事件介绍-2021-07-01
LCP 07. 传递信息
淮安庆祝祖国100周年
JS中的事件机制（下）
RxJava实现事件总线（RxBus）学习笔记
Android 经典笔记之四：事件冲突解决思路与方案
Android事件冲突与解决方案
因为爱你，所以不娶你
VBA-TG第5节|事件编程
使用原生 JS 实现事件委托

什么是事件

例如：如果用户在网页上单击一个按钮，您可能想通过显示一个信息框来响应这个动作。在这篇文章中，我们将讨论一些关于事件的重要概念，并且观察它们在浏览器上如何运行。这篇文章不会面面俱到，仅聚焦于您现阶段需要掌握的知识。

事件是您在编程时系统内发生的动作或者发生的事情——系统会在事件出现时产生或触发某种信号，并且会提供一个自动加载某种动作（列如：运行一些代码）的机制

简单的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>bg-color</button>
<script>
    const btn = document.querySelector('button');
    function random(number) {
        return Math.floor(Math.random()*(number+1));
    }

    btn.onclick = function() {
        const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
        document.body.style.backgroundColor = rndCol;
    }
</script>
</body>
</html>

主要的注册事件处理器两种方式的区别

第一种

btn.onclick = function() {
        const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
        document.body.style.backgroundColor = rndCol;
    }

第二种

const btn = document.querySelector('button');

function bgChange() {
  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', bgChange);

addEventListener()

1: 使用addEventListener() 可以用removeEventListener() 函数去除
btn.removeEventListener('click', bgChange);
2: 使用addEventListener() 支持多个
myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);

btn.onclick

1: 这种情况第二个会覆盖第一个
myElement.onclick = functionA;
myElement.onclick = functionB;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>bg-color</button>
<script>
    const btn = document.querySelector('button');

    btn.addEventListener('click', f1)
    btn.addEventListener('click', f2)

    function f1() {
        alert("aasd")
    }

    function f2() {
        alert("2222")
    }
</script>
</body>
</html>

事件对象

事件对象，它被自动传递给事件处理函数，以提供额外的功能和信息 e.target 就是按钮button 我们打印出e 可以在console 上看出 target 的值是 button

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>bg-color</button>
<script>
    function bgChange(e) {
        console.log(e);
        e.target.style.backgroundColor = 'red';
    }
    
    const btn = document.querySelector('button');
    btn.addEventListener('click', bgChange);
</script>
</body>
</html>

阻止默认行为 preventDefault

阻止表单按钮点击提交, 根据需求判断表单数据阻止提交表单。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <div>
        <label for="fname">First name: </label>
        <input id="fname" type="text">
    </div>
    <div>
        <label for="lname">Last name: </label>
        <input id="lname" type="text">
    </div>
    <div>
        <input id="submit" type="submit">
    </div>
</form>


<p></p>



<script>
    const form = document.querySelector('form');
    const fname = document.getElementById('fname');
    const lname = document.getElementById('lname');
    const p = document.querySelector('p')

    form.onsubmit = function(e) {
        if (fname.value === '' || lname.value === '') {
            e.preventDefault();
            p.textContent = "表单数据不能为空"
        }
    }
</script>
</body>
</html>

事件的冒泡和捕获

代浏览器运行两个不同的阶段 - 捕获阶段和冒泡阶段。在捕获阶段：

浏览器检查元素的最外层祖先<html>，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它。
然后，它移动到<html>中单击元素的下一个祖先元素，并执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素。
在冒泡阶段，恰恰相反:

现代浏览器中，默认情况下，所有事件处理程序都在冒泡阶段进行注册

下面例子点击按钮之后会依次 alert("按钮点击") ; alert("html 点击")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <p>文字
        <button>按钮</button>
    </p>
</div>


<script>
    function fbtn() {
        alert("按钮 点击")
    }
    function fhtml() {
        alert("html 点击")
    }

    const html = document.querySelector('html')
    const btn = document.querySelector('button')
    html.addEventListener('click',fhtml)
    btn.addEventListener('click',fbtn)
</script>
</body>
</html>

修复冒泡 stopPropagation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <p>文字
        <button>按钮</button>
    </p>
</div>


<script>
    function fbtn(e) {
        e.stopPropagation();
        alert("按钮 点击")
    }
    function fhtml() {
        alert("html 点击")
    }

    const html = document.querySelector('html')
    const btn = document.querySelector('button')
    html.addEventListener('click',fhtml)
    btn.addEventListener('click',fbtn)
</script>
</body>
</html>

设置为捕获阶段

下面例子点击按钮之后会依次 ; alert("html 点击"); alert("按钮点击")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <p>文字
        <button>按钮</button>
    </p>
</div>


<script>
    function fbtn(e) {
        alert("按钮 点击")
    }
    function fhtml() {
        alert("html 点击")
    }

    const html = document.querySelector('html')
    const btn = document.querySelector('button')
    html.addEventListener('click',fhtml,true)
    btn.addEventListener('click',fbtn,true)
</script>
</body>
</html>

事件委托

冒泡还允许我们利用事件委托——这个概念依赖于这样一个事实,如果你想要在大量子元素中单击任何一个都可以运行一段代码，您可以将事件监听器设置在其父节点上，并让子节点上发生的事件冒泡到父节点上，而不是每个子节点单独设置事件监听器。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>


<script>
  function fbtn(e) {
      alert("按钮 点击")
  }
  function fhtml() {
      alert("html 点击")
  }

  function ful() {
      alert("ul 点击")
  }
  let u = document.querySelector('ul');
  u.addEventListener('click',ful);


</script>
</body>
</html>