Day17-面向对象5：BOM对象

cherise9889
52 阅读7分钟

对象.png

普通事件-续

onload

操作：将script代码写在按钮标签上面，执行的时候null报错

原因：浏览器加载html页面是从上往下解释执行（读一行执行一行）。如果将script代码写在按钮标签上面，执行js代码时，按钮还没被加载出来。此时获取的是null

解决：方式1：将script代码写在按钮标签下面

方式2：监听window对象的load事件，在页面加载完成之后，再去执行

onload 事件会在页面或图像加载完成后立即发生。

onload 通常用于 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。

语法

在 HTML 中:

在 JavaScript 中:

window.onload=function(){SomeJavaScriptCode};

<script>
    // 监听window的load事件
    window.addEventListener('load', function () {
        var btn = document.querySelector('button')

        btn.addEventListener('click', function () {
            alert('我被点了')
        })
    })
</script>
<button>按钮</button>

load方法的应用：

进入页面加载的动画

onchange

onchange 事件会在域的内容改变时发生。

onchange 事件也可用于单选框与复选框改变后触发的事件。

语法

HTML 中:

<element onchange="SomeJavaScriptCode">

JavaScript 中:

object.onchange=function(){SomeJavaScriptCode};

onscroll

当文档被滚动时发生的事件。

onsubmit

表单提交时触发

ondrag

该事件在元素正在拖动时触发

1.事件高级

事件对象

事件发生之后，跟事件相关的一系列信息数据的集合，都会放到这个对象中。这个对象就是事件对象。

比如：

  1. 谁绑定了这个事件
  2. 如果是鼠标触发的事件，可以得到鼠标相关的信息，比如鼠标的位置
  3. 如果是键盘触发的事件，可以得到键盘相关的信息，比如按下了哪个键。

获取：事件在触发的时候，会产生事件对象，并且系统会以实参的形式传递给事件处理函数。

我们可以在事件处理函数中，声明一个参数来接收事件对象。

type返回当前 Event 对象表示的事件的名称
keyCode返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。
target返回触发此事件的元素（事件的目标节点）。
preventDefault()通知浏览器不要执行与事件关联的默认动作。
stopPropagation()不再派发事件。

