JavaScript中的DOM操作总结

DOM

DOM: document object model文档对象模型。

获取元素节点

其中，querySelector可以根据一个css选择器获取一个节点对象，所以很强大和灵活，需要重点掌握。

getElementById         通过id获取一个元素
getElementsByTagName   通过标签名获取一组元素
getElementsByName      通过name属性获取一组元素
getElementsByTagName   获取当前节点的指定标签名后代节点
getElementsByClassName 通过class获取一组元素（IE8以上）

childNodes（属性）       获取当前节点的所有子节点（会把标签与标签之间的空白当成文本节点）
children(属性)          获取当前节点下的所有子元素
firstChild（属性）       获取当前节点的第一个子节点
firstElementChild(属性) 获取当前节点的第一个子元素（IE9以上）
lastChild（属性）        获取当前节点的最后一个子节点
lastElementChild

parentNode              父节点(不获取空白文本)
parentElement
previousSibling         前一个兄弟节点
previousElementSibling
nextSibling             后一个兄弟节点
nextElementSibling


document.body  获取body
document.documentElement 获取html根标签
document.all 获取页面的所有元素

//注意：如果有多个元素满足css选择器，那么只会返回一个节点对象,所以可以使用querySelectorAll来代替。
document.querySelector('#city li') 根据一个css选择器获取一个节点对象（很强大和灵活）

例子如下：

    
北京
    
上海
    
广州
    
深圳


        let city = document.getElementById('city')
        let list = city.getElementsByTagName('li')
        console.log(list);
        console.log(Array.isArray(list));//false
        for (let i = 0; i < list.length; i++) {
            console.log(list[i].innerHTML);
        }


        let child = city.childNodes
        //注意：childNodes会把标签与标签之间的空白也当成文本节点
        console.log(child); //NodeList(9) [text, li, text, li, text, li, text, li, text]


        let child2 = city.children
        //注意：childNodes会把标签与标签之间的空白也当成文本节点
        console.log(child2); //HTMLCollection(4) [li, li, li, li]




        let sel = document.getElementById('select')
        let parent = sel.parentNode
        console.log(parent.innerHTML);
        // 
北京
        // 
上海
        // 
广州
        // 
深圳
        console.log(parent.innerText);
        // 北京
        // 上海
        // 广州
        // 深圳

        //获取第一个子节点的文本内容
        let value = sel.firstChild.nodeValue
        console.log(value);

获取文本

innerHTML    用于获取元素内部的文本，例如<button>登录</button>。无法获取自结束标签。

<input type="radio" name="gender" value="male"/>
<input type="radio" name="gender" value="female"/>

  let inputs = document.getElementsByName('gender');
  //注意：返回的是类数组对象，而不是数组。
  console.log(Array.isArray(inputs));//false
  inputs.forEach(input => {
     console.log(input.value);
   })

按钮的获取与事件处理

        <button id="btn" onclick="btnClick()">登录</button>

        let button = document.getElementById('btn');
    button.innerHTML = '我是个按钮';
    function btnClick() {
        console.log('------')
    }
     button.ondblclick = () => {
        console.log('我被双击了')
    }

监听window加载完成

    window.onload = function() {
        let button = document.getElementById('btn');
        button.innerHTML = '我是个按钮';
        button.ondblclick = () => {
            console.log('我被双击了')
        }
    }
    function btnClick() {
        console.log('------')
    }

箭头函数绑定事件与函数表达式的区别

        let button = document.getElementById('btn');
        button.innerHTML = '我是个按钮';
        button.ondblclick = () => {
            console.log('我被双击了')
            console.log(this === button) //false

        }
        button.ondblclick = function () {
            console.log('我被双击了')

            //在使用函数表达式这种方式绑定时，响应函数是给谁绑定的，this就指向谁
            console.log(this === button) //true

        }

DOM“元素”的增删改

新增

向ul添加一个新的li（只添加新加的）：

<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li id="select">深圳</li>
</ul>


        let city =document.getElementById('city')
        let newLi = document.createElement('li')
        let text = document.createTextNode('河南')
         newLi.appendChild(text)
        city.appendChild(newLi)

