2017年6月1日学习

window事件中的this和srcElment

   <style>
       #dv1{
           200px;
           height:200px;
           background-color:blue;

       }
       #id1{
            180px;
           height:100px;
           background-color:purple;
       }
       #sp1{
            100px;
           height:100px;
           background-color:yellow;
       }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            //为body注册一个点击事件
            document.body.onclick = function (evt) {
                //alert(window.event.srcElement.id);
                //alert(this.id);
                var e = window.event || evt;
                var srcTarget = e.srcElement || e.target;
                alert(srcTarget.id);
            }
            //为dv1注册一个点击事件
            document.getElementById('dv1').onclick = function (evt) {
                var e = window.event || evt;
                var srcTarget = e.srcElement || e.target;
                alert(srcTarget.id);
                //alert(this.id);
                //alert(window.event.srcElement.id)
            }//为p元素注册一个点击事件

            document.getElementById('id1').onclick = function (evt) {
                // alert(window.event.srcElement.id);
                //alert(this.id);
                //var e = window.event || evt;
                //e.cancelBubble = true;
                //兼容写法 引发事件
                var e = window.event || evt;
                var srcTarget = e.srcElement || e.target;
                alert(srcTarget.id);

            }
        }
    </script>
</head>
<body id="body1">
    <div id="dv1">
        <p id="id1">
            <span id="sp1">一定会成功的</span>
        </p>
    </div>
</body>

window对象用于页面加载页面卸载时

 <script type="text/javascript">
        //window.onload = function () {
        //    alert("页面加载完毕！");
        //};
        window.onbeforeunload = function () {
            //alert("页面即将关闭");
            return "你确定要离开该页面吗？您所做的工作可能会丢失！";
        };
    </script>

document.history网页历史（前进后退）

 <script type="text/javascript">
        window.onload = function () {
            document.getElementById('btnForward').onclick = function () {
                //window.history.go(1)
                window.history.forward();
            };
            document.getElementById('btnBack').onclick = function () {
                //window.history.go(-1);
                window.history.back();
            }
        }
    </script>
</head>
<body>
<input  type="button"id="btnForward"value="前进"/>
    <input  type="button"id="btnBack"value="后退"/>
    <a href="02为元素对象注册事件.html">为元素对象注册事件</a>
    <a href="1.html">1</a>
</body>

document.write在固定页面调用

javascript代码

特定表格中调用

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <style>
        td{
            100px;
            height:100px;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <td style="text-align:center">a</td>
            <td style="text-align:center"><script src="JavaScript.js"></script></td>
            <td style="text-align:center">c</td>
        </tr>
        <tr>
            <td style="text-align:center">d</td>
            <td style="text-align:center">e</td>
            <td style="text-align:center">f</td>
        </tr>
    </table>
</body>

javascript css html jquery bootstrap vue webpack es6