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>
网友评论