事件（events)

个人理解: 元素绑定事件, 触发行为.

事件: 绑定某种行为, 当行为触发时, 运行指定的代码(函数).

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

每个可用的事件都会有一个事件处理器，也就是事件触发时会运行的代码块.也叫事件监听器. 严格地来说这块代码既监听也处理事件。监听器留意事件是否发生，然后处理器就是对事件发生做出的回应。

常用事件

在这里插入图片描述
按钮置于焦点或解除焦点:
btn.onfocus
btn.onblur

按钮双击:
btn.ondblclick

键盘按钮按下并松开, 按下, 松开:
window.onkeypress, window.onkeydown, window.onkeyup

绑定事件的方式

函数绑定 – 推荐使用

绑定, 接触:
addEventListener() 和removeEventListener()

<body>
    <button>Change background color</button>
</body>

<script>
    const btn = document.querySelector('button');

    function random(number) {
        return Math.floor(Math.random() * (number + 1));
    }

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

    // 为元素的点击事件绑定行为
    btn.addEventListener('click', bgChange);
</script>

removeEventListener()移除事件监听器。例如:

    btn.removeEventListener('click', bgChange);

在大型的、复杂的项目中非常有用

绑定匿名函数

eg: 随机背景色

<body>
    <button>Change background color</button>
</body>
<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>
    <button onclick="bgChange()">Change background color</button>
</body>
<script>
    function random(number) {
        return Math.floor(Math.random() * (number + 1));
    }

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

这样会产生代码的相互污染, 不利于后期修改.

事件对象

函数内部的指定名称的参数.
它被自动传递给事件处理函数，以提供额外的功能和信息。

使用时, 可以直接绑定爸爸(父)元素
网页实例(写法看着好舒服)

事件对象 e 的target属性始终是事件刚刚发生的元素的引用。

在这里插入图片描述

阻止默认行为

e.preventDefault();

<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>

const form = document.querySelector('form');
const fname = document.getElementById('fname');
const lname = document.getElementById('lname');
const submit = document.getElementById('submit');
const para = document.querySelector('p');

form.onsubmit = function(e) {
  if (fname.value === '' || lname.value === '') {
    e.preventDefault();
    para.textContent = 'You need to fill in both names!';
  }
}