JavaScript事件处理

JavaScript事件处理

通过js来修改元素的样式

操作内联样式

  • 语法：元素.style.样式名=样式值
  • 通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过js修改的样式会立刻生效
  • 但是如果在样式中写了**!important**，则此时样式会有最高的优先级
  • 通过style属性设置和读取的都是内联样式，无法读取样式表里的样式

获取元素的当前显示的样式

  • 语法：元素.currentStyle.样式名
  • 它可以用来读取元素当前显示的样式
  • currentStyle只有IE支持，其他浏览器都不支持

在其他浏览器中可以使用

  • getComputedStyle()这个方法来获取元素当前的样式
  • 这个方法是window的方法，可以直接使用
  • 需要两个参数
    • 第一个：要获取样式的元素
    • 第二个：传递一个伪元素，可以传null
  • 该方法返回一个对象，对象中封装了当前元素对应的样式
  • 该方法不支持IE8及以下版本

其他样式相关的属性

clientWidth和clientHeight

  • 可以获取元素的可见宽度和可见高度
  • 这些属性都是不带px的，返回的都是一个数字，可以直接进行计算
  • 会获取元素宽度和高度，包括内容区和内边距
  • 这些属性都是只读的，不能修改

offseWidth和offseHeight

  • 获取元素的整个宽度和高度，包括内容区、内边距和边框

offseParent

  • 可以用来获取当前元素的定位父元素
  • 会获取到当前元素最近的开启了定位的祖先元素
  • 如果所有祖先元素都没有开启定位，则返回body

offseLeft

  • 当前元素相对于其定位元素的水平偏移量

offsetTop

  • 当前元素相对于其定位元素的垂直偏移量

scrollWidth和scrollHeight

  • 可以获取元素整个滚动区域的宽度和高度

scrollLeft

  • 可以获取水平滚动条滚动的距离

scrollTop

  • 可以获取垂直滚动条滚动的距离

当满足scrollHeight - scrollTop == clientHeight，说明垂直滚动条到底了。水平滚动条同理

onscroll

  • 该事件会在滚动条滚动时触发

事件

事件对象

  • 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
    • 在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标，键盘那个按键被按下等等
  • 在IE8中，响应函数被触发时，浏览器不会传递事件对象
  • 在IE8及以下版本中，是将事件对象作为window对象的属性保存的 window.event.clientX

属性

  • clientX可以获取鼠标指针的水平坐标（可见窗口）
  • clientY可以获取鼠标指针的垂直坐标（可见窗口）
  • pageX可以获取鼠标相对于当前页面的水平坐标
  • pageY可以获取鼠标相对于当前页面的垂直坐标
  • IE8中不支持pageX和pageY

事件冒泡（Bubble）

  • 所谓的冒泡指的是事件的向上传导，当后代元素上的事件被触发时，其祖先的相同事件也会被触发
  • 在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象来取消冒泡event.cancelBubble=true

事件的委派

  • 指将事件统一绑定给元素的共同祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件
  • 事件委派是利用了冒泡，通过委派可以减少时间绑定的次数，提高程序的性能

target

  • event中的target表示的触发事件的对象

addEventListener()

  • 通过这个方法也可以为元素绑定响应函数
  • 参数：
    • 事件的字符串，不用on
    • 回调函数，不用加()
    • 是否在捕获阶段触发事件，需要一个布尔值，一般传false
  • 这个方法不支持IE8及以下版本浏览器

IE8中可以使用attachEvent()

  • 参数
    • 事件的字符串，要加on
    • 回调函数
  • 这个方法也可以为一个事件绑定多个处理函数，不同的是它是后绑定先执行，执行顺序是倒序

addEventListener()中的this是绑定事件对象

addachEvent()中的this是window

函数名.call(obj)可以修改this的指向

事件的传播

  • W3C将事件分成了三个阶段：
    • 捕获阶段：
      • 在捕获阶段时从最外层祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
    • 目标阶段：
      • 事件捕获到目标元素，捕获结束开始在目标元素上触发事件
    • 冒泡阶段：
      • 事件从目标元素向祖先元素传递，依次触发祖先元素上的事件
  • 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true
  • IE8及以下版本浏览器没有捕获阶段

滚轮事件

onmousewheel

  • 鼠标滚轮滚动的事件，会在滚轮滚动时触发

event.wheelDelta 可以获取鼠标滚轮滚动的方向

  • 向上滚120 向下滚-120
  • 这个值只看正负，不看大小
  • 火狐中不支持，在火狐中用event.detail来获取滚动的方向
  • 向上滚-3 向下滚3