另一种添加li的方式（这种方式等于是将之前的给删了，然后重新创建以前的和新加的）：

        let city =document.getElementById('city')
        city.innerHTML += '<li>郑州</li>'

折中的方式(推荐)：

                let city =document.getElementById('city')
        let newLi = document.createElement('li')
        // let text = document.createTextNode('河南')
        // newLi.appendChild(text)
        newLi.innerText = '郑州'
        city.appendChild(newLi)

插入

插入到深圳之前：

        let city =document.getElementById('city')
        let newLi = document.createElement('li')
        let text = document.createTextNode('河南')
        newLi.appendChild(text)
        let sel = document.getElementById('select')
        city.insertBefore(newLi, sel)

更改

替换深圳：

        let city =document.getElementById('city')
        let newLi = document.createElement('li')
        let text = document.createTextNode('河南')
        newLi.appendChild(text)
        let sel = document.getElementById('select')
        city.replaceChild(newLi, sel)

删除

删除深圳：

        let city =document.getElementById('city')
        let sel = document.getElementById('select')
        //city.removeChild(sel)
        //这种方式更简单方便：
        sel.parentNode.removeChild(sel)

综合小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作实例</title>
</head>
<style>
    ul {
        list-style-type: none;
    }
    li {
        border-style: solid;
        border-width: 1px;
        padding: 5px;
        margin: 5px;
        background-color: #99ff99;
        float: left;
    }
    #employeeTable {
        border-spacing: 1px;
        background-color: black;
        margin: 80px auto 10px auto;
    }

    th,td {
        background-color: white;
    }

    #formDiv {
        width: 250px;
        border-style: solid;
        border-width: 1px;
        margin: 50px auto 10px auto;
        padding: 10px;
    }

    #formDiv input {
        width: 100%;
    }

    .word {
        width: 40px;
    }

    .inp {
        width: 200px;
    }
</style>
<body>
<table id="employeeTable">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Age</th>
        <th>&nbsp;</th>
    </tr>
    <tr>
        <td>Tom</td>
        <td>tom@tom.com</td>
        <td>5000</td>
        <td>
            <a href="javascript:;">Delete</a>
        </td>
    </tr>
    <tr>
        <td>Tom</td>
        <td>tom@tom.com</td>
        <td>5000</td>
        <td>
            <a href="javascript:;">Delete</a>
        </td>
    </tr>
    <tr>
        <td>Tom</td>
        <td>tom@tom.com</td>
        <td>5000</td>
        <td>
            <a href="javascript:;">Delete</a>
        </td>
    </tr>
</table>
<div id="formDiv">
    <h4>添加新员工</h4>
    <table>
        <tr>
            <td class="word">name:</td>
            <td class="inp">
                <input type="text" name="empName" id="empName"/>
            </td>
        </tr>
        <tr>
            <td class="word">email:</td>
            <td class="inp">
                <input type="text" name="email" id="email"/>
            </td>
        </tr>
        <tr>
            <td class="word">salary:</td>
            <td class="inp">
                <input type="text" name="salary" id="salary"/>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button id="addEmpButton">
                    Submit
                </button>
            </td>
        </tr>
    </table>

</div>
</body>
</html>
<script>
    window.onload = function () {
        let allA = document.getElementsByTagName('a')
        Array.from(allA).map(item => item.onclick = deleteOption)
        //添加新的员工
        let addBtn = document.getElementById('addEmpButton')
        addBtn.onclick = function () {
            let name = document.getElementById("empName").value
            let email = document.getElementById("email").value
            let salary = document.getElementById("salary").value
            //创建一个tr
            let tr = document.createElement("tr")
            //设置tr中的内容
            tr.innerHTML = "<td>"+name+"</td>"+
                "<td>"+email+"</td>"+
                "<td>"+salary+"</td>"+
                "<td><a href='javascript:;'>Delete</a></td>"
            //获取刚刚添加的a元素，并为其绑定单击响应函数
            let a = tr.getElementsByTagName("a")[0]
            a.onclick = deleteOption
            //获取table
            let employeeTable = document.getElementById("employeeTable");
            //获取employeeTable中的tbody
            let tbody = employeeTable.getElementsByTagName("tbody")[0];
            //将tr添加到tbodye中
            tbody.appendChild(tr);
        }
    }
    function deleteOption() {
        //谁调用，this就指向谁
        let tr = this.parentNode.parentNode
        let name = tr.children[0].innerHTML
        let warning = confirm(`确认要删除${name}？？`)
        warning && tr.parentNode.removeChild(tr)
        // 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，
        // 但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
        return false
    }
