事件
js组成:ECMA语法,规定了js的基本规则,类似于使用var定义变量,使用for来规定循环。
BOM:浏览器对象模型,就是使用我们的js来操作浏览器
DOM:文档对象模型,文档:我们的html标签在被浏览器渲染时会生成一颗标签树,我们把这棵树称为文档树或文档,每一个标签在js当中都可以抽象为一个对象。则DOM可以理解为,html标签在js当中的对象映射,则我们可以在dom中操作html元素
把浏览器当作最顶层的容器,抽象为文字可以理解为
window>>document>>html>>head/body>>其他元素
这个层级关系就可以理解为文档树了
则会出现以下概念
1》凡是出现在html中的标签被浏览器解析的时候都会被挂载岛dom树上
2》dom树上的每个标签都是一个独立的对象,既然是对象就会有属性和方法。我们在标签上注册一个事件,当事件满足条件被触发之后就会执行方法
3》事件的概念就是:让html在某些特定条件下执行了一段js脚本,某些特定的条件就是如单击,双击,鼠标经过等,这些条件以属性的形式呈现在html代码中,而触发执行的js脚本则通常为方法
这里我们需要了解三种,分别为最原始的html混合事件写法,dom0级写法、dom2级写法
1.最原始的写法:和html混合在一起写,缺点是代码高冗余,且无法添加多个事件处理函数如上文对事件的举例则为典型的html事件处理程序写法
2.dom0级:将html代码和js代码分离,且支持匿名函数,可以看到完美的改进了1的冗余缺憾,所有的事件相关操作都在js中完成
3.dom2级:ie使用attachEventListener其他非ie使用addEventListener,可以支持绑定多个事件,瞧吧,又一个缺憾被完美解决了,而且dom2级还可以自定义事件流,好,到这里大家留个心,这是第二部分我们要介绍的重点。牢记这个名词于心哦
4.dom3级
事件流
事件流官网定义:描述的是从页面中接收事件的顺序,那~~~是谁从页面接收事件的顺序呢?接收的顺序有啥子呢?接收的范围呢?
接收顺序(事件流方式),需要我们了解:
- 事件捕获:什么叫捕获,其实不用扯那么多一句话从最不具体的到最具体的
- 事件冒泡:什么叫冒泡,正好和上面相反,从最具体的到最不具体的
- 为什么会有两种事件流方式呢?历史原因,ie提出的是事件冒泡,而w3c提出的是事件捕获。
- 现代浏览器高级了,那。。。。。嗯,我知道你要问啥,你一定要问浏览器内部是如何解析这两种事件流的,它的执行顺序:事件捕获-》目标阶段-》事件冒泡,一句话就是先捕获后冒泡
window-》dowument-》html-》head/body-》div或其他元素
注意昂,现在的浏览器都是从window开始滴,不管冒泡还是捕获其的传递范围一定是父子关系,也就是外层到内层,或者从内层到外层。假设我们给div添加一个事件方法,如果是事件捕获的话是从window开始,因为他是最不具体的元素,如果是冒泡的话则是从div开始,所以这里的具体不具体是相对于添加事件的元素而言的,说到这里,大家一定要晓得,我们要使用事件流通常要配合dom2级事件去写,要是读到这里你还不了解这个,那宝宝就让你气死鸟~哦,还要知道的一点我们现开发中多使用的事件流通常是冒泡,嗯这点随了ie了,但是要注意现在的主流浏览器默认就是冒泡,但通常我们在使用addEventListener这个方法的时候他的第三个参数还是会显示的指定为false,即为不捕获**。
捕获和冒泡的方式决定着浏览器何时去处理这个事件,如果我把事件声明在冒泡阶段处理,那么在捕获阶段即使捕获到了这个事件,事件也是不会被执行滴
<div id="one">
<div id="two">
<div id="three"></div>
</div>
</div>
one.addEventListener('click',function(e){
console.log('one');
},false);
two.addEventListener('click',function(e){
console.log('two');
},false);
three.addEventListener('click',function(e){
console.log('three');
},true);
使用的是dom2级中的非ie方法,从代码中可以看到one和two为冒泡,three为捕获
当我们点击最里面的div的时候,打印数序应该为three->two->one
最后还是冒泡的执行顺序