Click Events trong Javascript [JAVASCRIPT]


Bài Viết trước ta học cách thêm sự kiện click dùng addEventListener. Hôm nay ta sẽ truy cập các thuộc tính của thẻ trong html bằng cách truyền event vào trong javascript. Ta xem ví dụ sau

<a id ="hello" class="style1 style2" href="http://google.com">click me</a>

<script>

const btn = document.getElementById('hello');
btn.addEventListener("click", runCode);

function runCode(event){
  event.preventDefault(); // prevent load to http://google.com
  console.log(event.type); // click
  console.log(event.target); // thẻ a

  console.log(event.target.id); // hello
  console.log(event.target.className); // style1 style2
  console.log(event.target.classList); 
  // DOMTokenList ["style1", "style2"]
  
  console.log(event.target.classList.value); // style1 style2
  console.log(event.target.innerHTML); // click me
}
</script>

event.preventDefault() dùng để thẻ a không mở trang google.com khi click vào thẻ a. event.type dùng để xem sự kiện này gì, trường hợp này ta thấy là click.

Và ta có thể truy cập vào thẻ a bằng event.target, Ta có thể lấy ra từng thuộc tính như id, className

event.target.id
event.target.className
event.target.classList.value
event.target.innerHTML

Qua bài viết này ta đã biết cách dùng addEventListener. Qua các bài viết sau ta sẽ tìm hiểu những sự kiện của chuột và bàn phím. ^_^