</script>

DOM“样式”的修改

语法： 元素.style.样式名称 = 样式值(我们通过此种方式添加的样式为内联样式)：

        let btn =document.getElementById('btn')
        btn.style.backgroundColor = '#00F'
        btn.style.width = '200px'
        btn.style.height = '200px'
        btn.style.color = '#F00'

获取元素设置的样式

注意：btn.style只能获取设置的内联样式，显式样式获取不到：

        //btn.style只能获取设置的内联样式，显式样式获取不到
        console.log(btn.style.color);//
        console.log(btn.style.width);
        console.log(btn.style.border);//获取不到

通过window.getComputedStyle方式获取元素设置的所有生效的样式

  console.log(window.getComputedStyle(btn).border);//5px solid rgb(0, 128, 0)

注意：btn.style和window.getComputedStyle都是只读属性，不能通过此方式更改样式值。

获取其他样式的属性

使用clientHeight和clientWidth获取元素的内部宽度和高度

clientHeight和clientWidth属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。

clientHeight    
clientWidth 获取元素的宽高
<button  id="btn" onclick="btnClick()">登录</button>
<div  id="div">我是个div</div>

<style>
    #btn {
        border: 5px solid green;
        width: 200px;
        height: 200px;
    }
    #div {
        border: 5px solid blue;
        width: 200px;
        height: 200px;
    }
</style>



        let btn =document.getElementById('btn')
        let div = document.getElementById('div')

        console.log(btn.clientHeight);//190
        console.log(btn.clientWidth);//190
        console.log(div.clientHeight);//200
        console.log(div.clientWidth);//200

注意：div和button的表现是不同的，由于button元素默认设置的有box-sizing: border-box属性，所以为button和div同时设置宽高为200px，边框为5px时，得到的内容宽度却是分别为190px和200px。

如果此时再为其分别加上margin：

<style>
    #btn {
        border: 5px solid green;
        width: 200px;
        height: 200px;
    }
    #div {
        border: 5px solid blue;
        width: 200px;
        height: 200px;
    }
</style>

        let btn =document.getElementById('btn')
        let div = document.getElementById('div')
        btn.style.padding = '20px'
        div.style.padding = '20px'

        console.log(btn.clientHeight);//190
        console.log(btn.clientWidth);//190
        console.log(div.clientHeight);//240
        console.log(div.clientWidth);//240

可以看到button的宽高仍为190（也就是说，clientWidth不包括border，只是包括内容宽高和内边距），而div则变为240. 注意：clientWidth和clientHeight都是只读属性，不能通过赋值修改。

如果此时的元素结构是子元素的宽高比父元素的宽高要大，而且设置父元素的属性为overflow：hidden :

<div id="div1">
    <div id="div2">
    </div>
</div>

    #div1 {
        width: 120px;
        height: 150px;
        background-color: red;
        overflow: hidden;
    }
    #div2 {
        width: 400px;
        height: 400px;
        background-color: blue;
    }

    //此时获得的clientWidth和clientHeight仍然为400
       let div2 = document.getElementById('div2')
        console.log(div2.clientWidth);//400
        console.log(div2.clientHeight);//400

使用clientTop和clientLeft

使用clientTop和clientLeft获取一个元素顶部边框的宽度和做边框的宽度（以像素表示）。clientTop不包括顶部外边距或内边距。clientTop 是只读的。clientLeft 不包括左外边距和左内边距。clientLeft 是只读的。

