2021-01-09

call与applay

改变this指向并指向该函数

dom.call(this,arguments.......)

dom.applay(this,[ arguments..... ])

他们的区别就是第二个参数存储的形参的形式不同 

applay是数组存放形参，call是从第二个参数依次为形参

js原生事件流

捕获：点击精确元素从该元素的最外层一层层到最精确的元素

冒泡：点击元素从该精确元素一层层执行向外层绑定的事件的元素

如果处于最精确的元素不区分捕获与冒泡 执行顺序 按绑定顺序执行

DOM0级绑定 

dom.onclick = fn（）{}

DOM二级绑定：

高级：dom.addEventListe(type,fn,bool) 第三个参数代表捕获与冒泡 ，默认false代表冒泡 （this指向触发事件的该元素）

ie：dom.attachEvent(type,fn)  没有bool值 也就是没有捕获（this指向window 非常神奇！！！！）

执行顺序（默认冒泡）：

DOM0级与高级浏览器绑定的DOM二级的话 按绑定事件的顺序依次执行

DOM0级与IE浏览器绑定的DOM二级的话 先执行DOM0级事件再 逆序 执行绑定的二级事件

执行顺序（冒泡捕获）：

先捕获后冒泡 ：

比如：三个元素box - box2 - box3 依次嵌套 box最大盒子。依次为他们绑定事件 并且先绑定冒泡事件再绑定捕获事件 并且在每个事件函数中console输出

当我们点击box3时 在浏览器输出得结果应该为 box捕获 → box2捕获 → box3冒泡 → box3捕获 → box2冒泡 → box冒泡

事件的属性与对象（e）:

每一个事件浏览器都会默认生成一个event对象

高级浏览器阻止冒泡: e.stoppropagetion()

IE浏览器不支持e对象 但是再 window.event.cancelBubble = true

兼容浏览器：let a = e || window.event    之所以这里用a 因为let是不可以重复定义哦!

阻止默认事件（DOM二级事件）：

高级浏览器: e.proventDefault()               IE浏览器：window.event.returnValue = false (也可以使用兼容的方法)

DOM0级阻止默认事件：return false  哈哈哈哈

浏览器事件的e对象：

e.clientX   e.cilentY  视口

e.offsetX e.offsetY 元素的位置  子元素会受到影响

e.pageX e.pageY 页面的位置

e.screenX  e.screenY 屏幕的位置