- Objective:
- Breadcrumb: Notifications API - Notification - 事件
# 概念阐释
## 语义
Event Handler 事件处理程序，是指在网页中来响应特定时间的 JavaScript 函数。
当用户与网页交互时（比如点击按钮、提交表单、鼠标移动等），这些交互会触发相应的事件。Event Handler就是用来捕获这些事件，并执行相应的操作或功能的JavaScript函数。
## 语法
```js
element.onevent = function(event) { ... };
```
- `notification` 被访问的HTML标签会被赋值的变量名
触发事件的一种调用方式，所有的事件前加`on`。比event attribute（在html中使用`<button ==onclick==="bgChange()">按下我</button>`）要简洁，但比[[js Events 事件监听添加 addEventListener]]要复杂。
# 实例
## 匿名onclick函数写法
```js
// 访问页面中的第一个button标签
let element = document.querySelector('button');
//触发click事件并在点击后改变button按钮的颜色
element.onclick = function(){
element.style.backgroudColor = 'blue'
};
//或者
element.onclick = () => {
element.style.backgroudColor = 'blue'
};
```
## 非匿名函数的写法
```js
//访问页面中的第一个button标签
let element = document.querySelector('button');
//创建turnBlue函数，包括一个将button标签改为蓝色的任务
function turnBlue() {
element.style.backgroundColor = 'blue';
};
//触发click事件后执行turnBlue代码
element.onclick = turnBlue;
```
# 相关内容
- `ondbclick` 双击触发事件
- `onscroll` 滚动触发事件
- `onchange` 当输入区发生变化时触发显示结果，但只在输入结束后显示
```html
<input type="date">
<p> New Date </p>
<p id="log"></p>
```
```js
const input = document.querySelector('input');
const log = document.getElementById('log');
function updateValue() {
log.innerHTML = input.value;
}
log.onchange = updateValue; //当用户输入完日期后， ID为log的p标签内才会显示输入结果
```
- `oninput`当输入区发生变化时，实时显示变化的结果，例如数字一直在增加，显示结果就一直增加
**以上事件也可用在事件监听写法中**
# 问题
- [练习题](https://www.codecademy.com/courses/build-interactive-websites/lessons/javascript-dom/exercises/onclick-element)
当用户点击button按钮后，button按钮的背景为红色，字体颜色为白色，内容变为“red button”。
# 问题答案
```js
// 访问button按钮
let element = document.querySelector('button');
//匿名函数修改
element.onclick = function(){
element.style.backgroundColor = 'red';
element.style.color = 'white';
element.innerHTML = 'red button';
};
//非匿名函数
function turnBlueRed () {event};
element.onclick = turnBlueRed;
```
# 参考资料
- [onclick-MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/Notification/click_event)