<div id="areaDiv"></div>
    #areaDiv {
        border: 15px solid red;
        width: 300px;
        height: 50px;
        margin: 100px auto 20px auto;
        padding: 20px;
    }



            let areaDiv = document.getElementById("areaDiv");
                        let clientX = areaDiv.clientLeft
            let clientY = areaDiv.clientTop
            console.log(clientX, clientY);//15 15

使用offsetWidth和offsetHeight获取整个元素的宽高（内容宽高 + 内边距 + border）

<style>
    #btn {
        border: 5px solid green;
        width: 200px;
        height: 200px;
    }
    #div {
        border: 5px solid blue;
        width: 200px;
        height: 200px;
    }
</style>

        let btn =document.getElementById('btn')
        let div = document.getElementById('div')
        btn.style.padding = '20px'
        div.style.padding = '20px'

        console.log(btn.offsetWidth);//200
        console.log(btn.offsetHeight);//200
        console.log(div.offsetWidth);//250
        console.log(div.offsetHeight);//250

获取元素的“定位”父元素

<body id="body">
<div id="div1">
    <div id="div2">
        <div id="div3"></div>
    </div>
</div>
</body>

如果没有开启定位，那么div3的定位父元素为body：

        let div3 = document.getElementById('div3')
        console.log(div3.offsetParent.id);//body

offsetParent会获取开启了定位的最近的祖先元素。开启div2的相对定位：

   let div2 = document.getElementById('div2')
        let div3 = document.getElementById('div3')
        div2.style.position = 'relative'
        console.log(div3.offsetParent.id);//div2

使用offsetTop和offsetLeft获取当前元素相对于定位元素的水平偏移量和竖直偏移量

        let div3 = document.getElementById('div3')
        console.log(div3.offsetTop);//712
        console.log(div3.offsetLeft);//0

由于没有找到开启定位的父元素，那么偏移量就是相对于body的偏移量。

让div2开启定位：

                let div2 = document.getElementById('div2')
        let div3 = document.getElementById('div3')
        div2.style.position = 'relative'
        console.log(div3.offsetTop);//0
        console.log(div3.offsetLeft);//0

scrollWidth、scrollHeight、scrollLeft、scrollTop

获取元素的可滚动区域的宽高scrollWidth和scrollHeight，获取滚动条水平和竖直方向滚动的值scrollLeft和scrollTop：

<div id="div1">
    <div id="div2">
    </div>
</div>

    #div1 {
        width: 120px;
        height: 150px;
        background-color: red;
        overflow: auto;
    }
    #div2 {
        width: 800px;
        height: 400px;
        background-color: blue;
    }

    let div1 = document.getElementById('div1')
        console.log(div1.scrollWidth);//800
        console.log(div1.scrollHeight);//400
        console.log(div1.clientWidth);//105
        console.log(div1.clientHeight);//135

        console.log(div1.scrollLeft);
        console.log(div1.scrollTop);

注意：设置div1的宽高为120 和150，得到的clientWidth宽度为105，clientHeight为135.原因是滚动条的宽度为15px。client值不包括滚动条。

如果，div1.scrollHeight - div1.scrollTop === div1.clientHeight时，说明竖直滚动条滚到底部了。

示例1：滚动监听

<div id="box">
    <div id="content">

    </div>
</div>

    window.onload = function() {
        let box = document.getElementById('box')
        console.log('0000')
        box.onscroll = function () {
            if (box.scrollHeight - box.scrollTop === box.clientHeight) {
              console.log('------滚动到底部了--')
            } else {
                console.log('没有滚动到底部')
            }
        }
    }

示例2：鼠标位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标位置</title>
</head>
<style type="text/css">

    #areaDiv {
        border: 15px solid red;
        width: 300px;
        height: 50px;
        margin: 100px auto 20px auto;
        padding: 20px;
    }

    #showMsg {
        border: 1px solid black;
        width: 300px;
        height: 20px;
        margin: 0 auto;
    }

</style>
<body>
<div id="areaDiv"></div>
<div id="showMsg"></div>
</body>
</html>

