window对象(BOM)——滚动条的运用、let与var的区别、this的指向、event事件对象、事件对象的常见属性和方法、this与event的区别

目录

一、screen属性(用户屏幕相关属性  不是浏览器窗口哦)

二、history对象(页面相关属性)

三、location对象

四、 navigator

五、open()   新浏览器窗口相关操作

 六、 事件(onload事件、onresize事件、onscroll滚动条事件、键盘事件)

let与var的区别

this的指向

event事件对象

事件对象本身的获取存在兼容问题:

事件对象的常见属性和方法

this与event的区别 

强制修改this指向 

call()方法

apply()方法

bind方法


一、screen属性(用户屏幕相关属性  不是浏览器窗口哦)

window.screen 对象包含有关用户屏幕的信息

screen.availWidth 屏幕宽度

screen.availHeight  屏幕高度

二、history对象(页面相关属性)

forward() 方法可加载历史列表中的下一个页面

back() 方法可加载历史列表中的前一个页面(如果存在)

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

参数可以是数字,使用的是要访问的页面在 History 的页面列表中的相对位置。

        go(0) 刷新本页面

        go(1) 前进一个页面

        go(-1) 返回前一个页面

三、location对象

location.href        返回当前页面的地址

location.pathname        路径名

location.reload()        重新加载 刷新本页面

四、 navigator

window.navigator 对象包含有关访问者浏览器的信息。

五、open()   新浏览器窗口相关操作

打开一个新的浏览器窗口,加载给定 URL 所指定的文档

window.open(

        "http://www.baidu.com",

        "_blank",

        "width=500,height=500"

      );//打开一个新窗口,宽度200px,高度500px 

