BOM

BOM（Browser Object Model）即浏览器对象模型。
BOM提供了独立于内容而与浏览器窗口进行交互的对象；
由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；
浏览器的内核

IE: trident内核 (IE浏览器)

Firefox：gecko内核 (火狐浏览器)

Safari:webkit内核 (苹果浏览器)

Opera:Blink内核（欧朋浏览器）

Chrome:webkit （谷歌浏览器）

DOM

image

DOM1也是存在，只是没有涉及到事件，DOM3比DOM2多了键盘和鼠标一些事件

DOM的事件模型：捕获----> 冒泡
DOM的事件流（三个阶段）：捕获阶段---->目标阶段 -----> 冒泡阶段
DOM事件捕获的具体流程：

window---document---html---body---.... ---目标元素

DOM事件的Event对象的常见应用：

event.preventDefault() : 阻止默认事件
event.stopPropagation(): 阻止冒泡
event.stopImmediatePropagation(): 除了该事件的冒泡行为被阻止之外(event.stopPropagation方法的作用),该元素绑定的后序相同类型事件的监听函数的执行也将被阻止.
event.target: 返回触发事件的元素
event.currentTarget: 返回绑定事件的元素

DOM的自定义事件：

var  eve = new Event('eventName')
dom.addEventListener('eventName',function(){
})  //注册事件
dom.dispatchEvent(eve);   // 触发事件，
---------------------------------------------------------
这个事件不能添加参数，想要添加参数，得自定义 CustomEvent事件
// 添加一个适当的事件监听器
obj.addEventListener("cat", function(e) { process(e.detail) })
// 创建并分发事件
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}})
obj.dispatchEvent(event)

--

<body>
    <button>派发事件</button>
    <input type="text">
    <script>
          // 事件对象
            var  eve = new Event('gc')
            // 注册事件
            document.querySelector("button").addEventListener('click',function(){
                // this.dispatchEvent(eve)
                document.querySelector("input").dispatchEvent(eve)
                
            })  
            document.querySelector('input').addEventListener('gc',()=>{
                console.log('xxxxxxxxx')
                document.querySelector('input').value = "xxxxx"
            })
           // 触发事件
    </script>
</body>