<script>
    window.onload = function () {
        let areaDiv = document.getElementById("areaDiv");
        let showMsg = document.getElementById("showMsg");
        areaDiv.onmousemove = function (event) {
            event = event || window.event
            let offsetX = areaDiv.offsetLeft
            let offsetY = areaDiv.offsetTop
            let clientX = areaDiv.clientLeft
            let clientY = areaDiv.clientTop
            console.log(offsetX, offsetY, clientX, clientY);
            /*
             * clientX可以获取鼠标指针的水平坐标
             * cilentY可以获取鼠标指针的垂直坐标
             * 因为获取到的鼠标位置是相对于body的，
             * 所以需要减去元素本身距离body的偏移
             * 减去自身的边框
             */
            let x = event.clientX - offsetX - clientX;
            let y = event.clientY - offsetY - clientY;

            showMsg.innerHTML = "x = "+x + " , y = "+y;

        }
    }
</script>

示例3： 跟随鼠标移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标移动</title>
    <style type="text/css">
        #box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body style="height: 1000px;width: 2000px;">
<div id="box"></div>
</body>
</html>
<script>
    window.onload = function () {
        let box = document.getElementById('box')
        //绑定鼠标
        document.onmousemove = function (event) {
            event = event || window.event
            let left = event.clientX;
            let　top = event.clientY;
            //获取滚动条滚动的距离
            /*
             * chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
             * 火狐等浏览器认为浏览器的滚动条是html的，
             */
            let st = document.body.scrollTop || document.documentElement.scrollTop;
            let sl = document.body.scrollLeft || document.documentElement.scrollLeft;
            console.log(left, top);
            box.style.left = left + sl+ "px";
            box.style.top = top  + st + "px";
        }
    }
</script>

事件冒泡

所谓事件冒泡，就是指事件会向上传递。表现为当后代元素的事件被触发后，其祖先的相同事件也会被触发。

<div id="div1">
    <div id="div2"></div>
</div>

        let div1 = document.getElementById('div1')
        let div2 = document.getElementById('div2')
        div1.onclick = function (event) {
            console.log('div1___');
        }
        div2.onclick = function (event) {
            console.log('div2');
        }

如果不希望事件冒泡，可以取消冒泡：

        div2.onclick = function (event) {
            console.log('div2');
            event = event || window.event
            //取消冒泡
            event.cancelBubble = true
        }

示例1： 事件的委派

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的委派</title>
</head>
<body>
<button id="btn">添加超链接</button>
<ul id="u1" style="background-color: #bfa;">
    <li>
        <p>我是p元素</p>
    </li>
    <li><a href="javascript:;" class="link">超链接一</a></li>
    <li><a href="javascript:;" class="link">超链接二</a></li>
    <li><a href="javascript:;" class="link">超链接三</a></li>
</ul>
</body>
</html>
<script>
    window.onload = function () {
        let ul = document.getElementById("u1")
        console.log(ul);
        let btn = document.getElementById('btn')
        btn.onclick = function () {
            let li = document.createElement('li')
            li.innerHTML = "<a href='javascript:;' class='link'>新建的超链接</a>"
            ul.appendChild(li)
        }
        // 我们给li的父元素ul绑定事件
        ul.onclick = function (event) {
            //event.target 获取触发事件的对象
            if (event.target.className === 'link') {
                console.log("我是ul的单击响应函数");
            }
        }
    }
</script>

示例2：事件绑定

我们通过btn01.onclick = function(){}这种方式绑定响应函数，多次绑定只有最后一个生效。如果希望可以绑定多个响应函数，可以通过addEventListener这种方式：

        //  参数：
        //     1.事件的字符串，不要on
        //  2.回调函数，当事件触发时该函数会被调用
        //  3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false

        btn.addEventListener('click', function () {
            console.log("222222222222");
        }, false)

注意：addEventListener这个方法不支持IE8及以下的浏览器。在IE8中可以使用attachEvent()来绑定事件。

封装函数适配IE8：

            function bind(obj , eventStr , callback){
                if(obj.addEventListener){
                    //大部分浏览器兼容的方式
                    obj.addEventListener(eventStr , callback , false);
                }else{
                    /*
                     * this是谁由调用方式决定
                     * callback.call(obj)
                     */
                    //IE8及以下
                    obj.attachEvent("on"+eventStr , function(){
                        //在匿名函数中调用回调函数
                        callback.call(obj);
                    });
                }
            }

