Events trong Javascript [JAVASCRIPT]


Qua những bài viết trước để thêm sự kiện vào html ta dùng onclick
<button onclick="hello()">Click me</button>

<script>
 function hello(){
  console.log("Hello 2020");
}

</script>

Cách này ta thêm thuộc tính onclick và gán vào 1 function. Cách này là thêm sự kiện trong html. Ta có thể thêm sự kiện trong javascript cũng tương tự như trên

<button id='btn'>Click me 2 </button>

<script>

var btn = document.getElementById("btn");
btn.onclick = function(){
 console.log("Hello 2020");
}

</script>

Cả 2 cách thêm sự kiện từ html hoặc từ javascript gọi là "inline javascript". Dùng "inline javascript" dễ bị ghi đè. Ta xem ví dụ sau:

<button id='btn2'>Click me 3 </button>
<script>

var btn = document.getElementById("btn2");
btn.onclick = function(){
 console.log("Hello 2020");
}

// onclick này sẽ ghi đè onclick trên và in ra "Hello world"
btn.onclick = function(){
 console.log("Hello world");
}
</script>

Ngoài cách dùng "inline javascript" ta có thề dùng addEventListener. Ta xem ví dụ sau

<button id ='btn3'> Click me 4</button>

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

  function runCode(){

   console.log('Hello Javascript');
  }

</script>

Ta thấy button được thêm sự kiện click. Thì khi click vào button thì sẽ gọi hàm runCode.

Vậy là hôm nay ta đã biết cơ bản về dùng Event trong javascript. Những bài viết tới ta sẽ tìm hiểu chi tiết thêm về addEventListener