1. First of all we need to know BOM is doing?
BOM and DOM, ES is an important part three of JavaScript;
Bom's core operations are window; it simply is used to operate the browser, he is js access the browser interface, which encapsulates all of the methods and dom bom of.
Why does this package dom way it may be a bit of doubt
We can come to understand that we use to explain the scope, global scope if we are, we can understand that at the Window, in front of our core operating bom know that window, so that a lot of our operations are in operation inside BOm of
2. Next, we look at which of the children BOM below (list I have here is that we more commonly used)
(1) .doncument: This is our dom, the main thing is the operation of the HTML API
(2) .event: state element event object, the event occurred, the state of the keyboard, the mouse position of the mouse button
When will generate Event objects?
When the user clicks an element, we give this element registers an event is triggered, the nature of the event is a function of the shape and function of receiving a reference event object.
Event is usually used in conjunction with the function, the function will not be executed before the event occurs!
Flow of events:
When we see a bubbling event will think of events
What is a bubble: If the user clicks on an element that has a click event, then the same event will also be triggered its ancestor, this event from the beginning of the element has been bubbling to the top of the DOM tree, which a process known as event bubbling
Here I found a few pictures to help us understand what
Bubbling event there is a bottom-up (remember here is that this follows the movement of the parent element)
There are even bubbling behavior, it certainly has to stop bubbling behavior
Offers two here:
event.stopPropagation()；
event.CanlelBubble = ture; // unique to older versions of IE
Capture: from top to bottom, recording the same event binding on each parent element
Target Departure: triggering event handler on the target element
(3) history: the browser history
Properties: length Returns the number of browser the URL in the history list
Encapsulation When the window opens, you have accessed the URL history stack
Methods: back () a URL
forWord () before a URL
go（）；某一个具体页面的数值，0为刷新
（4）location：窗口的URL地址栏信息
属性：.href:保存完整的URL地址
.protocol http https
.host 端口号 hostname 主机名 port 端口号
.path 相对路径
.hash 锚点 哈希
. search 查询字符串
方法：assign（“URL”）；在当前窗口打开新的URL地址
replace（“URL”）；在当前窗口打开新的URL地址，禁止后退，因为使用新的URL替换旧的URL
reload（false/true）；重新加载当前页面
（5）screen显示设备的信息
（6）浏览器的配置信息
接下来是几个坐标事件
e.screenX e.screenY 相当于屏幕的
e.clientX e.clientY相当于文本显示区
e.offsetX e.offsetY 相对于当前元素的
这几个不要记混了
ele.offsetHeight//元素在网页的实际高度
ele.offsetWidth/元素在网页的实际宽度
我们还要注意
我们在js当中添加的样式是行内样式，当我们拿外部样式是拿不到的；我们在js里面想拿外部样式可以通过
getcomputedStyle(ele).width 他是不可改的