后浪小萌新JS --- BOM和事件

一、BOM操作

  1. 什么是BOM

    browser object model — 浏览器对象模型
    js提供了一个window对象, 表示整个浏览器。

  2. window对象

    js中定义的全局变量, 都是绑定在window对象上的属性

二、窗口基本操作

  1. 新建窗口

    新建一个空的窗口并且返回一个窗口对象:window.open()
    创建一个有界面的窗口window.open(‘html地址’)
    创建一个独立的窗口并且设置窗口大小window.open(‘html地址’, ‘’, ‘width=宽度值,height=高度值’)

  2. 关闭窗口

    窗口对象.close()

  3. 移动窗口(只针对独立存在的小窗口有效)

    窗口对象.moveTo(x坐标,y坐标)

  4. 获取窗口的宽度和高度

    窗口对象.innerWidth\窗口对象.innerHeight - 获取浏览器显示网页内容部分的有效宽度

    窗口对象.outerWidth\窗口对象.outerHeight - 获取整个浏览器的宽度和高度

  5. 修改窗口中的内容

    窗口对象.location = 新的页面地址

三、弹框

  1. 警示框、提示框 (带提示信息和确定按钮)

    alert(提示信息)

  2. 确认提示框(带提示信息和确定、取消按钮)

    confirm(提示信息) - 如果选的是确定返回值是true, 否则是false

  3. 带输入框的提示框(带提示信息、输入框、确定按钮和取消按钮)

    prompt(提示信息) - 如果点击的是取消,返回值是null;如果点击的是确定,返回值就是输入框中输入的内容

四、定时操作

  1. 定时相关的方法

    1)setInterval()/clearInterval()

        setInterval(函数, 定时时间) - 每隔指定时间(单位: 毫秒, 1000毫秒 == 1秒)就调用一次指定函数。会返回一个定时器对象

        clearInterval(定时器) - 关闭指定定时器

    2)setTimeout()/clearTimeout()

        setTimeout(函数, 定时时间) - 到指定时间后调用指定函数(函数只调用一次)

        clearTimeout(定时器) - 关闭指定定时器

注意: 这两种保存定时器对象的时候需要使用全局变量, 这两种的定时器和清除定时器要对应使用.

五、事件绑定

  1. 事件绑定 - 在事件源上绑定指定事件对应的驱动程序

    xxx发生了xx就做xx -> 遇到这样的情况就需要做事件绑定

    ‘事件源’发生了’事件’就做’事件驱动程序’

  2. 怎么给事件源绑定事件

    a. 在事件源对应的标签的事件属性中调用事件驱动程序对应的函数(事件驱动程序中的this是window)

    b.给事件源节点的事件属性赋值为驱动程序对应的函数(事件驱动程序中的this是事件源)

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页