jsEventHandleBasic

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Study</title>
    <style>
    </style>
</head>
<body>
    <button id="btn1" oncontextmenu="event.preventDefault();">Click me BTN 1!</button>
    <button id="btn2" oncontextmenu="event.preventDefault();">Click me BTN 2!</button>

    <button id="button" oncontextmenu="event.preventDefault();">Click here with your mouse...</button>
    <p id="log"></p>

    <script>
        'use strict'

        let button = document.querySelector('#button');
        let log = document.querySelector('#log');
        button.addEventListener('mouseup', logMouseButton);

        function logMouseButton(e) {
            if (typeof e === 'object') {
                switch (e.button) {
                    case 0:
                        log.textContent = 'Left button clicked.';
                        break;
                    case 1:
                        log.textContent = 'Middle button clicked.';
                        break;
                    case 2:
                        log.textContent = 'Right button clicked.';
                        break;
                    default:
                        log.textContent = `Unknown button code: ${e.button}`;
                }
            }
        }


        const buttonA = document.getElementById("btn1");
        const buttonB = document.getElementById("btn2");

        function clicker(event) {
            console.log('Something was clicked!')
            console.log(event);
            console.log(this);
        }


        function buttonHandler(event) {
            if (event.button == 0) {
                console.log('Left button');
            }
            else if (event.button == 1) {
                console.log('Mid button');
            } else if (event.button == 2) {
                console.log('Right button');
            }
            console.log(' was pressed!');

        }
        //buttonA.onclick = function () { alert('Button1 was clicked!'); console.log(this); this.onclick = null; };
        //buttonB.onclick = function () { alert('Button2 was clicked!'); console.log(this);};
        //buttonA.onclick = clicker;
        //buttonB.onclick = clicker;
        //    //btn.onclick = null;
        //let arr1 = () => { alert('BTN1 was clicked!'); };
        //let arr2 = () => { alert('BTN2 was clicked!'); };

        //buttonA.addEventListener('click', clicker);
        //buttonB.addEventListener('click', clicker);
        //buttonA.addEventListener('click', arr1);
        //buttonB.addEventListener('click', arr2);

        //buttonA.removeEventListener('click', clicker);
        //buttonB.removeEventListener('click', clicker);
        //buttonA.removeEventListener('click', arr1);
        //buttonB.removeEventListener('click', arr2);

        //document.onDOMContentLoaded = function () { console.log('DOM was loaded!') };
        //let obj = { a: 10, b: 20, handleEvent: function (e) { console.log('DOM was loaded! FROM OBJ'); console.log(e); } }
        //document.addEventListener('DOMContentLoaded', obj);

        buttonA.addEventListener('mousedown', buttonHandler);
        buttonB.addEventListener('mousedown', buttonHandler);

    </script>
</body>
</html>