Dom – 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 每隔一段时间执行指定的代码,第一个参数为代码的字符串,第二个参数为间隔时间(单位毫秒),返回值为定时器的标识

隐藏行号 复制代码 这是一段程序代码。
  1.     <script type="text/javascript">
  2.         function f3() {
  3.             //              第1个参数   第2个参数
  4.             //                  ↓           ↓
  5.             setInterval("alert('hello')", 5000);
  6.         }
  7.     </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属性。实现代码参考备注。

隐藏行号 复制代码 这是一段程序代码。
  1. <head>
  2.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3.     <title>走马灯效果</title>
  4. </head>
  5. <script type="text/javascript">
  6.     function scroll() {
  7.         var title = document.title;
  8.         var firstfont = title.charAt(0);
  9.         var lastfont = title.substring(1, title.length);
  10.         document.title = lastfont + firstfont;
  11.     }
  12.     setInterval("scroll()", 500);
  13. </script>

 

走马灯效果

(8)练习:刚进入的时候还是向左滚动,点击【向左】按钮就向左连续滚动,点击【向右】按钮就向右连续滚动。

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

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

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

隐藏行号 复制代码 这是一段程序代码。
  1. <head>
  2.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3.     <title>走马灯效果</title>
  4. </head>
  5. <script type="text/javascript">
  6.     function scroll() {
  7.         var title = document.title;
  8.         var firstfont = title.charAt(0);
  9.         var lastfont = title.substring(1, title.length);
  10.         document.title = lastfont + firstfont;
  11.     }
  12.     function scrollrght() {
  13.         var title = document.title;
  14.         var firstfont = title.charAt(4);
  15.         var lastfont = title.substring(0, title.length - 1);
  16.         document.title = firstfont + lastfont;
  17.     }
  18.     function left() {
  19.         clearInterval(dirright);
  20.         setInterval("scroll()", 1000);
  21.     }
  22.     function right() {
  23.         clearInterval(dirleft);
  24.         setInterval("scrollrght()", 1000);
  25.     }
  26.     var dirleft = setInterval("scroll()", 1000);
  27.     var dirright = setInterval("scrollrght()", 1000);
  28.     left();
  29. </script>
  30. <body>
  31.     <input type="button" onclick="left()"  value="向左" />
  32.     <input type="button" onclick="right()"  value="向右" />
  33. </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事件的。

你可能感兴趣的:(document)