作用：

  1. 可以获取当前事件的类型（e.type
  2. 在键盘事件中可以监听按下了哪个键（e.keyCode
  3. 可以具体获取点击了哪一个子元素（e.target
  4. 可以阻止某些标签的默认行为（e.preventDefault()
  5. 可以阻止事件冒泡(e.stopPropagation()

Input Text 对象方法

方法描述
blur()从文本域中移除焦点
focus()让文本域获取焦点
select()选取文本域的内容

通过事件对象监听具体按钮，模拟京东搜索框效果; 按下s键，可以自动聚焦到京东的搜索框

<!-- 模拟搜索框 -->
<input type="text">
<script>
    // 监听按键的操作(建议使用keyup监听键盘松开，就不会录入按下的键)
    document.addEventListener('keyup',function(e){
        console.log(e.keyCode) // 按下s键得到83，拿83值进行判断

        if(e.keyCode == 83){
            // 说明s键被按了，需要让文本框聚焦
            document.querySelector('input').focus() // onfocus是属性，而focus是一个方法
        }
    })
</script>

事件委托

将事件委托给别人代为处理。不需要通过子元素注册事件，而是通过父元素（就是把事件处理函数的代码放到父元素事件中去执行）

原理：利用了事件冒泡。当子元素的事件触发的时候，会冒泡到父元素，然后执行父元素的事件处理函数。

优点：只需要给父元素绑定一个事件，没必要给每一个子元素都绑定事件。提高了程序的性能

可以实现给新增的元素动态添加事件

鼠标事件对象

目的：为了获取鼠标的坐标

属性：

client:表示鼠标在可视区域x轴和y轴的坐标

page:表示鼠标在页面文档x轴和y轴的坐标

screen:表示鼠标在电脑屏幕x轴和y轴的坐标

onmousemove：鼠标被移动。

document.addEventListener('click',function(e){
  console.log(e)

  // client:表示鼠标在可视区域x轴和y轴的坐标
  console.log(e.clientX)
  console.log(e.clientY)

  // page:表示鼠标在页面文档x轴和y轴的坐标
  console.log(e.pageX)
  console.log(e.pageY)

  // screen:表示鼠标在电脑屏幕x轴和y轴的坐标
  console.log(e.screenX)
  console.log(e.screenY)
})
监听鼠标移动，设置图片跟随
步骤
1.先使用绝对定位使图片脱标，设置鼠标跟随键的初始位置(浏览器看不见)
2.监听鼠标的移动事件，onmousemove     鼠标被移动。
3.在事件中获取鼠标的坐标，设置为图片的偏移值
// 获取跟随事件的对象
var img = document.querySelector('img')

// 监听鼠标的移动事件
document.addEventListener('mousemove',function(e){
  // 获取鼠标在页面文档中的坐标
  var x = e.pageX
  var y = e.pageY

  // 将鼠标的坐标设置为跟随键的偏移值
  img.style.left = x - 40 + 'px'
  img.style.top = y - 40 + 'px'
})
onmousemove鼠标被移动。

2.BOM简介

浏览器对象模型（Browser Object Model (BOM)）

作用：JS有能力与浏览器“对话”

比如：弹框，新建窗口，跳转到其他页面，实现定时效果

组成：

Window 窗口对象 表示浏览器中打开的窗口。

Location 地址栏对象 用于获取当前 URL 的信息，并把

History 历史记录对象 包含用户（在浏览器窗口中）访问过的 URL。

Screen 屏幕对象 包含有关客户端显示屏幕的信息。

Navigator 浏览器对象 包含有关浏览器的信息。

操作思想

将浏览器的各个组成部分抽成对象，以面向对象的方式来操作

因为对象有属性和方法，可以提高开发效率

3.window窗口对象

概念

窗口对象

浏览器会为html文档创建一个window对象，包含页面中的变量函数，弹框，和document。

页面一加载的时候，浏览器就会为当前的html页面，生成一个window对象。它是当前页面最大的对象，也就是页面的顶级对象。

通过打印看出，document，location，History都属于window的成员

window对象的特点：访问成员的时候可以不写window对象名

页面中定义的变量也是window的一个属性

页面中定义的函数也是window的一个方法（调用定义在window中的方法也可以省略window

弹框也是window对象的一个方法

方法

弹框相关
alert()显示带有一段消息和一个确认按钮的警告框。
prompt()显示可提示用户输入的对话框。
confirm()显示带有一段消息以及确认按钮和取消按钮的对话框。
窗口相关
open()打开一个新的浏览器窗口或查找一个已命名的窗口。
close()关闭浏览器窗口。
<button class="btn1">打开窗口</button>
<button class="btn2">关闭窗口</button>
<script>
    /*  open()  打开一个新的浏览器窗口或查找一个已命名的窗口。
        close() 关闭浏览器窗口。 */
   var newWindow = null
   // 打开窗口
    document.querySelector('.btn1').addEventListener('click',function(){
        newWindow = window.open('http://www.baidu.com')
    })
   // 关闭窗口
   document.querySelector('.btn2').addEventListener('click',function(){
        newWindow.close()
    })
</script>
定时器相关

定时一次与循环定时

setTimeout()在指定的毫秒数后调用函数或计算表达式。
setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearTimeout()取消由 setTimeout() 方法设置的 timeout。
定时一次

setTimeout() 在指定的毫秒数后调用函数或计算表达式。

完整格式

window.setTimeout(要调用的函数，等待时间) 在指定的时间后执行函数

注意点：

1、window可以省略；

2、等待时间为毫秒数；

3、第一个参数可以是代码串或者函数

如果传代码串，格式‘函数名（）’

如果传函数，直接写函数名即可

4、一个页面可以设置多个定时器，可以使用变量来区分

3 秒（3000 毫秒）后弹出 "Hello" :

setTimeout(function(){alert("Hello"); }, 3000);

清除定时

clearTimeout()——取消由 setTimeout() 方法设置的 timeout。

循环定时

setTimeout() 在指定的毫秒数后调用函数或计算表达式。

4.Location地址栏对象

地址栏对象，可以实现刷新和跳转

href返回完整的URL
pathname返回的URL路径名。

刷新

reload()重新载入当前文档
<p>
    <span id="time">5</span>秒之后，自动跳转到首页...
</p>
<script>
    /* 分析：
           1.倒计时读秒效果实现
               1.1 定义一个方法，获取span标签，修改span标签体内容，时间--
               1.2 定义一个定时器，1秒执行一次该方法
           2.在方法中判断时间如果<= 0 ，则跳转到首页  */
    var num = 5
    function upDateTime(){
        num--

        if(num <= 0){
            location.href = "http://www.baidu.com"
            clearInterval(timer)
        }

        var djs = document.querySelector('#time')

        djs.innerHTML = `${num}`
    }
    var timer = setInterval(upDateTime,1000)
</script>

5.History历史记录对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

方法
back()加载 history 列表中的前一个 URL
forward()加载 history 列表中的下一个 URL
go()加载 history 列表中的某个具体页面
属性
length返回历史列表中的网址数

go() 方法可加载历史列表中的某个具体的页面。

该参数可以是数字，使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。（-1上一个页面，1前进一个页面)。或一个字符串，字符串必须是局部或完整的URL，该函数会去匹配字符串的第一个URL。

avatar
文章
阅读
粉丝