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  网页后退/前进