Javascript总结（2）：条件语句、内置对象、函数、事件等条件语句、逻辑运算符、标准内置对象、基本对象、函数、事件

标准内置对象见下方链接，待完整学习

条件语句

`if(){} else{}`（不一定有else）或嵌套`if(){} else{}`

if(){} else if(){} else{}

布尔值（true / false）和一个通用模式会频繁遇到它，任何不是 false, undefined, null, 0, NaN 的值，或一个空字符串（''）在作为条件语句进行测试时实际返回 true，因此可以简单地使用变量名称来测试它是否为真，甚至是否存在（即它不是未定义的）

逻辑运算符&& || ！

如果要测试多个条件可以使用，可以和条件语句结合使用

switch语句：

switch(expression){ case choice1:run code； break; case choice2:run code； break; ... default:run code； } 以单个表达式/值作为输入，然后查看多个选项，直到找到与该值相匹配的选项，执行与之相关的代码

关键字 default, 后面跟随和 case 完全相同的代码模式. 如果之前没有选项匹配，则运行default选项。

三元运算符

( condition ) ? run this code : run this code instead

`break`和`continue`

break跳出循环，continue跳过当前循环而执行下一个循环

while和do...while

标准内置对象

global 对象可以在全局作用域里通过使用this访问到（但只有在 ECMAScript 5 的非严格模式下才可以，在严格模式下得到的是 undefined）。其实全局作用域包含全局对象中的属性，包括它可能继承来的属性。

分类

值属性

这些全局属性返回一个简单值，这些值没有自己的属性和方法。 Infinity、NaN、undefined、globalThis

函数属性

全局函数可以直接调用，不需要在调用时指定所属对象，执行结束后会将结果直接返回给调用者。 eval()、uneval()、isFinite()、isNaN()、parseFloat()、parseInt()、decodeURI()、decodeURIComponent()、encodeURI()、encodeURIComponent()

基本对象

是定义或使用其他对象的基础。基本对象包括一般对象、函数对象和错误对象。 Object、Function、Boolean、Symbol

错误对象是一种特殊的基本对象。它们拥有基本的 Error 类型，同时也有多种具体的错误类型。

Error
AggregateError
EvalError
InternalError
RangeError
ReferenceError
SyntaxError
TypeError
URIError

数字和日期对象

函数

匿名函数

没有函数名！它也不会自己做任何事情。通常将匿名函数与事件处理程序一起使用

创建函数

function displayMessage() {

}

btn.onclick = displayMessage;

怎么函数名后面没有括号呢？因为不想直接调用这个函数 — 而是只有当按钮被点击的时候才调用这个函数。

btn.onclick = displayMessage();

按钮都还没点击提示框就出来了！在函数名后面的这个括号叫做“函数调用运算符”（function invocation operator）。只有在想直接调用函数的地方才这么写。同样要重视的是，匿名函数里面的代码也不是直接运行的，只要代码在函数作用域内。

返回值

事件

事件参考查询（重要）

如：

用户在某个元素上点击鼠标或悬停光标。
用户在键盘中按下某个按键。
用户调整浏览器的大小或者关闭浏览器窗口。
一个网页停止加载。
提交表单。
播放、暂停、关闭视频。
发生错误。

可以给同一个监听器注册多个处理器，下面这种方式不能实现这一点：

myElement.onclick = functionA;
myElement.onclick = functionB;

第二行会覆盖第一行，但是下面这种方式就会正常工作了：

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

有时候在事件处理函数内部，可能会看到一个固定指定名称的参数，例如event，evt或简单的e。这被称为事件对象，它被自动传递给事件处理函数，以提供额外的功能和信息。

function bgChange(e) {
  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  e.target.style.backgroundColor = rndCol;
  console.log(e);
}

btn.addEventListener('click', bgChange);

阻止默认行为

在事件对象上调用preventDefault()函数，这样就停止了表单提交

form.onsubmit = function(e) {
  if (fname.value === '' || lname.value === '') {
    e.preventDefault();
    para.textContent = 'You need to fill in both names!';
  }

事件冒泡及捕获

事件冒泡和捕捉是两种机制，主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么

当一个事件发生在具有父元素的元素上 (例如，在我们的例子中是<video>元素) 时，现代浏览器运行两个不同的阶段 - 捕获阶段和冒泡阶段。在捕获阶段（父 --> 子）：

浏览器检查元素的最外层祖先<html>，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它。
然后，它移动到<html>中单击元素的下一个祖先元素，并执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素。

在冒泡阶段，恰恰相反（子 --> 父）：

浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它
然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达<html>元素。

标准事件对象具有可用的名为 stopPropagation()的函数，当在事件对象上调用该函数时，它只会让当前事件处理程序运行，但事件不会在冒泡链上进一步扩大，因此将不会有更多事件处理器被运行 (不会向上冒泡)

video.onclick = function(e) {
  e.stopPropagation();
  video.play();
};

事件委托

如果想要在大量子元素中单击任何一个都可以运行一段代码，可以将事件监听器设置在其父节点上，并让子节点上发生的事件冒泡到父节点上，而不是每个子节点单独设置事件监听器。

Javascript总结（2）：条件语句、内置对象、函数、事件等