作业

NodeList与HTMLCollection区别

主要有两个方面不一样

1.包含节点的类型
2.使用方法

1.包含节点的类型不同

(1)NodeList
一个节点的集合，既可以包含元素和其他节点（注释节点，文本节点等）。
(2)HTMLCollection
元素集合，只有Element

2.使用方法不同

遍历方式不一样,Nodelist可以用forEach遍历数据
示例

<body>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>
</body>
<script>
    var cl = console.log.bind(console);
    var ul = document.querySelector("ul");
    var eles = [];
    ul.childNodes.forEach(function (item) {
        // 只返回类型为1的元素节点
        if (item.nodeType === 1) this.push(item);
    }, eles);
    cl(eles);

HTMLcollection没有forEach，只能用for循环遍历

<body>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>
</body>
<script>
    var cl = console.log.bind(console);
    var ul = document.querySelector("ul");
        for(var i = 0; i < ul.childElementCount; i++) {
        cl(ul.children.item(i));
    }
</script>

事件的添加方式

注：onclick为点击事件

事件的添加方式有四种：

行内样式

<body>
    <button onclick="var text=this.innerText; alert(text);">按钮1</button>
<body>

给HTML元素绑定事件属性

<body>
    <button onclick="show(this)">按钮2</button>
</body>
<script>
function show(ele) {
        var text = ele.innerText;
        alert(text);
    }
</script>

通过监听器添加事件

<body>
    <button onclick="show(this)">按钮2</button>
</body>
<script>
var btn4 = document.querySelector("button:nth-of-type(4)");
    btn4.addEventListener(
        "click",
        function () {
            alert(this.innerText);
        },
        false
    );
<script>

事件委托与代理

原理：子元素上的事件会冒泡到父元素上的同名事件上触发，比如click,注意是同名事件。

示例：

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
  </ul>
  <script>
    // 事件委托/代理: 子元素上的事件会冒泡到父元素上的同名事件上触发,只要写父元素的事件就行了
    document.querySelector("ul").addEventListener("click", function (ev) {
       cl(ev.target);
       cl(ev.currentTarget);
       cl(this === ev.currentTarget);
       cl("当前触发事件的元素是:", ev.target);
    // });
  </script>

总结

NodeList与HTMLCollection的访问与遍历有所区别，他们可以说是一个包含关系。运用场景不一样。事件的委托与代理，应用场景十分的广阔，它可以减少重复DOM的交互次数，这样我们就需要一个内存空间就够了。提高网页性能。

JS事件添加与事件委托

作业