JavaScript

事件概述

javascript是一门事件驱动型语言，通常服务于html页面中，对于html页面中的元素必然会存在一些动作，这些动作的触发，称之为事件驱动。

 

事件分类

浏览器窗体事件

鼠标事件

键盘事件

表单事件

事件流（事件冒泡和事件捕获）

事件流描述的是从页面中接受事件的顺序，但有意思的是，早期的微软（IE）和网景（Netscape）开发团队居然提出了两个截然相反的事件流概念，IE的事件流是事件冒泡流(event bubbling)，而Netscape的事件流是事件捕获流(event capturing)。

事件冒泡

事件冒泡会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止；事件冒泡是一个由内向外触发的过程，当通过元素的addEventListener方法绑定事件时，默认使用不给第三个参数(默认值为false)时，此时事件为冒泡机制。

事件捕获

事件捕获会从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止；事件捕获是一个由外向内的触发过程，当通过元素的addEventListener方法绑定事件时，如果将函数的第三个参数设置为true，则事件冒泡会转为事件捕获。

DOM对象

DOM（Document Object Model）,文档对象模型，将html网页中的所有的元素当做一个对象进行操作，可以通过document对象操作指定元素的属性以及行为（函数）；HTML中将整个网页文档当做一颗倒置的文档树来理解

DOM的作用:

1、可以通过DOM操作html页面中的元素

2、可以通过DOM操作html元素中的属性

3、可以通过DOM操作CSS样式

4、可以通过DOM操作表单元素

querySelectorAll与querySelector的区别:

querySelectorAll : 找出所有匹配的节点并返回数组.​ querySelector : 找到一个后就返回节点对象。

1、querySelector只返回匹配的第一个元素，如果没有匹配项，返回null。 2、querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。 3、返回的结果是静态的，之后对document结构的改变不会影响到之前取到的结果

找出body标签下的第一个divdocument.body.querySelectorAll("div")[0]

找出所有标签 document.querySelectorAll("*")

找出head下所有的标签 document.head.querySelectorAll("*")

找出所有class=box的标签 document.querySelectorAll(".box")

找出所有class=box的div标签 document.querySelectorAll("div.box")

找出所有id=lost的标签 document.querySelectorAll("#lost")

找出所有p标签并且id=lost的标签 document.querySelectorAll("p#lost")

找出所有name=qttc的标签 document.querySelectorAll("*[name=qttc]")

找出所有存在name属性的标签 document.querySelectorAll("*[name]")

找出所有class=hot并且存在name属性的p标签 document.querySelectorAll("p.hot[name]")document.querySelectorAll("pclass=hot")