3.javascript Dom 获取元素id 动态注册事件 window对象

window.onload事件

        //操作dom元素之前，一定要保证页面中的元素完全加载完毕才可以
        //将操作元素的代码放在window.onload事件中就可以实现等待页面中所有dom元素加载完毕之后才执行dom操作
        window.onload = function () {
            document.write('文档中的dom元素已经加载完毕！');
        };

为事件注册处理程序的正确方式

       //为事件注册处理程序
        window.onload = function () {
            //正确的方式
            document.getElementById('btn1').onclick = btn1Click;//这是将onclick事件指向btnClick()函数
            //错误的方式
            //document.getElementById('btn1').onclick = btn1Click();//这种方式是将btnClick()函数的返回值赋值给onclick事件，毫无意义，这种写法是错误的

        };
        //定义一个事件处理程序
        function btn1Click() {
            alert('按钮被点击了！');
        }

window对象的一些属性和方法

    //window.confirm()函数,提示对话框
    window.onload = function () {
        document.getElementById('btn1').onclick = function () {
            if (window.confirm('你确定要删除吗？')) {
                alert('删除成功！');
            }
            else {
                alert('删除已取消！');
            }
        };
    };
    //window.location.href属性是指将网页重新导航到的url地址
    window.onload = function () {
            document.getElementById('btn1').onclick = function () {
                window.location.href = 'http://www.baidu.com';
            };
    };
    //window.setInterval()计时函数,window.clearInterval()清除计时函数
        window.onload = function () {
            var number;
            document.getElementById('btn1').onclick = function () {
                //启动一个计时器
                number = window.setInterval(function () {
                    document.getElementById('txt1').value = parseInt(document.getElementById('txt1').value) + 1;
                }, 1000);
            };
            document.getElementById('btn2').onclick = function () {
                window.clearInterval(number);
                document.getElementById('txt1').value = '0';
            };
        };
        //window.setTimeout()方法，定时执行，只执行一次
        window.onload = function () {
            window.setTimeout(function () {
                alert('过去4秒钟了，我被执行了！');
            }, 4000);
        };
        //window.location.reload()方法是刷新页面
        window.onload = function () {
            document.getElementById('btn1').onclick = function () {
                window.location.reload();//刷新页面
            };
        };

Location对象的属性

 window.onload = function () {
        window.location.assign('HtmlPage.html');//加载一个新的文档
        alert(window.location.host);//域名+端口号
        alert(window.location.hostname);//域名
        alert(window.location.pathname);//路径
        alert(window.location.port);//端口号
    };

事件对象

            document.getElementById('btn1').onclick = function (evt) {//事件处理程序的方法中的参数evt就是就是"事件对象",事件对象里边包含着有关当前事件的一些方法和属性
                //判断在事件触发的同时是否按下了某个按键，其他的一些按键需要用键盘码来判断
                if (evt.altKey) {
                    alert('点击的同时按下了alt键！');
                }
                else if(evt.ctrlKey){
                    alert('点击的同时按下了ctrl键！');
                }
                else if (evt.shiftKey) {
                    alert('点击的同时按下了shift键！');
                }
                //事件处理程序中的this表示的就是当前事件的DOM元素
                alert(this.type);//返回当前事件的DOM元素的类型
                //事件对象的srcElement也是返回当前事件的DOM元素，但是在事件冒泡中两者是有区别的，二者并不完全一样，不能进行替换
                alert(evt.srcElement);
                //相对于页面左上角的坐标
                evt.clientX;
                evt.clientY;
                //相对于屏幕左上角的坐标
                evt.screenX;
                evt.screenY;
                //相对于元素自身左上角的坐标
                evt.offsetX;
                evt.offsetY;
            };

事件冒泡

//事件冒泡就是在某个元素的事件被触发后，包含这个元素的所有元素的对应的事件也会被触发
//在事件冒泡中，this表示的是当前被触发事件的对象，事件对象的srcElement属性表示的是在事件冒泡中最初被触发事件的对象，所以this和evt.srcElement在事件冒泡中是不一样的
//取消事件冒泡evt.cancleBubble=true;

   window.onload = function () {
        document.getElementById('span1').onclick = function (evt) {
            evt.cancelBubble = true;//取消事件冒泡
            alert(evt.srcElement.id);
        };
        document.getElementById('p1').onclick = function (evt) {
            evt.cancelBubble = true;//取消事件冒泡
            alert(evt.srcElement.id);
        };
        document.getElementById('div1').onclick = function (evt) {
            evt.cancelBubble = true;//取消事件冒泡
            alert(evt.srcElement.id);
        };
    };