Dom相关随记

事件流机制

捕获；
目标处理；
冒泡；
![

dom绑定事件方式

1. DOM0 – 标签中写 οnclick=“函数()”

• 但这种方法不好,有时间差,耦合性不好,适用于小项目或者自己去写个小dom，你要改就得记改标签又改js,耦合性高

2. DOM0 – Dom.onxxxxx = function () {}

• 解绑 Dom.onclick = null

• 再冒泡阶段触发,想要在捕获1阶段就触发的话所以就有了dom2

3. Dom2 – addEventListener

• 解绑 removeEventListener

document.body.addEventListener('click', function() {
  console.log('body')
}, true)
document.getElementById('box').addEventListener('click', function() {
  console.log('box')
}, true)

• 三个参数 （事件名称（String），要触发的事件处理函数(Function)，指定事件处理函数的时期或阶段(boolean)）。
• 第三个可选参数useCapture，其默认值如果为false，事件将在冒泡阶段中触发；默认值如果为true，则事件将在捕获阶段中触发。

取消默认行为

event.preventDefault()

阻止冒泡

e.stopPropagation()
// IE则是使用
e.cancelBubble = true

mouseover,mouseout/mouseenter,mouseleave

• 推荐使用mouseenter(鼠标进入)：比较干净，没有冒泡与捕获
  
  

1.原生获取元素

document,querySelect('.***')

2.获取定位元素left值

• 如果是在标签上

<div style="left: 10"></div>
获取用DOM.style.left

• 如果在样式里

<style>
.box {
    ...
    left: 10px;
}
<style>

Dom.offsetLeft

3.获取设置宽度

Dom.clientWidth // 获取的是内容宽度 + padding
Dom.offsetWidth // 获取的是内容宽度 + padding + border
Dom.style.width // 这个是行内元素获取
Dom.style.width = ** // 这个可以设置