Dom第二天学习总结

1.    body、document对象的事件
    onload(页面加载完毕后触发)--常用
        浏览器是一边下载文档，一边解析执行，可能出现JavaScript执行时需要操作某个元素，
        这个元素还没有加载，如果这样就把操作的代码放到body的onload事件中，
        或者可以把JavaScript放到元素之后。
        元素的onload事件是元素自己加载完毕时触发，body onload才是全部加载完成
    onunload（页面卸载后触发）--不常用
        网页关闭（或者离开）后触发   //刷新页面的时候、关闭选项卡的时候（多个选项卡）
    onbeforeunload(页面卸载前触发) --经常用
        在网页准备关闭（或者离开）前触发    //清除浏览器缓存，提示用户是否保存等
        
2.    除了属性之外，通用的HTML元素的事件
    onclick，ondblclick，onkeydown, onkeypress, onkeyup,
    onmousedown, onmousemove, onmouseup, oncontextmenu(在浏览器中单击鼠标右键显示‘右键菜单’时触发)
    
3.    window对象的属性1
    window.location对象    -- window.location.href="    "    //
                            window.location.reload();    //刷新当前页面
    window.event是IE下非常重要的属性，用来获得发生事件时的信息，事件不局限于window对象的事件，
    所有元素的事件都可以通过event属性取到相关信息。
    类似于winForm中的e(EventArgs)    //兼容IE、Chorme，不兼容FireFox（用event参数）
    
    一种兼容IE和FireFox的写法  会经常使用
    document.getElementById('dv').onmouseover = function(){
        if(arguments.length == 0){  //IE -- 参数为0个
            document.title = window.event.clientX+'==='+window.event.clientY;            
        }else{        //FireFox -- 参数为1个
            document.title = arguments[0].clientX + '===' + arguments[0].clientY;
        }
    }
    
4.    window对象的属性2
    clientX，clientY发生事件时鼠标相当于页面左上角（0，0）的坐标
    screenX, screenY发生事件时鼠标相当于屏幕左上角（0，0）的坐标
    offsetX, offsetY发生事件使相对于事件源（当前元素？）
    
    window.event.altKey/shiftKey/ctrlKey
        
    window.event.returnvalue = false;    --会取消默认事件的处理。在超链接的onclick里面禁止访问
    href的页面，在表单校验的时候禁止提交表单到服务器，防止错误数据提交给服务器、防止页面刷新
    
    此属性不兼容FireFox    --e.preventDefault    --取消事件的默认动作
    
    直接写return false;    --均兼容了
    
    window.event.button    --左键是1  右键是2
    window.screen.width/height    --屏幕分辨率
    
    clipboardData对象 对粘贴板的操作 只支持IE
    
        document.body.oncopy = function () {
        alert('No copy permit!');
        return false;
        };
    
    设置粘贴板中的内容    --clipboardData.setData('text','hahaha...');
    获取粘贴板中的内容    --var text = clipboardData.getDate('text');
    案例：为复制内容后面添加 该文章来自哪里的相关内容
        onload = function () {
        document.body.oncopy = function () {
            setTimeout(function () {
                var txt = clipboardData.getData('text') + 'this article is from bellychang';
                clipboardData.setData('text', txt);
            }, 1000);
        };
    };
    注意：不能直接在oncopy里修改粘贴板，用户复制动作发生1s以后再去改粘贴板中的内容
    
    window.history.back()/forward  网页后退/前进