js教程（9）

一、事件委托

        事件委托是利用事件流的特征解决一些开发需求的知识技巧。

1.优点

        减少注册次数，可以提高程序性能。

2.原理

        事件委托其实就是利用事件冒泡的特点，给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件。

3.实现语法

事件对象.target.tagName

        通过上段代码获取真正触发事件的元素，用this对其属性进行操作。

示例：

    const input = document.querySelector("#four input");
    const table = document.querySelector("table");
    let evalstr = "";
    table.addEventListener("click", function(e){
        if (e.target.tagName === "TD") {
            if (e.target.innerText == "c") {
                evalstr = "";
            } else if (e.target.innerText == "=") {
                if (evalstr.length > 0 && Object.is(Number(evalstr.charAt(evalstr.length - 1)), NaN)) {
                    console.log(evalstr.charAt(evalstr.length - 1));
                    alert("请不要进行错误输入");
                    evalstr = "";
                } else {
                    evalstr = new String(eval(evalstr));
                }
            } else if ((evalstr.length == 0 || evalstr.length == 1) && (e.target.innerText == "+" || e.target.innerText == "*" || e.target.innerText == "/") && Object.is(Number(evalstr.charAt(0), NaN))) {

            } else if ((evalstr.length == 0 && Object.is(Number(e.target.innerText), NaN)) || (evalstr.length != 0 && Object.is(Number(evalstr.charAt(evalstr.length - 1)), NaN) && Object.is(Number(e.target.innerText), NaN))) {
                evalstr = evalstr.substring(0, evalstr.length - 1) + e.target.innerText;
            } else {
                evalstr += e.target.innerText;
            }
            if (evalstr == "Infinity") {
                alert("请不要进行错误输入");
                evalstr = "";
            }
            input.value = evalstr;
        }
    });

 这是计算机代码用事件委托优化后的写法。

二、其他事件

1.页面加载事件

      加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件。

      有时候需要等页面资源全部处理完了做一些事情，如果把代码写在head中，这个时候直接找dom元素会找不到。

事件名：load

举例：给window添加load事件

//页面加载事件
window.addEventListener('load',function(){
    //执行的操作
});

        注意不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件。

特殊用法

        当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表，图像等完全加载。

事件名：DOMContentLoaded

给Document添加DOMContentLoaded事件

document.addEventListener('DOMContentLoaded',function(){
    //执行的操作
});

2.页面滚动事件

        滚动条在滚动的时候持续触发的事件。很多网页需要检查用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部。

事件名：scroll

        监听某个元素的内部滚动直接给某个元素加即可，如监听整个页面滚动，代码如下：

window.addEventListener('srcoll',function(){
    //执行的操作
});

获取页面位置

        scrollLeft和scrollTop属性可以获取被卷去的页面大小，即：获取元素内容往左、往上滚出去看不到的距离，在开发中，我们尽量在scroll事件里面获取被卷去的距离。

代码举例

div.addEventListener('scroll',function(){
    console.log(this.scrollTop);
});

滚动到指定坐标

        scrollTo()方法可以把内容滚动到指定位置，其有两个参数，第一个时x坐标，一个是y坐标，它可以让页面滚动到（x，y）位置。

3.页面尺寸事件

        会在窗口尺寸改变的时候触发的事件

事件名：resize

        其还有两个配合使用的属性clientWidth和clientHeight（没有包含边框，外边距和滚动条），可以获取元素的可见部分宽高，代码示例：

window.addEventListener('resize',function(){
    console.log(document.documentElement.clientWidth);
    console.log(document.documentElement.clientHeight);
});

其他配合属性

      offsetWidth和offsetHeight，获取元素举例父级的举例的属性，该属性为只可读属性，一般在页面大小发生改变时读取子元素到父元素的距离，来动态改变布局以防布局混乱。