Mouse Events

// Method 1: Click events
const button = document.getElementById('myButton');

button.addEventListener('click', function(e) {
    console.log('Clicked');
});

button.addEventListener('dblclick', function(e) {
    console.log('Double clicked');
});

// Method 2: Mouse position
const element = document.getElementById('myElement');

element.addEventListener('mousemove', function(e) {
    console.log('X:', e.clientX, 'Y:', e.clientY);
    console.log('Page X:', e.pageX, 'Page Y:', e.pageY);
    console.log('Offset X:', e.offsetX, 'Offset Y:', e.offsetY);
});

// Method 3: Mouse enter/leave
element.addEventListener('mouseenter', function(e) {
    console.log('Mouse entered');
    e.target.style.backgroundColor = 'yellow';
});

element.addEventListener('mouseleave', function(e) {
    console.log('Mouse left');
    e.target.style.backgroundColor = '';
});

// Method 4: Mouse over/out (bubbles)
element.addEventListener('mouseover', function(e) {
    console.log('Mouse over');
});

element.addEventListener('mouseout', function(e) {
    console.log('Mouse out');
});

// Method 5: Mouse down/up
element.addEventListener('mousedown', function(e) {
    console.log('Mouse button pressed:', e.button);
    // 0: left, 1: middle, 2: right
});

element.addEventListener('mouseup', function(e) {
    console.log('Mouse button released');
});

// Method 6: Context menu (right click)
element.addEventListener('contextmenu', function(e) {
    e.preventDefault();
    console.log('Right click prevented');
    // Show custom context menu
});

// Method 7: Mouse buttons
element.addEventListener('mousedown', function(e) {
    if (e.button === 0) {
        console.log('Left button');
    } else if (e.button === 1) {
        console.log('Middle button');
    } else if (e.button === 2) {
        console.log('Right button');
    }
    
    // Check which buttons are pressed
    console.log('Buttons:', e.buttons);
    // 1: left, 2: right, 4: middle
});

// Method 8: Drag detection
let isDragging = false;

element.addEventListener('mousedown', function(e) {
    isDragging = true;
    console.log('Drag started');
});

element.addEventListener('mousemove', function(e) {
    if (isDragging) {
        console.log('Dragging at:', e.clientX, e.clientY);
    }
});

element.addEventListener('mouseup', function(e) {
    if (isDragging) {
        isDragging = false;
        console.log('Drag ended');
    }
});