使用addEventListener()方法绑定响应函数，取消默认行为时不能用return false，需要使用event.preventDefault()来取消默认行为

  • IE8不支持event.preventDefault()方法

键盘事件

onkeydown

  • 按键被按下
  • 对于onkeydown来说，如果一直按着某个按键不松手，则事件会一直触发
  • 当onkeydown连续触发时，第一次和第二次之间会间隔时间稍微长一点，其他的会非常快，这种设计是为了防止误操作

onkeyup

  • 按键被松开

键盘事件一般会绑定给一些可以获取焦点的对象或者是document

可以通过keyCode来获取按键的编码

  • 可以通过它判断哪个按键被按下
  • 数字的keyCode是48 ~ 57

BOM

  • 浏览器对象模型
  • BOM可以使我们通过JS来操作浏览器
  • 在BOM中提供了一组对象，用来完成对浏览器的操作

BOM对象

  • Window

    • 代表的是整个浏览器的窗口，同时window也是网页中的全局变量
    • 一般使用userAgent来判断浏览器的信息
      • userAgent是一个字符串，包含有用来描述浏览器信息的内容
      • 不同的浏览器会有不同的userAgent

  • Navigator

    • 代表的当前浏览器的信息，通过该对象可以识别不同的浏览器

    • var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -1;
//判断是否Opera浏览器
if (isOpera) {
    alert("Opera");
};
//判断是否Firefox浏览器
if (userAgent.indexOf("Firefox") > -1) {
    alert("FF");
} 
//判断是否Chrome浏览器
if (userAgent.indexOf("Chrome") > -1){
    alert("Chrome");
}
//判断是否Safari浏览器
if (userAgent.indexOf("Safari") > -1) {
    alert("Safari");
}
//判断是否IE浏览器
if (!!window.ActiveXObject || "ActiveXObject" in window) {
    alert("IE");
};

  • Location

    • 代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面

  • History

    • 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录
    • 由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页
    • 而且只能在当次访问时有效

  • Screen

    • 代表用户的屏幕信息，通过该对象可以获取用户的显示器的相关信息

这些BOM对象在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用

定时器

setInterval()

  • 定时调用
  • 可以将一个函数每隔一段时间执行一次
  • 参数：
    • 回调函数
    • 每次调用间隔的时间（毫秒）
  • 返回值：
    • 返回一个Number类型的数据
    • 这个数字用来作为定时器的唯一标识

clearInterval()

  • 可以用来关闭定时器
  • 方法中需要一个定时器的标识作为参数，可以将对应标识的定时器关闭

延时调用

  • 延时调用一个函数不马上执行，而是隔一段时间以后再执行，而且只会执行一次

setTimeout()

  • 延时调用和定时调用的区别，定时调用会执行多次而延时调用只会执行一次

clearTimeout()

  • 关闭延时调用

类的操作

  • 通过style属性修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面，这样的执行性能是比较差的，而且这种形式也不太方便
  • 我们可以通过修改元素的class属性来间接修改样式，这样一来，就可以修改一次，即可同时修改多个样式，浏览器只需要渲染一次，性能比较好

JSON

  • JSON是一种特殊的字符串，可以被任意语言所识别
  • 并且可以转换为任意语言的对象，JSON在开发中主要用来数据的交互
  • JavaScript Object Notation JS对象表示法
  • JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号，其他的和JS语法一致

JSON分类

  • 对象{ }
  • 数组[ ]

JSON中允许的值

  • 字符串
  • 数值
  • 布尔值
  • null
  • 对象
  • 数组

将JSON字符串转换为JS中的对象

  • 在JS中，提供了一个工具类JSON
  • 这个对象可以将一个JSON转换为JS对象，也可以将一个JS对象转换为JSON

JSON.parse()

  • 可以将JSON字符串转换为js对象
  • 需要一个JSON字符串作为参数，会将该JSON字符串转换为JS对象并返回

JSON.stringify()

  • 可以将一个JS对象转换为JSON字符串
  • 需要一个js对象作为参数，会返回一个JSON字符串

JSON在IE7及以下版本浏览器中不支持

eval()

  • 这个函数可以用来执行一段字符串形式的JS代码，并将执行结果返回
  • 如果使用eval()执行的字符串中含有{}，他会将{}当成是代码块
  • 如果不希望当成代码块解析，则需要在字符串前后各加一个()
  • eval() 这个函数的功能很强大，可以直接执行一个字符串中的js代码，但是在开发中尽量不要使用，首先它的执行性能比较差，然后他还有安全隐患