这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天

0 前面的话

今天就写点JavaScript的知识吧！知识点内容可能比较散，仅记录一下而已。这里的学习参考了部分菜鸟教程内容，如有需要，链接： www.runoob.com/js/js-htmld…
另外参阅了以下内容：
blog.csdn.net/qq_44721831…

1 正文

JavaScript HTML DOM EventListener

element.addEventListener(event, function, useCapture);

• 第一个参数是事件的类型 (如 "click" 或 "mousedown").
• 第二个参数是事件触发后调用的函数。
• 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

- addEventListener() 方法用于向指定元素添加事件句柄。
- addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
- 可以向一个元素添加多个事件句柄。
- 可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。
- 可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
- addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。
- 当使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。
- 可以使用 removeEventListener() 方法来移除事件的监听。

事件冒泡和事件捕获

事件流是描述从页面中接收事件的顺序【从内到外(冒泡)，从外到内(捕获)】。

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将<p>元素插入到<div>元素中，用户点击<p>元素, 哪个元素的 "click" 事件先被触发呢？

在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即：<p>元素的点击事件先触发，然后会触发<div>元素的点击事件。

在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即：<div>元素的点击事件先触发 ，然后再触发<p>元素的点击事件。

插一嘴： "& lt;" 代表 "<"，"& gt;" 代表 ">".

DOM事件流如图:

为了兼容所有的浏览器，我们可以定义一个函数：当有 addEventListener 时调用，没有的时候调用 attachEvent。

/*
 * 参数：
 *     obj：要绑定事件的对象
 *     eventStr：事件(注意：这里不要on)
 *      callback：回调函数
 */
function bind(obj , eventStr , callback){
    if(obj.addEventListener){
        //大部分浏览器
        obj.addEventListener(eventStr , callback , false);
    }else{
        //IE8及以下
        obj.attachEvent("on"+eventStr , function(){
            //在匿名函数中调用回调函数
            callback.call(obj);
        });
    }
}            

HTMLCollection 与 NodeList 的区别

• HTMLCollection是 HTML 元素的集合。
• NodeList 是一个文档节点的集合。
• NodeList 与 HTMLCollection 有很多类似的地方。
• NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。
• NodeList 与 HTMLCollection 都有 length 属性。
• HTMLCollection 元素可以通过 name，id 或索引来获取。
• NodeList 只能通过索引来获取。
• 只有 NodeList 对象有包含属性节点和文本节点。

pcoll=document.querySelectorAll("p")

plist=document.getElementsByTagName("p")

以上 pcoll 返回的就是固定的值。

而获取 plist 后, 若 html 页面有变化且刚好添加或移除了 p 标签, 此时plist也会跟着变。