JS-对象、浏览器对象

事件对象(Event)
    在触发DOM事件的时候会产生一个对象
    1.type:                 获取事件类型
    2.target:               获取时间目标
    3.stopPropagation():    阻止事件冒泡
    4.preventDefault():     阻止事件默认行为
        <div id="div">
            <button id="btn1" onclick="demo()">按钮</button>
        </div>
        <script>
            document.getElementById("btn1").addEventListener("click",showType);
            document.getElementById("div").addEventListener("click",showDiv);
            function showType(event){
                //alert(event.type);
                alert(event.target);
                event.stopPropagation();//阻止事件冒泡
            }
            function showDiv(){
                alert("div");
            }
        </script>

浏览器对象#

1.window对象######
        window.innerWidth  浏览器窗口的内部宽度 不包含进度条
        window.innerHeight 浏览器窗口的内部高度 不包含工具栏
        window.open()   打开新窗口
            window.open("index.html","标题","大小");
        window.close()  关闭当前窗口
2.计时器
        方法:
        setInterval()间隔指定的毫秒数不停地执行指定的代码
        clearInterval()用于停止setInterval()方法执行的函数代码
        <button id="btn" onclick="stopTime()">按钮</button>
        <p id="ptime"></p>
        <script>
            var myTime = setInterval(function(){
                getTime();
            },1000);
            function getTime(){
                var d = new Date();
                var t = d.toLocaleTimeString();
                document.getElementById("ptime").innerHTML = t;
            }
            function stopTime(){
                clearInterval(myTime);
            }
        </script>
        setTimeout()暂停指定的毫秒数后执行的代码
        clearTimeout()用于停止执行setTimeout()方法的函数代码
3.History对象
        window.history 对象包含浏览器的历史(url)的集合
        方法:
            history.back()      与在浏览器点击后退按钮相同
            history.forward()   与在浏览器中点击向前按钮相同
            history.go()        进入历史中的某个页面
        EXP:
            <button id="btn" onclick="goceshi()">按钮</button>
            <script>
                function goceshi(){
                    history.back();
                }
            </script>
4.Location对象######
        window.location 对象用于获得当前页面的地址(url),并把浏览器重定向到新的页面
        对象属性:
            location.hostname       返回web主机的域名
            location.pathname       返回当前页面的路径和文件名
            location.port           返回web主机的端口
            location.protocol       返回所使用的web协议(http://或https://)
            location.href           返回当前页面的URL
            location.assign()       加载新的文档
            window.location.hostname;
            location.assign(url);
5.Screen对象
        window.screen 对象包含有关用户屏幕的信息
        属性:
            screen.availWidth       可用的屏幕宽度
            screen.availHeight      可用的屏幕高度
            screen.Height           屏幕高度
            screen.Width            屏幕宽度
            <script>
                document.write("可用高度:"+screen.availHeight+",可用宽度:"+screen.availWidth);
                document.write("高度:"+screen.height+",宽度:"+screen.width);
            </script>

推荐阅读更多精彩内容

  • JS Window-浏览器对象模型 浏览器对象模型(BOM)使JS有能力与浏览器对话 由于现代浏览器几乎实现了JS...
    figure_ai阅读 1,024评论 0 2
  • 1.1 window对象是BOM的核心,window对象指当前的浏览器窗口。 window对象方法: window...
    jasmine_jing阅读 159评论 0 0
  • 第1章 认识JS JavaScript能做什么?1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现...
    mo默22阅读 625评论 0 5
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 1,278评论 0 8
  • 踏过漫长的求学之路,身在一个高考大省的一名考生,我深知这份心酸, 结束了三年的高中生涯,我们来到无比憧憬的大学...
    kxob阅读 132评论 0 2