Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。

JavaScript中的条件语句

js同C++，支持if-else、swtich语句和三元运算符，语法几乎一致，不同的是js中switch的case支持任意变量.

JavaScript中的函数

函数的定义和使用顺序不限，如果你定义了多个同名函数应该会使用第一个定义。
如果你想在onclick事件添加函数displayMessage()，请注意：
btn.onclick = displayMessage;✔
btn.onclick = displayMessage();❌（这会直接调用该函数，并把返回值赋值给onclick）
如果要添加含参的函数，这么办：
```
btn.onclick = function() {
  displayMessage('Woo, this is a different message!');
};
```

JavaScript事件

每个可用的事件都会有一个事件处理器/事件监听器，也就是事件触发时会运行的代码块。当我们定义了一个用来回应事件被激发的代码块的时候，我们说我们注册了一个事件处理器。

注册事件处理器的三个方法

1. 事件处理器属性

常用事件属性：

btn.onclick
btn.ondblclick：双击
btn.onfocus：被置于焦点（使用Tab或者用鼠标点击一次）
btn.onblur：解除焦点（鼠标点击其他地方）
btn.onmouseover：鼠标移至上空
btn.onmouseout：鼠标移开
window.onkeypress：按一下键盘
window.onkeydown：按下键盘
window.onkeyup：松开键盘后三者只能是window的属性，适用于整个窗口

onchange类似onclick，是元素的状态变化时触发的事件

select.onchange = function() {
  ( select.value === 'black' ) ? changecolor('black','white') : changecolor('white','black');
}

2.`addEventListener()` 与`removeEventListener()`

使用该方式的优点:

可以移除之前的事件处理器

btn.addEventListener('click', doSomething);
btn.removeEventListener('click', doSomething);

可以重复添加事件处理器

btn.addEventListener('click', functionA);
btn.addEventListener('click', functionB);

将上述的事件处理器属性名字前的on去掉即可作为第一个参数。

3.行内事件处理器

<button onclick="alert('Hello, my name is evoLonation!');">Press me</button>

不要使用！不要使用！不要使用！ 这尽管似乎看起来很简单迅速，但是在大型项目中很快就变得难以管理和效率低下。

最好的办法是只在一块地方写 JavaScript 代码。

JavaScript学习笔记 .3——函数与事件