2019-08-28 事件

1. 可以通过绑定事件，触发元素样式的变化。

2. addEventListener() 方法。
   addEventListener() 方法用于向指定元素添加事件句柄。
   addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
   添加同一类型的话，会同时执行，可能后者会覆盖前者，不同类型的事件，可以任意添加。

3. 带参数的函数和不带参数的，调用方式也稍有区别。下面是演示待参数的场景。
   <script>
   var p1 = 5;
   var p2 = 7;
   document.getElementById("myBtn").addEventListener("click", function() {
   myFunction(p1, p2);
   });
   function myFunction(a, b) {
   var result = a * b;
   document.getElementById("demo").innerHTML = result;
   }
   </script>

4. 事件的冒泡与捕获：这个问题的存在原因在于，页面元素存在嵌套关系时，点击子元素，也会触发父元素的事件。那哪个先触发呢？冒泡就是内层子元素先触发，捕获就是外层元素先触发。（如果只点击外层元素是不存在这个问题的。）采用哪种方式取决于addEventListener()函数的第三个参数。

5. 创建新的 HTML 元素 (节点) - appendChild()

6.也可以删除节点，删除时，先找到父节点，然后找到子节点，最后对子节点进行删除。
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>

<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

对于节点，也存在替换操作。

7. HTMLCollection 与 NodeList 的区别

（元素是标签，节点则不仅包含标签，还有属性，文本等内容，所以对同一个HTML文档，后者比前者的长度通常要大一些。）
HTMLCollection 是 HTML 元素的集合。

NodeList 是一个文档节点的集合。

NodeList 与 HTMLCollection 有很多类似的地方。

NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。

NodeList 与 HTMLCollection 都有 length 属性。

HTMLCollection 元素可以通过 name，id 或索引来获取。

NodeList 只能通过索引来获取。

只有 NodeList 对象有包含属性节点和文本节点。

8. 对象的构造函数。给对象添加属性的时候，可以通过构造函数添加，也可以通过prototype属性添加，属性或函数。
   有时候我们想要在对象的构造函数中添加属性或方法。

使用 prototype 属性就可以给对象的构造函数添加新的属性：

实例

function Person(first, last, age, eyecolor) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eyecolor; } Person.prototype.nationality = "English";

尝试一下 »

当然我们也可以使用 prototype 属性就可以给对象的构造函数添加新的方法：

实例

function Person(first, last, age, eyecolor) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eyecolor; } Person.prototype.name = function() { return this.firstName + " " + this.lastName; };

9. 定时器和匿名函数的调用。以及调用函数代码时的赋值。

10. 日期的格式化实例。
    alert(new Date().format("yyyy年MM月dd日"));
    alert(new Date().format("MM/dd/yyyy"));
    alert(new Date().format("yyyyMMdd"));
    alert(new Date().format("yyyy-MM-dd hh:mm:ss"));

var now = new Date();
var nowStr = now.format("yyyy-MM-dd hh:mm:ss");
document.getElementById("demo2").innerHTML=new Date().format("yyyy年MM月dd日");
var nowStr = now.format("yyyy-MM-dd hh:mm:ss");
document.getElementById("demo3").innerHTML=new Date().format("yyyy年MM月dd日hh小时mm分ss秒");