window.close(); //关闭

 六、 事件(onload事件、onresize事件、onscroll滚动条事件、键盘事件

等到html文档加载完毕(包括图片等下载完毕)后,会触发onload事件

延迟执行js代码即可使用此事件实现

window.onload = function () {};

当窗口大小发生改变时,会触发onresize事件

window.onresize = function () {
      console.log("窗口大小改变了");
    };

  当滚动条滚动时会触发onscroll事件

结合计时器可实现返回顶部与顶部导航固定定位的效果

window.onscroll = function () {
      console.log("你的浏览器滚动条滚动了");
    };

回顶部代码举例:

var _gotop = document.getElementById("gotop");//回顶部按钮元素的获取
    var timer = null,
      sTop;//计时器与滚动条变量的声明
    _gotop.onclick = function () {//添加单击事件
      timer = setInterval(function () {
        document.documentElement.scrollTop -= 10;//高度值每次减少数值  累减
        sTop = document.documentElement.scrollTop;//将滚动条距离顶部高度数值赋值给变量 要在函数内部赋值才可用
        if (sTop <= 0) {//计时器停止条件
          clearInterval(timer);
        }
        // console.log(sTop);
      }, 100);//可修改高度减少数值与计时器时间来达到理想效果
    };

键盘事件

根据获取键名或键值判断是否执行代码

window.onkeyup=function(e){
    console.log(e,e.key,e.keyCode,"按键");
  }
window.onkeydown=function(e){
    console.log(e,e.key,e.keyCode,"按键");
  }

let与var的区别

1.var是全局作用域,let 只在当前代块作用域内有效

2.var有变量提升,let没有变量提升

3.let变量不能重复声明,var可以

4.let存在暂时性死区”(temporal dead zone,简称TDZ)。

5. let配合for循环的独特应用

1.作用域不一样:
通过var定义的变量,作用域是整个封闭函数,是全域的 。通过let定义的变量,作用域是在块级或是子块中。

2.变量提升:
浏览器在运行代码之前会进行预解析,首先解析函数声明,定义变量,解析完之后再对函数、变量进行运行、赋值等。 不论var声明的变量处于当前作用域的第几行,都会提升到作用域的头部。 var 声明的变量会被提升到作用域的顶部并初始化为undefined,而let声明的变量在作用域的顶部未被初始化。let不能在定义之前访问变量,但是var可以。

3.块级作用域:
只要块级作用域内存在let命令,它所声明的变量就“绑定”这个区域,不再受外部的影响。而且,在代码块内,使用let命令声明变量之前,该变量都是不可用的,尽管代码块外也存在相同全局变量。

4. let不允许在相同作用域内,重复声明同一个变量,但是var可以。

5.let非常适合用于 for循环内部的块级作用域。
** JS中的for循环体比较特殊,每次执行都是一个全新的独立的块作用域,用let声明的变量传入到 for循环体的作用域后,不会发生改变,不受外界的影响。(let会将每次循环的 " i "进行保留。)

// ---------- 看一个常见的面试题目: ----------
for (var i = 0; i <10; i++) {  
    setTimeout(function() {    // 同步注册回调函数到 异步的 宏任务队列。
        console.log(i);        // 执行此代码时,同步代码for循环已经执行完成
    }, 0);
}
// 输出结果:10   共10个
// 这里面的知识点: JS的事件循环机制,setTimeout的机制等
 
// ---------- 如果把 var改成 let声明:----------
// i虽然在全局作用域声明,但是在for循环体局部作用域中使用的时候,变量会被固定,不受外界干扰。
for (let i = 0; i < 10; i++) { 
    setTimeout(function() {
        console.log(i);    //  i 是循环体内局部作用域,不受外界影响。
    }, 0);
}
// 输出结果:0  1  2  3  4  5  6  7  8 9  

this的指向

this的理解:可以把this理解成一个指针 ,指向谁,this就等价谁。

注意:函数的this在函数执行的确定的

  1. 构造函数 new 函数名() this指向 new出来对象的实例
  2. 箭头函数的this取决于上一层作用域的this
  3. 对象中的this指向对象
  4. 事件响应函数的this指向 事件调用者
  5. setTimout setInterval 里面this指向window
  6. call,apply,bind 响应的函数this指向第一个参数

event事件对象

eventTarget.onclick = function(event) {
   // 这个 event 就是事件对象,我们还喜欢的写成 e 或者 evt 
} 
eventTarget.addEventListener('click', function(event) {
   // 这个 event 就是事件对象,我们还喜欢的写成 e 或者 evt  
})
  • 官方解释:event 对象代表事件的状态,比如键盘按键的状态、鼠标的位置、鼠标按钮的状态
  • 简单理解:
    • 事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面
    • 这个对象就是事件对象 event,它有很多属性和方法,比如“
    • 谁绑定了这个事件
    • 鼠标触发事件的话,会得到鼠标的相关信息,如鼠标位置
    • 键盘触发事件的话,会得到键盘的相关信息,如按了哪个键
  • 这个 event 是个形参,系统帮我们设定为事件对象,不需要传递实参过去
  • 当我们注册事件时, event 对象就会被系统自动创建,并依次传递给事件监听器(事件处理函数)
<body>
    <div>123</div>
    <script>
        // 事件对象
        var div = document.querySelector('div');
        div.onclick = function(e) {
                // console.log(e);
                // console.log(window.event);
                // e = e || window.event;
                console.log(e);


            }
        // 1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
        // 2. 事件对象只有有了事件才会存在,它是系统给我们自动创建的,不需要我们传递参数
        // 3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息,鼠标坐标啊,如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键
        // 4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e
        // 5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法  e = e || window.event;
    </script>
</body>

事件对象本身的获取存在兼容问题:

  1. 标准浏览器中是浏览器给方法传递的参数,只需要定义形参 e 就可以获取到。
  2. 在 IE6~8 中,浏览器不会给方法传递参数,如果需要的话,需要到 window.event 中获取查找

解决:

e = e || window.event;

事件对象的常见属性和方法

事件对象属性方法

说明

e.target

返回触发事件的对象 标准

e.srcElement

返回触发事件的对象 非标准 ie6-8使用

e.type

返回事件的类型 比如click mouseover 不带on

e.cancelBubble

该属性阻止冒泡,非标准,ie6-8使用

e.returnValue

该属性阻止默认行为 非标准,ie6-8使用

e.preventDefault()

该方法阻止默认行为 标准 比如不让链接跳转

e.stopPropagation()

阻止冒泡 标准

this与event的区别 

(函数中的形参也代指event,所以将 "event." 写为 "形参." 也可行)

  • this 是事件绑定的元素, 这个函数的调用者(绑定这个事件的元素)
  • e.target 是事件触发的元素。

1.this是Javascript语言的一个关键字。

2.this代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。

3.event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

4.this和event.target的区别:

js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化(在事件触发时,只传递当前event对象的引用),它永远是直接接受事件的目标DOM元素;

另外,this和event.target都是dom对象,如果要使用jquey中的方法可以将他们转换为jquery对象:$(this)和$(event.target);

强制修改this指向 

call()方法

直接调用函数,直接传递参数

函数名.call(this强制指向对象,函数实参1,函数实参2,....);参数一可选

apply()方法

直接调用函数,直接传递 数组 参数

函数名.apply(this强制指向对象,[函数实参1,函数实参2,....]);参数一可为null 参数二可选
//实参以数组形式传入

call与apply不同点

虽然这个函数的语法与 call() 几乎相同,但根本区别在于,call() 接受一个参数列表,而 apply() 接受一个参数的单数组

且apply当第一个参数为 null 或 undefined 时,可以使用数组展开语法实现类似的结果。

call与apply方法共同点

在 func 函数运行时使用的 this 值。请注意,this 可能不是该方法看到的实际值:如果这个函数处于非严格模式下,则指定为 null 或 undefined 时会自动替换指向全局对象window,原始值会被包装。

bind方法

与call方法写法相似,区别是前两种方法被调用后会立即执行函数,bind被函数或对象方法调用后不会立即让其执行,而是返回一个新函数,需要加()调用

  function fn(a, b) {
    console.log(this, a, b)
  }
  let obj = { name: '彭于晏', age: 18 }
  fn.bind(obj, "参数1", "参数2")();//因为调用bind后返回的是个函数,要想执行需要加()调用
  // 或后续调用
  let fun = fn.bind(obj, "参数1", "参数2");
  fun();

以上三种方法不修改指向则参数一填写null即可

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值