javascript : event (mouse pointer event, prevent basic work)

mouse pointer event

// Mouse & Pointer Events

// click
// dbclick : double click
// mousedown : press the button
// mouseup : release the button 
// mouseenter : When the pointer goes over an element
// mouseleave : when the pointer goes out of the element
// mousemove : when the pointer moves
// contextmenu : when right-clicked
// wheel :When the wheel button rotates

const parentEl = document.querySelector('.parent');
const childEl = document.querySelector('.child');

childEl.addEventListener('click', () => {
  childEl.classList.toggle('active');
});

childEl.addEventListener('dbclick', () => {
  childEl.classList.toggle('active');
});

//!
childEl.addEventListener('mousedown', () => {
  childEl.classList.add('active');
});

childEl.addEventListener('mouseup', () => {
  childEl.classList.remove('active');
});

//!
childEl.addEventListener('mouseenter', () => {
  childEl.classList.add('active');
});

childEl.addEventListener('mouseleave', () => {
  childEl.classList.remove('active');
});

//! mouse position tracking
childEl.addEventListener('mousemove', (event) => {
  console.log(event.offsetX, event.offsetY);
});

//! right mouse click
childEl.addEventListener('contextmenu', (event) => {
  event.preventDefault(); // Removes the event that appears on right-click.
  console.log(event);
});

//! When scrolling up, delta Y is negative and the opposite is positive
childEl.addEventListener('wheel', (event) => {
  console.log(event);
});

prevent basic work

// Prevent mouse wheel from scrolling
const parentEl = document.querySelector('.parent');
parentEl.addEventListener('wheel', (event) => {
  event.preventDefault(); // It does not block the event, but only the basic behavior of the browser.
  console.log('wheel'); // Then this part works fine.
});

// <a> Prevent page shifting in tags

const anchorEl = document.querySelector('a');
anchorEl.addEventListener('click', (event) => {
  event.preventDefault();
  console.log('click');
});