[Day 25]从零开始学习 JS 的连续-30 Days---addEventListener 事件监听

addEventListener 事件监听

  1. JavaScript 是一个事件驱动 (Event-driven) 的程序语言,当浏览器载入网页开始读取,虽然马上会读取 JavaScript 事件相关的程序码,但是必须等到「事件」被触发(如使用者点击、按下键盘等)後,才会'再'进行对应程序的执行,也就是事件监听 addEventListener
  2. addEventListener 的写法出现前,是在 HTML 的标签内直接写入事件。
  3. onclick是比较旧的写法,也没什麽不对,那现在前端为了避免 XSS 攻击事件,所以都尽量不在 HTML 标签上写上 script 相关标签,以免被加入程序码。(XSS攻击事件今天不讨论此事)
<input type="button"  onclick="clickBtn()" class="btn" value="click">
function clickBtn() {
  alert("Hello world!");
}
  1. addEventListener的写法 :
<input type="button" value="click" class="btn">

var button = document.querySelector(".btn");
button.addEventListener(
  "click",
  function () {
    alert("HELLO WORLD!");
  },
  false
);
  1. addEventListener有三个参数

    1. 选择要出现的事件,事件有很多种,不只是 click。

    2. 中间为匿名 function,带入要出现的功能。

    3. 布林值,决定要不要产生冒泡事件,如果不指定,会自动产生冒泡事件。(预设值为false)(下次再讨论。)

  2. onclickaddEventListener 的差别

    1. onclick 无法绑定两个事件。
    2. addEventListener 可以绑定多个事件。
<input type="button" value="btn1" class="btn1">
<input type="button" value="btn2" class="btn2">
// onclick 效果
var btn1 = document.querySelector(".btn1");
btn1.onclick = function () {
  alert("a-1");
};

btn1.onclick = function () {
  alert("a-2");
};

//addEventListener效果
var btn2 = document.querySelector(".btn2");
btn2.addEventListener(
  "click",
  function () {
    alert("b-1");
  },
  false
);
btn2.addEventListener(
  "click",
  function () {
    alert("b-2");
  },
  false
);

执行後会发现 onclick 只会执行第二个 alert ,而不是两个都执行。
addEventListener 两个 alert 都会执行。

今天就到这结束了。


<<:  Day 25 - 实战演练 — Input

>>:  Decorator 装饰器模式

Day1 用 Next.js 拆分 WordPress 前端 - 系列简介

哈罗,我是Eason,欢迎来到我的 「WordPress 再进化,用 Next.js 拆分前端,实现...

#12 JavaScript Introduction

What is JavaScript? HTML is like the structure/bon...

【Day 27】NumPy (4):np.sqrt(), np.square()

前言 今天要来介绍一下用於数学运算的函式,sqrt 开根号,以及 square 平方 NumPy n...

如何自己设计一套ERP程序 前传-写ERP之前要决定的20件事 决定ERP实施平台 WebForm Or WinForm

第1个决定 决定ERP实施平台 WebForm Or WinForm 写ERP程序之前的第一件事就是...

[Day13] 团队管理:建立团队信赖感(2)

欢迎对话的发生 展现Accept and Allow,营造愿意开口的环境 要塑造这样的信赖文化,是一...