Direct Assignment Binding (DOM Level 0)

const element = document.querySelector('.target');

// Assign event handler directly
element.onclick = function() {
    console.log('First handler');
};

// Overwrites previous handler
element.onclick = function() {
    console.log('Second handler');
};

// Remove event handler
element.onclick = null;

Listener-Based Binding (DOM Level 2)

const targetElement = document.querySelector('.target');

// Add multiple event listeners
function firstHandler() {
    console.log('Listener 1');
}

targetElement.addEventListener('click', firstHandler);

targetElement.addEventListener('click', function() {
    console.log('Listener 2');
});

// Remove specific listener
targetElement.removeEventListener('click', firstHandler);

Cross-Browser Event Handling

// Legacy IE support
if (targetElement.attachEvent) {
    targetElement.attachEvent('onclick', firstHandler);
    targetElement.detachEvent('onclick', firstHandler);
}

// Unified event management functions
function registerEvent(element, eventType, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventType, callback);
    } else if (element.attachEvent) {
        element.attachEvent('on' + eventType, callback);
    } else {
        element['on' + eventType] = callback;
    }
}

function unregisterEvent(element, eventType, callback) {
    if (element.removeEventListener) {
        element.removeEventListener(eventType, callback);
    } else if (element.detachEvent) {
        element.detachEvent('on' + eventType, callback);
    } else {
        element['on' + eventType] = null;
    }
}

Practical Usage Example

const boxElement = document.querySelector('.box');

function handleClick() {
    console.log('Box clicked');
}

function handleDoubleClick() {
    console.log('Box double clicked');
}

// Register events
registerEvent(boxElement, 'click', handleClick);
registerEvent(boxElement, 'dblclick', handleDoubleClick);

// Unregister specific event
unregisterEvent(boxElement, 'click', handleClick);

Drag and Drop Implementation

const draggableElement = document.querySelector('.draggable');
const viewportWidth = document.documentElement.clientWidth;
const viewportHeight = document.documentElement.clientHeight;
const elementWidth = draggableElement.offsetWidth;
const elementHeight = draggableElement.offsetHeight;

// Initialize drag operation
function startDrag(event) {
    const startX = event.pageX - draggableElement.offsetLeft;
    const startY = event.pageY - draggableElement.offsetTop;
    
    // Handle mouse movement during drag
    function performDrag(moveEvent) {
        let newX = moveEvent.pageX - startX;
        let newY = moveEvent.pageY - startY;
        
        // Constrain movement within boundaries
        newX = Math.max(0, Math.min(newX, viewportWidth - elementWidth));
        newY = Math.max(0, Math.min(newY, viewportHeight - elementHeight));
        
        // Update element position
        draggableElement.style.left = newX + 'px';
        draggableElement.style.top = newY + 'px';
    }
    
    // Terminate drag operation
    function endDrag() {
        document.removeEventListener('mousemove', performDrag);
        document.removeEventListener('mouseup', endDrag);
    }
    
    // Attach document-level listeners
    document.addEventListener('mousemove', performDrag);
    document.addEventListener('mouseup', endDrag);
}

// Bind drag initiation to mousedown event
draggableElement.addEventListener('mousedown', startDrag);