目录
六、 事件（onload事件、onresize事件、onscroll滚动条事件、键盘事件）
一、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在函数执行的确定的
- 构造函数 new 函数名() this指向 new出来对象的实例
- 箭头函数的this取决于上一层作用域的this
- 对象中的this指向对象
- 事件响应函数的this指向 事件调用者
- setTimout setInterval 里面this指向window
- 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>
事件对象本身的获取存在兼容问题：
- 标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到。
- 在 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即可
扫一扫
473
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
