markdown JavaScript和DOM，第2部分：事件

Posted 2021-05-05

```javascript
const CTA = document.querySelector(".cta a");
const ALERT = document.querySelector("#booking-alert");

CTA.classList.remove("hide");
ALERT.classList.add("hide");

function reveal(e) {
    e.preventDefault();
    CTA.classList.toggle("hide");
    ALERT.classList.toggle("hide");
}

CTA.addEventListener('click', reveal, false);
CTA.addEventListener('click', function(){console.log("The button was clicked!")}, false);

```

```javascript
const CTA = document.querySelector(".cta a");
const ALERT = document.querySelector("#booking-alert");

CTA.classList.remove("hide");
ALERT.classList.add("hide");

function reveal(e) {
    e.preventDefault();
    CTA.classList.toggle("hide");
    ALERT.classList.toggle("hide");
}

CTA.onclick = reveal;
```

 
 ### Events
 
 ![](https://snag.gy/CK5nS1.jpg)
 
 ### Full list of events 
 
 ![](https://snag.gy/BVvcC6.jpg)
 
 
 ### Common Browser-Level Events
 
 ![](https://snag.gy/cMphr5.jpg)
 
 
 ### Common DOM-Level Events
 
 ![](https://snag.gy/SHgTbt.jpg)
 
 ### Other Events
 
 ![](https://snag.gy/Xh6RZf.jpg)
 
 ### Event reference
 
 ![](https://snag.gy/YlT42B.jpg)

  
  
  ![](https://snag.gy/QxsvCD.jpg)
  
  ### Event Handling
  
  ![](https://snag.gy/fxOBRI.jpg)