5.7 滑鼠相關事件

click 、dblclick 與事件冒泡狀況(Event Bubble Up)

click 事件的寫法，使用 .addEventListener()：

var my_el = document.getElementById("my_el");
my_el.addEventListener("click", function(){
  // 點擊後，要執行的程式...
});

範例(click)：

範例(dblclick)：

如果要停止事件冒泡狀況發生，在正確的位置執行以下程式：

e.stopPropagation();

範例：lightbox (燈箱)

其它滑鼠相關事件

mousedown、mouseup

mousedown：滑鼠按壓下去時觸發。(會發生冒泡狀況)

mouseup：滑鼠按壓下去放開時觸發。(會發生冒泡狀況)

範例(不用背，要會觀察)：

mouseover、mouseout

mouseover：滑鼠移入時觸發。(會發生冒泡狀況)

mouseout：滑鼠移出時觸發。(會發生冒泡狀況)

範例：

mouseenter、mouseleave

mouseenter：滑鼠移入時觸發。(不會發生冒泡狀況)

mouseleave：滑鼠移出時觸發。(不會發生冒泡狀況)

範例：

mousemove

說明：滑鼠游標在元素上移動時觸發。(會發生事件冒泡狀況)

範例：

練習：圖片跟著滑鼠移動

針對 document 綁定 mousemove 事件。

e.pageX：滑鼠距離頁面最左側的距離。

e.pageY：滑鼠距離頁面最上方的距離。

window.scrollY：垂直方向滑動了多少距離。

提供 html：

<img src="https://alldata.sgp1.digitaloceanspaces.com/images/icon_animate.gif" id="img">
<div style="border: 1px solid red;height: 1000px;"></div>

參考作法：

示意圖：