Mouse events trong Javascript [JAVASCRIPT]


Hôm nay ta sẽ tìm hiểu các mouse event như:
  1. click
  2. dblclick
  3. mousedown
  4. mouseup
  5. mouseenter
  6. mouseleave
  7. mousemove
  8. mouseover
  9. mouseout

Đầu triên là sự kiện click.


Click

<button id='btn1' >Click me</button>

<script>
  var btn = document.getElementById('btn1');
  btn.addEventListener('click', runCode1);

  function runCode1(e){
    console.log(e.type); // click
    alert(e.type); 
  }

</script>


Double Click

<button id='btn2' >Double click me</button>

<script>
  var btn2 = document.getElementById('btn2');
  btn2.addEventListener('dblclick', runCode2);
  

  function runCode2(e){
    console.log(e.type); // dblclick
    alert(e.type); 
  }

</script>


Mousedown and Mouseup

<button id='btn3' >Mouse down and up</button>

<script>
  var btn3 = document.getElementById('btn3');
  btn3.addEventListener('mousedown', runCode3);
  

  btn3.addEventListener('mouseup', runCode3);
  

  function runCode3(e){
    console.log(e.type); 
    alert(e.type); 
  }


</script>

Ta thấy khi dùng addEventListener thêm sự kiện ta có thể thêm nhiều sự kiện ví dụ trên là mousedown và mouseup. Còn nếu dùng 'inline javascript' thì chỉ có thể thêm dược 1 sự kiện.


Mouseenter, Mouseleave and Mousemove

<div id='box' style="width:300px; height:300px; background-color:yellow;">
 <h3>Mouseenter/Mouseleave and Mousemove</h3>
 </div>


<script>
  var box= document.getElementById('box');
  box.addEventListener('mouseenter', runCode4);
  

  box.addEventListener('mouseleave',runCode4);
  box.addEventListener('mousemove',runCode4);
   

  function runCode4(e){
    console.log(e.type); 
  }


</script>

Mousemove thì dễ hiểu rồi, khi chuột di chuyển vào div màu vàng thì kích hoạt sự kiện mousemove. Khi chuột đi vào div màu vàng thì kích hoạt sự kiện mouseenter, di chuyển ra khỏi div vàng thì sẽ kích hoạt mouseleave. Ta có thể xem demo bên dưới, ta nhớ mở developer tool lên xem log nhé. Firefox nhấn F12 để mở.

Mouseenter/Mouseleave and Mousemove


Mouseover and Mouseout

<div id='box2' style="width:300px; height:300px; background-color:yellow;">
<h2> Mouseover and Mouseout</h2>
</div>


<script>
  var box2= document.getElementById('box2');
  box2.addEventListener('mouseover', runCode5);
  
  box2.addEventListener('mouseout',runCode5);
   

  function runCode5(e){
    console.log(e.type); 
  }


</script>

Ta thấy trong div có 1 thẻ h2 nữa thì mouseover khác mouseenter. khi đưa chuột vào div thì sẽ kích hoạt mouseover div, khi đi vào h2 thì sẽ kích hoạt mouseout thẻ div và sẽ kích hoạt mouseover thẻ h2. Còn mouseenter thì như ví dụ trên chỉ kích hoạt khi di chuyển vào div, không kích hoạt khi đi vào các thẻ bên trong div như h2.

Mouseover and Mouseout

Ta đã tìm hiểu xong được Mouse event trong javascript rồi nhé. ^_^