标签：浏览器 DOM 对象 18 js window 事件 document 监听
一、BOM
1.1概念
https://developer.mozilla.org/zh-CN/docs/Web/API/Window
BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。
BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象（location、history、document）都是该对象的子对象。
1.2window对象之全局对象和浏览器窗口对象
window既要做v8引擎运行js时的全局对象，又要做浏览器窗口对象；
（1）全局对象
（2）浏览器窗口对象
（3）window继承eventlistener类
派发事件，派发任何事件，然后用addEventListener监听，间听到了就执行回调函数；
1.3location对象
1.4history对象
history.pushState（）是vue-router前端路由的实现基础，url虽然改变，但是并没有向后端请求资源，而是监听url的改变然后变了一个组件而已；
二、DOM
1.1概念
html一旦被浏览器解析，浏览器就会自动帮助我们创建document对象；（就像会帮助我们一打开浏览器窗口就创建window对象一样，注意document对象是window对象的子对象）
dom是沟通js和html标签的桥梁，我们通过js和dom的api，就可以操作dom；
整个html是一个document
element指的指html标签
characterdata指的是标签里的文本等数据，还有指得是注释；
attr指的是标签里的属性
1.2eventTargnt
所有的文档节点、元素节点、字符数据节点等都继承了eventTartgent接口，所以都用addEventListener、removeEventListener、dispatchEventListener这三个方法；
1.3node节点
1.4document
- document的location指向了window的location；
- querySelector方法表示使用css选择器选择元素；
1.5element
三、 事件监听
我们的节点继承了eventTatget，可以使用addEventListener（）方法，但是第一个参数需要一个事件监听对象，就是我们这里要讲的，比如click、mousedown、mouseup等；
3.1概念
事件监听方式一：
事件监听方式二：注意这种方式如果重复写了很多个，那么只能最后一个生效，因为最后一个会覆盖前面的；
事件监听方式三：这种方式可以重复多次的，每一个都会被调用不会被覆盖；
3.2事件流
3.3事件冒泡和事件捕获
有了时间流，就会出现事件冒泡和事件捕获
默认采用时间冒泡的顺序，如果想开启事件捕获，多加一个参数即可；即addEventListener('click',()=>{},true);
3.4事件对象event
当我们出发一个回调函数时，默认传递一个event对象；
标签：浏览器,DOM,对象,18,js,window,事件,document,监听 来源： https://www.cnblogs.com/EricShen/p/16222820.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。