JS基础学习（六）事件和BOM

0x00

世界好大我好小

0x01 事件对象

0x011 监听鼠标移动坐标

事件对象：当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数

但是IE8不兼容，因为在IE8中事件对象是作为window对象的属性保存的

所以要进行判断：

或者可以这样判断

练习：使div能跟随鼠标移动

一定要开启box1的绝对定位

 

初步实现：

但是现在鼠标坐标总是相对于可见窗口，实际上整个网页比浏览器大

改成鼠标相对于当前页面的

但是这两个属性在IE8中不存在，所以如果要兼容IE8不能用pageX和pageY

添加一个滚动条偏移量来解决：

0x012 事件的冒泡

Bubble

冒泡只会往上传，不会往下传，在开发中冒泡大多是有用的

如果不希望发生事件冒泡，可以通过事件对象来取消冒泡

0x013 事件的委派

我们希望绑定一次事件，即可运用到多个元素身上

我们可以考虑到绑定到元素共同的祖先元素

这就叫事件的委派：将事件绑定给元素的共同祖先元素

这样后代元素上的事件触发时，会一直冒泡到祖先元素 

 

可以用event的target对象

再进行一个判断：

 0x014 事件的绑定

所以要绑定多个事件响应函数可以用addEventListener方法

先绑定的先执行，后绑定的后执行

这个方法在IE8及以下的浏览器不支持， 用另一个方法attachEvent

如果要兼容所有浏览器可以自己定义一个函数用来绑定响应函数

有哪个用哪个

完成bind函数

 注意是：在匿名函数里调用回调函数

0x015 事件的传播

这样写就会出现像冒泡的现象， 这个就是事件的传播

事件传播的三个阶段：

0x016 拖拽练习

先分析功能：

实现前两步

注意当鼠标松开时，一定要取消两个事件

 

解决鼠标锁定在左上角的问题：

 

ie8有一个方法叫setCapture()

0x017 滚轮事件

这里要注意火狐的兼容性

0x18 键盘事件

onkeydown onkeyup

通过keyCode来获取按键编码

通过它可以判断哪个按键被按下

 

使文本框中不能输入数字

return false：取消默认行为

 

用键盘控制div的移动

 

0x02 BOM

浏览器对象模型

BOM可以使我们通过JS来操作浏览器

在BOM中为我们提供了一组对象，来完成对浏览器的操作

 

0x021 Navigator

代表当前浏览器的信息，但是现在大部分都不适用

一般都用ua头（这个我熟

通过这个可以来识别浏览器

IE11无法被UA识别,笑拉了

 

如果通过UA不能判断，还可以通过浏览器中一些特有的对象来判断浏览器的信息

 

0x022 History

注意：用的时候是小写的

length属性：

back方法

forward方法

go()方法

可以用来跳转到指定页面

0x023 Location

可以进行跳转

location对象的属性：用来分隔url

location的几个方法：

assign

reload

如果在方法中传一个true，则会强制清空缓存刷新页面

replace

和assign不同的是，replace没有历史记录

 

0x024 window

定时调用

相当于放慢了速度的for循环

返回值会返回一个唯一的定时器标识

用另一个函数来关闭定时器

 0x03 类的操作

0x031 修改box的class属性

删除class

切换toggleClass

 

0x04 JSON(*)

js对象js自己认识，但是java不认识，其他语言都不认识，现在就需要把一个对象给它传递过去

0x041 将JSON转换为JS对象

0x042 将对象转JSON

0x043 eval函数

如果使用eval执行的字符串中含有{},它会将{}当成是代码块