Events & Listening to Events

Events & Listening to Events

different type of event listeners

Browser events:
    click
    contextmenu
    mouseover/mouseout
    mousedown/mouseup
    mousemove

    submit 
    focus

    DOMContentLoaded

    transitionend

this how we add event listners

  let para = document.getElementById('para');
        para.addEventListener('mouseover', function run(){
            console.log('Mouse Inside')
        });

        para.addEventListener('mouseout', function run(){
            console.log('Mouse now went outside')
        });

<button id="btn" onclick="toggleHide()">Show/Hide</button>

and the function is 

  function toggleHide(){
        // let btn = document.getElementById('btn');
        let para = document.getElementById('para'); 
        if(para.style.display != 'none'){
        para.style.display = 'none';
        }
        else{
        para.style.display = 'block';
        }
    }