让按钮来个酷动态！操纵DOM事件：JavaScript篇 (一)

一般来说前端技能来到第三课，就是要面对无所不在、生态系丰富、也象徵着永远学不完的JavaScript了!比起HTML和CSS，利用JavaScript进行逻辑判断、建立function、回圈运算等方式，能让网页的应用更加多元，也可以操纵更复杂的动态与互动。

基本上利用HTML建立架构、CSS绘制外观、JavaScript监控事件执行对应行为，是一个相当合理的安排。当然简单的事件监控改变CSS状态或是不具有逻辑判断的animation，使用CSS撰写即可罗~

使用JavaScript监测DOM事件：

第一步、指定网页元件
原生JavaScript中指定网页元件可以使用Id: getElementById，或是Class: getElementsByClassName

//使用Id指定
document.getElementById('my-div');
//使用Class指定
document.getElementsByClassName('my-div')[0];

可以把网页元件指定至一个变数，会更好阅读

//使用Id指定
let item=document.getElementById('my-div');
//使用Class指定
let item=document.getElementsByClassName('my-div')[0];

第二步、安排监听事件
指定到对的网页元件後，接下来可以使用 addEventListener()来进行事件的监听：

item.addEventListener('click',function(){
    item.style.cssText = 'animation :my-animation-bg 4s both;'})

addEventListener传入参数中，第一个是事件的string物件，第二个可以放置function，让第一个参数所定义监测事件发生时，执行这个function。

前往後续文章
JavaScript 第二篇：https://ithelp.ithome.com.tw/articles/10271889