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

上一篇整理了 JavaScript 操纵网页元件事件的基本流程：

1. 指定网页元件，可用 getElementById 或 getElementsByClassName。
2. 针对网页元件设定 addEventListener；指定监听的事件与执行的对应function。

而可使用得事件相当多元，除了常见的滑鼠事件、键盘事件与触控事件之外，还有载入事件、表单栏位相关的事件等，除了透过监测事件来进行更多元的互动外，很多时候也用於数据蒐集层面，利用事件来定义那些使用者行为是重要的、有价值的，已用於後续的使用分析进行更多优化。

利用CSS :hover可以改变网页元件的状态，与JavaScript这边的mouseover事件相同，但如果看CSS这边的写法可以发现，我们指定的是「网页元件的hover状态」，所以基本上这里只能改变的CSS样式状态只有网页元件本身，因此，要能够跳脱网页元件，指定其他部分、改变文字内容、逻辑条件运算或执行重复行为等，使用 JavaScript 来处理就最适合不过了，同时，JavaScript这边提供的事件比起CSS来说更丰富完整，所以相当多网页动态利用JavaScript撰写，另外也有相当多针对动态相关的Library发展。

当然，CSS可以做到的部分不一定要改写成JavaScript，依照开发体验与专案需求选择即可。

在使用JavaScript时，也可以CSS搭配transition，让转场更加流畅：

    body{
        background-color: white;
        transition: background-color 1s ease;
        }

<script type="text/javascript">
//1.指定网页元件
    let item=document.getElementsByClassName('my-div')[0];
    let webpage=document.getElementsByTagName('body')[0];
//2.监听事件与对应function
    //滑鼠移至物件时
    item.addEventListener('mouseover',
    function(){
        webpage.style.backgroundColor = 'gray'});
    //滑鼠离开物件时    
    item.addEventListener('mouseout',
    function(){
      webpage.style.backgroundColor = 'white'})
</script>