Dom – 1.window对象事件 + 2.body、document对象的事件

1. window对象#
2. body、document对象的事件#

1.window对象

（1）alert

（2）confirm

（3）navigate

（4）setInterval

（5）clearInterval

（6）setTimeout 、clearTimeout

（7）案例：实现标题栏走马灯的效果，也就是浏览器的标题文字每隔500ms向右滚动一下

（8）练习：刚进入的时候还是向左滚动，点击【向左】按钮就向左连续滚动，点击【向右】按钮就向右连续滚动。

（9）showModalDialog

（10）showModelessDialog

2.body、document对象的事件

（1）onload

（2）onunload

（3）onbeforeunload

（4）onclick（单击）、ondblclick（双击）、onkeydown（按键按下）、onkeypress（点击按键）、onkeyup（按键释放）、onmousedown（鼠标按下）、onmousemove（鼠标移动）、onmouseout（鼠标离开元素范围）、onmouseover（鼠标移动到元素范围）、onmouseup（鼠标按键释放）

1.window对象#

window对象代表当前浏览器窗口，使用window对象的属性、方法的时候可以省略window，比如 window.alert('a') 可以省略成 alert('aa')。
（1）alert 方法，弹出消息对话框
（2）confirm 方法，显示“确定”、“取消”对话框，如果按了【确定】按钮，就返回true，否则就false
        if (confirm("是否继续？")) {
            alert("确定");
        }
        else {
            alert("取消");
        }

（3）重新导航到指定的地址：navigate(http://www.baidu.com);

（4）setInterval 每隔一段时间执行指定的代码，第一个参数为代码的字符串，第二个参数为间隔时间（单位毫秒），返回值为定时器的标识

这是一段程序代码。

```
    <script type="text/javascript">
```
```
        function f3() {
```

            //              第1个参数   第2个参数

            //                  ↓           ↓

            setInterval("alert('hello')", 5000);

```
        }
```
```
    </script>
```

（5）clearInterval 取消setInterval的定时执行，相当于Timer中的Enabled=False。因为setInterval可以设定多个定时，所以clearInterval要指定清除那个定时器的标识，即setInterval的返回值。

var intervalId = setInterval("alert('hello')", 5000);
clearInterval(intervalId);

（6）setTimeout 也是定时执行，但是不像setInterval那样是重复的定时执行，只执行一次，clearTimeout也是清除定时。很好区分：Interval：间隔；timeout：超时。
var timeoutId = setTimeout("alert('hello')", 2000);

（7）案例：实现标题栏走马灯的效果，也就是浏览器的标题文字每隔500ms向右滚动一下。提示：标题为document.title属性。实现代码参考备注。

这是一段程序代码。

```
<head>
```

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

```
    <title>走马灯效果</title>
```
```
</head>
```
```
<script type="text/javascript">
```
```
    function scroll() {
```
```
        var title = document.title;
```

        var firstfont = title.charAt(0);

        var lastfont = title.substring(1, title.length);

        document.title = lastfont + firstfont;

```
    }
```
```
    setInterval("scroll()", 500);
```
```
</script>
```

（8）练习：刚进入的时候还是向左滚动，点击【向左】按钮就向左连续滚动，点击【向右】按钮就向右连续滚动。

思路1、全局变量，标志当前的滚动方向，当点击向左的时候dir="left",向右dir="right"。

思路2、scrollleft scroolright,向右滚的时候将scrollleft的Interval clear掉，然后setInterval启动scrollright

(下面的代码有问题，多点几次向右速度越来越快，因为多加载了setInterval，参考思路1，用参数让它只执行1次setInterval)

这是一段程序代码。

```
<head>
```

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

```
    <title>走马灯效果</title>
```
```
</head>
```
```
<script type="text/javascript">
```
```
    function scroll() {
```
```
        var title = document.title;
```

        var firstfont = title.charAt(0);

        var lastfont = title.substring(1, title.length);

        document.title = lastfont + firstfont;

```
    }
```
```
    function scrollrght() {
```
```
        var title = document.title;
```

        var firstfont = title.charAt(4);

        var lastfont = title.substring(0, title.length - 1);

        document.title = firstfont + lastfont;

```
    }
```
```
    function left() {
```
```
        clearInterval(dirright);
```
```
        setInterval("scroll()", 1000);
```
```
    }
```
```
    function right() {
```
```
        clearInterval(dirleft);
```

        setInterval("scrollrght()", 1000);

```
    }
```

    var dirleft = setInterval("scroll()", 1000);

    var dirright = setInterval("scrollrght()", 1000);

```
    left();
```
```
</script>
```
```
<body>
```

    <input type="button" onclick="left()"  value="向左" />

    <input type="button" onclick="right()"  value="向右" />

```
</body>
```

（9）showModalDialog 弹出模态对话框（不能点击主窗口），注意showModalDialog必须在onClick等用户手动触发的事件中才会执行，否则可能会被最新版本的浏览器当成广告弹窗而拦截。

9.1.第一个参数为弹出模态窗口的页面地址。

9.2.在弹出的页面中调用window.close()（不能省略window.close()中的window.）关闭窗口，只有在对话框中调用window.close()才会自动关闭窗口，否则浏览器会提示用户进行确认。

（10）showModelessDialog 弹出非模态窗口（可以点击主窗口），参数等和showModalDialog一样。

2.body、document对象的事件#

（1）onload：网页加载完毕时触发，浏览器是一边下载文档、一边解析执行，可能会出现JavaScript执行时需要操作某个元素，这个元素还没有加载，如果这样就要把操作的代码放到body的onload事件中，或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发，body onload才是全部加载完成

（2）onunload：网页关闭（或者离开）后触发。

（3）onbeforeunload：在网页准备关闭（或者离开）后触发。

在事件中为"window.event.returnValue赋值（要显示的警告消息），这样窗口离开（比如前进、后退、关闭）就会弹出确认消息

<body onbeforeunload="window.event.returnValue='真的要放弃发帖退出吗？'">。显示的文字随浏览器版本而有差异。

（4）除了有特有的属性之外，当然还有通用的HTML元素的事件：onclick（单击）、ondblclick（双击）、onkeydown（按键按下）、onkeypress（点击按键）、onkeyup（按键释放）、onmousedown（鼠标按下）、onmousemove（鼠标移动）、onmouseout（鼠标离开元素范围）、onmouseover（鼠标移动到元素范围）、onmouseup（鼠标按键释放）等。

有键按下 -> 产生onKeyDown事件 -> 如果是有ASCII码的按键, 则产生onKeyPress事件
有键释放 -> 产生onKeyUp事件
象Shift、Ctrl、Alt、F1、F2、...等按键是不会产生onKeyPress事件的。

作者：【唐】三三

出处：https://www.cnblogs.com/tangge/archive/2013/05/22/3093753.html

版权：本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

posted @ 2013-05-22 21:47 【唐】三三阅读(602) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

历史上的今天：
2012-05-22 JS计算GridView里的TextBox
2012-05-22 批量删除记录时如何实现全选【总结】

公告

昵称：【唐】三三
园龄： 14年3个月
粉丝： 176
关注： 64

+加关注

2013年5月

日

一

二

三

四

五

六

【唐】三三

ConFused Road, ConFused People, All In [Tang]San.

Dom – 1.window对象事件 + 2.body、document对象的事件

1.window对象#

2.body、document对象的事件#

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

合集 (3)

随笔分类 (727)

随笔档案 (675)

相册 (11)

友情链接

阅读排行榜

评论排行榜

推荐排行榜

最新评论