Day-25 事件机制(1)

在网页中的JavaScript程序码,必须经由事件触发(如:按下按钮,又称事件驱动event-driven)才会执行。其触发则根据网页元素接收事件的顺序(事件流程event flow)而定。

具体上,事件流程可分为事件冒泡、事件捕获两大机制。而事件触发时,两机制都会执行。

事件冒泡 Event Bubbling

所谓事件冒泡,可理解为「由外向内」的,从「事件触发的节点」向根部(document)往上传递的过程。以前文网页原始码为基础,举例来说:

<html>
    <head>冒泡一下</head>
        <body>
            <div>Hello</div>
            <div>Hi</div>
            <div>There
                <button>CLICK</button>
            </div>
        </body>
</html>

此例中,若点下CLICK按钮,经由事件冒泡,触发顺序会是:

  1. button标签
  2. div标签
  3. body标签
  4. html标签
  5. document

事件捕获 Event Capturing

与之相对,事件捕获则相反,可理解为「由内向外」的,从根部(document)向下捕获「事件触发的节点」的过程。以前文网页原始码为基础,举例来说:

<html>
    <head>捕获一下</head>
        <body>
            <div>Hello</div>
            <div>Hi</div>
            <div>There
                <button>CLICK</button>
            </div>
        </body>
</html>

此例中,若点下CLICK按钮,经由事件捕获,触发顺序会是:

  1. document
  2. html标签
  3. body标签
  4. div标签
  5. button标签

事件的绑定与监听

除了前文介绍的 window.addEventListener() 方法外,尚有其他常见方式。在HTML中触发支援的事件,可以用on+事件名进行,比如「onclick」。

<button id="btn" onclick="console.log('你按下去了');">CLICK</button>

此例中,若点下CLICK按钮,会印出「你按下去了」,也就是在button上面注册click事件。惟基於安全性,此类作法已日渐少用。

然而,若遇到没有实体元素的情况,以使用DOM API提供的 on-event处理器(event handler)处理。网页原始码一样:

<button id="btn">CLICK</button>

而JavaScript则如此绑定:

let btn = document.getElementById('btn');

btn.onclick = function() {
    console.log('你按下去了');
}

与事件处理器不同,事件监听器写为 addEventListener() ,共涵盖三个函数:

  • 事件名称
  • 事件处理器(函式)
  • 事件捕获/事件冒泡

同上,针对同一预期事件:

<button id="btn">CLICK</button>

监听事件启动时,会执行其中的函式。监听器会产生生一个事件物件(Event Object),生成包括有关属性(视事件而有不同)的参数(本例为a),再丢给函式处理。在JavaScript中给出一个参数a:

let btn = document.getElementById('btn');

  btn.addEventListener('你按下去了', function(e){
  console.log(e);
}, false);
}

其他

其他尚有「阻挡预设行为」的 event.preventDefault() 、「阻挡事件冒泡传递」的 event.stopPropagation() 可资使用,意者可再持续深造。


<<:  #25-让长条图一条条动起来~大数据时代!入手 D3.js~

>>:  Day 26: LeetCode Hard+Medium

Day 25:独立贩售的音乐类软件外挂

不讳言,C++ 初学者面对 JUCE 这个坑,以主流软件开发趋势(Web stack)来看,要找到跳...

[Day26] Esp32s + IFTTT + LINE - (程序码讲解)

1.前言 昨天那篇教各位学会使用IFTTT结合Line,当时传输资料时是透过Line Notify的...

Day12_HTML语法9

接下来几天会依序介绍表单相关功能的制作,我们一起加油进阶到下个部分 表单(form) : 可以提供输...

Day 15:目前 NOJ 的部署流程

本来今天是要讲完 Grafana 的部分,不过我发现我还是来不及做完...目前的进度只有下面这样,我...

第14章:设定系统时区与时间

前言 本篇文章,是要设定系统的时区与时间,并维护时区与时间的设定。 设定本地时间与时区 作业系统的时...