DOM_events_addEventListener

DOM点击事件, 首先使用document.querySelector()选中元素，然后对这个元素进行点击事件的调用。

方法一：（inline events）直接在html文件里面写，缺点：让html文件显得冗余，而且如果有多个点击事件应用于同一类的元素的话，代码重复率很高

<body>
    <h1>Events</h1>
    <button onclick="alert('you clicked me!'); alert('stop clicking')">Click Me!</button>
</body>

方法二： .onclick，选中某个元素. xx.onclick = 某个function

缺点，连续调用两次.onclick的话，第一次调用的事件不会发生，只会被第二次覆盖。

const btn = document.querySelector('#v2');

btn.onclick = function () {
    console.log("YOU CLICKED ME!")
    console.log("I HOPE IT WORKED!!")
}

function scream() {
    console.log("AAAAAHHHHH");
    console.log("STOP TOUCHING ME!")
}

btn.onmouseenter = scream;


document.querySelector('h1').onclick = () => {
    alert('you clicked the h1!')
}

function twist() {
    console.log("TWIST!")
}
function shout() {
    console.log("SHOUT!")
}

const tasButton = document.querySelector('#tas');

tasButton.onclick = twist;
tasButton.onclick = shout;
//overwrite, twist 这个事件不会发生

方法三： .addEventListener最常用，解决了方法一和方法二存在的问题

onst btn3 = document.querySelector('#v3');
btn3.addEventListener('click', function () {
    alert("CLICKED!");
})

function twist() {
    console.log("TWIST!")
}
function shout() {
    console.log("SHOUT!")
}

const tasButton = document.querySelector('#tas');

tasButton.addEventListener('click', twist)
tasButton.addEventListener('click', shout)