Javascript复习(四)

鼠标滚轮事件

事件名称： onmousewheel
兼容性： 火狐不支持onmousewheel 支持DOMMouseScroll事件
该事件触发条件： 当鼠标滚轮滚动的时候触发。
绑定方式:

// 给document绑定鼠标滚轮事件
document.onmousewheel = function() {
  console.log("滚动滚轮了");
}

在chrome中滚动：

在IE中滚动滚轮：

在火狐中滚动滚轮 没有反应
原因是因为火狐不支持 mousewheel事件
支持方式：

document.addEventListener(“DOMMouseScroll”, function() {})

事件对象

在鼠标的点击事件中， 我们关心的是鼠标的位置
在鼠标滚轮事件中，我们关心的是滚轮的方向
在chrom向下滚动：

在chrome中向上滚动：

在IE中向下滚动：

在IE中向上滚动：

总结：
在非火狐中（IE、chrome）指示鼠标滚轮方向的属性是： e.wheelDelta
向下滚动： 是-120的倍数
向上滚动： 是120的倍数
在火狐中向下滚动：

在火狐中向上滚动：

总结：
在火狐中指示鼠标滚轮方向的属性是： e.detail
向下滚动： 是3的倍数
向上滚动： 是-3的倍数

键盘事件

当键盘按下的时候触发
绑定方式：

document.onkeydown = function(e) {
      console.log("键盘按下了")
}

输出结果：

当键盘抬起的时候触发
绑定方式：

// 键盘抬起
document.onkeyup = function() {
  console.log("键盘被抬起了");
}

结果：

当有字符输入的时候触发
绑定方式：

// 有字符输入
document.onkeypress = function() {
  console.log("有字符输入了");
}

结果：

tabIndex

该属性的是html的标准属性
页面中的元素有很多， 当用户失去鼠标的时候，可以通过键盘上的tab键来选择元素
按下tab键是按照顺序来获取元素焦点
按下shift + tab键 是逆序来获取元素的焦点
tabIndex的属性值决定了按下tab键的获取顺序
举例：

<ul>
  <li tabIndex="10">1</li>
  <li tabIndex="9">2</li>
  <li tabIndex="8">3</li>
  <li tabIndex="7">4</li>
  <li tabIndex="6">5</li>
  <li tabIndex="5">6</li>
  <li tabIndex="4">7</li>
  <li tabIndex="3">8</li>
  <li tabIndex="2">9</li>
  <li tabIndex="1">10</li>
</ul>

显示结果:

面向对象

之前我们所写的代码都是面向过程的书写方式：
举例：

var name1 = "老王";
var length = 180;
var age = 30;
var sex = "男";

面向过程：

var person = {
  name1: "老王",
  length: 180,
  age: 30,
  sex: "男"
}

也就是说，面向对象是面向过程的另一种书写代码的方式。

构造函数

定义构造函数与定义普通函数没有任何区别
定义构造函数首字母要大写，非语法要求
举例：

// 定义普通函数
function sum() {

}


// 定义构造函数
function Dog() {

}

通过构造函数实例化对象：

var people = new People();

构造函数四步

构造函数在被new执行的时候，会有四步：

1  隐秘的开辟一个新的内存地址
2  与this绑定
3  执行函数内的语句
4  返回this

所以， 在构造函数内定义函数体的时候要使用​​this.xx = xx ​​赋值属性。