zoukankan      html  css  js  c++  java
  • 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事件的。

  • 相关阅读:
    细看JS中的BOM、DOM对象
    IE假死,文本框不能录入div模拟模式对话框释放不干净
    发布一个cmd 设置IP地址的脚本.
    解决一个用Request.Form 取checkbox 取不到值的问题.
    在Global.asax中实现URL 的重写.
    .net 递归生成树,根据编码进行递归.
    发布一篇 DataTable 转化为适合 jquery easyui tree,combotree 的json 函数
    批量插入数据sql
    添加背景音乐由icon控制
    echarts使用macarons主题
  • 原文地址:https://www.cnblogs.com/tangge/p/3093753.html
Copyright © 2011-2022 走看看