在网页中的JavaScript程序码,必须经由事件触发(如:按下按钮,又称事件驱动event-driven)才会执行。其触发则根据网页元素接收事件的顺序(事件流程event flow)而定。
具体上,事件流程可分为事件冒泡、事件捕获两大机制。而事件触发时,两机制都会执行。
所谓事件冒泡,可理解为「由外向内」的,从「事件触发的节点」向根部(document)往上传递的过程。以前文网页原始码为基础,举例来说:
<html>
<head>冒泡一下</head>
<body>
<div>Hello</div>
<div>Hi</div>
<div>There
<button>CLICK</button>
</div>
</body>
</html>
此例中,若点下CLICK按钮,经由事件冒泡,触发顺序会是:
与之相对,事件捕获则相反,可理解为「由内向外」的,从根部(document)向下捕获「事件触发的节点」的过程。以前文网页原始码为基础,举例来说:
<html>
<head>捕获一下</head>
<body>
<div>Hello</div>
<div>Hi</div>
<div>There
<button>CLICK</button>
</div>
</body>
</html>
此例中,若点下CLICK按钮,经由事件捕获,触发顺序会是:
除了前文介绍的 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
不讳言,C++ 初学者面对 JUCE 这个坑,以主流软件开发趋势(Web stack)来看,要找到跳...
1.前言 昨天那篇教各位学会使用IFTTT结合Line,当时传输资料时是透过Line Notify的...
接下来几天会依序介绍表单相关功能的制作,我们一起加油进阶到下个部分 表单(form) : 可以提供输...
本来今天是要讲完 Grafana 的部分,不过我发现我还是来不及做完...目前的进度只有下面这样,我...
前言 本篇文章,是要设定系统的时区与时间,并维护时区与时间的设定。 设定本地时间与时区 作业系统的时...