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)