[想试试看JavaScript ] 事件处理

事件处理

事件处理就是当使用者对画面做了一个动作，我们的程序必须侦测这个动作，并且做出反应。
如果事件没有被触发，也就是使用者没有动作，程序就不会有任何反应。
例如，加入购物车按纽，在我按下按钮後就会反应并将商品加入购物车。
另外，如果我没有按下按钮的话，就不会有任何商品被加入购物车。

click 事件

click 事件就是用滑鼠点击会有反应的事件
范例，HTML 程序码

<html>
<head>
<script>

</script>
</head>
<body>
    <button onclick="alert('click');">Click</button>
</body>
</html>

这样就是一个基本的事件处理，我按下 Click 的话就会跳出警告视窗，显示 click。
alert('click') 这里面用单引号，因为 onclick="" 已经使用了双引号，为了让程序可以顺利的阅读，所以 alert 使用单引号将字串包括住。

mouseover mouseout 事件

上面尝试了 click 事件
现在来写写 mouseover 与 mouseout 事件
mouseover 在滑鼠移动进目标元素会触发
mouseout 在滑鼠移动出目标元素会触发

<html>
<head>
<script>

</script>
</head>
<body>
    <button onclick="alert('click');">Click</button>
    <span onmouseover="this.style.color='red';"
    onmouseout="this.style.color='black';">test</span>
</body>
</html>

mouseover 触发就执行 this.style.color='red'; 这段程序，将文字改成红色
mouseout 触发就执行 this.style.color='black'; 这段程序，将文字改成黑色
style.color 是 DOM 提供的属性，可以控制元素的文字颜色。

注册事件的方法

事件处理，并不会一载入 Javascript 程序码就马上执行，而是会等使用者触发事件後，才会运作里面的程序。
所以我们会注册事件监听器，等使用者触发事件就执行。
也就是，我们一样要预先设定一段程序码，这些程序码会一直等待，只要使用者触发事件就会马上执行。
例如，我希望按下按钮就会跳出讯息，我会注册 click 事件

<button onclick="alert('click');">Click</button>

接着 onclick 属性的程序码就会一直等待，只要使用者点了 就马上执行 alert('click')

那麽注册事件的方法有三种

HTML 属性

写在 HTML 上面，透过 on+事件名 的属性来注册
范例：

<button onclick="alert('click');">Click</button>

使用 onclick 属性，在 标签注册 click 事件

DOM API 属性

写在 Javascript 里，使用 HTML DOM 提供的方法注册
要操作的目标.on+事件名=要执行的函式
范例:

<script>
window.onclick=function(){
   alert('click');
}
</script>

我在 标签注册了 click 事件，只要点击到浏览器的外框就会启动

如果我注册在 标签的话，因为画面中可以有很多个 标签，要先让浏览器知道我注册在哪个标签
所以要使用 DOM 里的 getElementById()，得到我想操作的标签

  1. 我给 一个 id 属性叫 btn
  2. 在小括弧写我想操作的标签 id 的值，document.getElementById("btn")，并将得到的标签放进变数
  3. 用 on+事件名 注册事件，并将要执行的函式放进去
<body>
    <button id="btn">Click</button>
<script>
var btn=document.getElementById("btn"); // 得到 button 标签放进变数 btn 里
btn.onclick=function(){  // 注册事件，并将要执行的函式放进去
    alert('click');
}
</script>
</body>

addEventListener

使用事件监听器注册
写在 Javascript 里，使用 addEventistener()，语法如下

要操作的目标.addEventListener(事件名称,事件的处理器,是否为捕获模式)

范例:

<body>
    <button id="btn">Click</button>
<script>
var btn=document.getElementById("btn");
btn.addEventListener('click',function(){ alert('click') },false)
</script>
</body>

这样 button 按下去之後一样可以跳出警告视窗

为什麽注册事件要有三种不同的写法呢？ HTML 属性、DOM 属性、addEventLitener()
这三种有什麽差异?
写的顺序还需要注意什麽?
就请参考下一篇吧^^


<<:  Day12：内建的 suspend 函式，好函式不用吗？（1）

>>:  网页三巨头：HTML、CSS、JavaScript的关联性

Day 19 Method

Method程序设计中，可以说是将程序模组化，这样有助於加速程序的开发、便於分析与维护等，如果要重复...

Day29. 范例：运输系统 （抽象工厂模式）

本文同步更新於blog 前情提要：铁路运输系统，参考范例：运输系统（工厂方法模式） <?p...

Day 18：广度优先搜寻(BFS)

上一回提到广度优先搜寻的步骤是检查图中节点，并将与其相连的节点放入伫列中，再一一检查。 光是这样的文...

口罩脸孔资料集的标注、资料前处理与资料扩增

我们已将资料集上传到 nilvana 的 Vision Studio 中, 也知道标注格式的种类与基...

古典 java tomcat server 专案 dockerize 踩坑全记录

如标题所述，这里分享的 java tomcat server 专案具有以下特点： JDK 8 的开发...