//使用：
bind(btn01 , "click" , function(){
                    alert(this);
                });

示例3：鼠标拖拽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标拖拽</title>
</head>
<style>
    #box {
        width: 100px;
        height: 100px;
        background-color: blue;
        position: absolute;
    }
</style>
<body>
<div id="box"></div>
</body>
</html>
<script>
    window.onload = function () {
        let box = document.getElementById('box')
        box.onmousedown = function (event) {
            //当调用一个元素的setCapture()方法以后，这个元素将会把下一次所有的鼠标按下相关的事件捕获到自身上
            box.setCapture && box.setCapture()
            event = event || window.event
            //获取按下时，鼠标相对于该元素左上角的偏移值
            let offsetX = event.clientX - box.offsetLeft
            let offsetY = event.clientY - box.offsetTop
            document.onmousemove = function (event) {
                event = event || window.event
                //每一次移动，都需要减去这个偏移量
                box.style.left = event.clientX - offsetX + 'px'
                box.style.top = event.clientY - offsetY + 'px'
            }
            document.onmouseup = function (event) {
                document.onmousemove = null
                document.onmouseup = null
                //当鼠标松开时，取消对事件的捕获
                box.releaseCapture && box.releaseCapture()
            }
            /*
             * 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
             *     此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
             *     如果不希望发生这个行为，则可以通过return false来取消默认行为
             *
             * 但是这招对IE8不起作用
             */
            return false

        }
    }
</script>

示例4： 鼠标滚轮滚动事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标滚轮滚动事件</title>
</head>
<style>
    #box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<body style="height: 2000px;">
<div id="box"></div>
</body>
</html>
<script>
    window.onload = function () {
        let box = document.getElementById('box')
        //为box绑定一个鼠标滚轮滚动的事件
        /*
         * onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发，
         *     但是火狐不支持该属性
         *
         * 在火狐中需要使用 DOMMouseScroll 来绑定滚动事件
         *     注意该事件需要通过addEventListener()函数来绑定
         */
        box.onmousewheel = function (event) {
            event = event || window.event
            //event.wheelDelta 可以获取鼠标滚轮滚动的方向(向上为120，向下-120,与系统设置的鼠标方向有关)
            //wheelDelta这个属性火狐中不支持
            //在火狐中使用event.detail来获取滚动的方向
            //向上滚 -3  向下滚 3
            console.log(event.wheelDelta);
            if (event.wheelDelta > 0 || event.detail < 0) {
                //向上滚，box1变短
                box.style.height = box.clientHeight - 10 + "px";

            } else {
                //向下滚，box1变长
                box.style.height = box.clientHeight + 10 + "px";
            }
            /*
            * 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false
            * 需要使用event来取消默认行为event.preventDefault();
            * 但是IE8不支持event.preventDefault();这个玩意，如果直接调用会报错
            */
            event.preventDefault && event.preventDefault();
            return false;
        }
        //为火狐绑定滚轮事件
        bind(box1, "DOMMouseScroll", box1.onmousewheel);
    }

    function bind(obj, eventStr, callback) {
        if (obj.addEventListener) {
            //大部分浏览器兼容的方式
            obj.addEventListener(eventStr, callback, false);
        } else {
            /*
             * this是谁由调用方式决定
             * callback.call(obj)
             */
            //IE8及以下
            obj.attachEvent("on" + eventStr, function () {
                //在匿名函数中调用回调函数
                callback.call(obj);
            });
        }
    }
</script>

示例5：键盘事件

    window.onload = function () {
        document.onkeydown = function (event) {
            event = event || window.event;
            //通过keyCode来获取按键的编码（注意：keyCode已经从web标准中移除了）
            //shiftKey altKey ctrlKey metaKey判断shift alt ctrl command是否被按下
            console.log(event);
            if (event.keyCode === 65) {
                console.log('a');
            }
            //在文本框中输入内容，属于onkeydown的默认行为
            //如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
            return false
        }
        document.onkeyup = function (event) {
        }
    }