DOM&事件委托

not finished

事件

事件流：从页面中接受事件的顺序。 事件机制：捕获阶段、目标元素阶段、冒泡阶段
事件委托：利用事件冒泡原理,对子元素的事件绑定可以委托上级元素 e.target||e.srcElement 例如，click事件会一直冒泡到document，即给整个页面指定onclick事件处理程序，而不必给每个可点击的元素分别添加事件处理程序。

var list = document.getElementById('myLinks');
EventUtil.addHandler(list, 'click', function(event){
  event = EventUtil.getEvent(event);
  var target - EventUtil.getTarget(event);
  switch(target.id) {
    case “doSomething”:
    document.tiele = “I changed the document’s titile”;
    break;
    case “goSomething”:
    location.href = “http://www.wrox.com”;
    break;
    case “sayHi”:
    alert(“hi”);
    break;
  }
});

页面卸载之前，要通过onunload事件处理程序移除所有事件处理程序。事件委托就体现了它的好处，容易定位，移除很容易。

鼠标相关——event对象

• 兼容写法:var e = window.event||e;
  window.event不兼容火狐
• 鼠标位置的属性
  • 鼠标距离屏幕的距离：e.screenX
  • 鼠标距离浏览器可视区域的距离：e.clientX
  • 数据距离页面的距离：e.pageX(有兼容问题)
    兼容写法：e.clientX+scroll().left=看的见的+看不见的
  • 数据距离所在元素的距离：e.offsetX/e.layerX
• 鼠标按键相关 e.button
  • 0 左键 1 中间键 2 右键
  • 有兼容问题,主要是ie678
• 键盘相关属性
  • event.keyCode/which
    按键编码
    通过 String.fromCharCode()转字符串
  • event.ctrlKey/shiftKey/altKey 组合按键
• 阻止冒泡
  • e.stopPropagation()
  • e.cancleBubble=true IE678
• 阻止浏览器默认行为
  • e.parventDefault()
  • return false;

---

• e.clientX
  鼠标距离页面可视区域的宽高
• e.pageX
  鼠标距离文档的距离
• e.offsetX/e.layerX
  鼠标距离最近的元素的距离
• e.screenX
  鼠标距离页面可视区域的距离

拖拽

onmousedown+onmousemove+onmouseup+边界检测

事件类型

• onclick 单击事件
• onload 页面加载完成
• onmouseover 鼠标悬停
• onmouseout 鼠标移出
• onmouseenter
• onmouseleave
• onchange 表单元素内容改变
• onfocus 失去焦点
• onblur 获取焦点
• onkeydown
• onkeypress
• onkeyup

事件绑定方法

• <p onclick="alert(1)">
• dom.onclick = function(){}
• dom.addEventListenr('click',function(){},false)
  IE9
• dom.attachEvent('onclick',function(){})
  IE9以下

BOM

浏览器对象模型
常用的方法和对象

• alert()
• console.dir() 控制台输出
• confirm()
• window.close()
• window.open()
• history.back() 回退
• history.forward() 前进
• history.href() 地址信息
• location.reload() 重新加载
• var timer = setTimeout(function(){},1000)
  clearTimeout(timer)
• var timer = setInterval(function(){},1000) clearInterval(timer)
• 浏览器可视区域的宽高getClient
  • window.innerWidth/innerHeight IE9+
  • 标准模式:document.documentElement.clientWidth
  • 怪异模式:document.body.clientWidth
  • 模式判定:document.compatMode
• 页面被卷去的距离
  • window.pageYOffset IE9+
  • 兼容写法：
    document.documentElement.scrollTop||document.body.scrollTop
    document.documentElement.scrollLeft||document.body.scrollLeft

DOM

文本对象模型

DOM节点选择

• document.getElementById(id)
• document.getElementByClassName(className)
• document.getElementsByTagName(tagName)
• document.getElementsByName(name)
• document.querySelector()
• document.querySelectorAll()

DOM元素的内容获取和设置

• innerHTML 认识HTML标签
• innerText 不认识HTML标签
• value 针对表单元素
• DOM标签名
  tagName 都是大写
• DOM属性值的获取和设置
  • dom.getAttribute(属性名)
  • dom.setAttribute(属性名，属性值)
  • dom.removeAttribute(属性名)

DOM节点类型

• 元素节点
  • nodeType=1
  • nodeValue 类似inneText
  • nodeNAme 类似tagName，都是大写
• 属性节点 nodeType=2
• 文本节点 nodeType=3
• 注释节点 nodeType=8
• 文档节点 nodeType=9
• 文档类型节点 nodeType=10
• 文档碎片节点 nodeType=11
  document.createDocumentFragment()

节点选择

父

• dom.parentNode

子

• dom.children 元素子节点
• dom.childNode 所有子节点
• dom.firstElementNode 第一个子元素节点
• dom.lastElementNode 最后一个子元素节点

兄弟

• dom.previousElementSibling 前一个兄弟元素节点
• dom.nextElementSibling 后一个兄弟元素节点

节点操作

• 创建节点

  • 创建注释节点

  var commentNode = document.createComment('注释的内容')
  <!--注释的内容-->
  

  • 创建新的空白文档片段

  let fragment = document.createDocumentFragment();
  

  因为文档片段存在于内存中，并不在DOM树中，因此将子元素插入到fragment中时不会引起页面回流。

  • 创建标签名指定的HTML元素

  var element = document.createElement("tagName")
  

• 插入节点：
  在父元素的最后插入一个子节点 father.appendChild(son)
  在父元素的某个节点之前插入一个子节点 father.insertBefore(son,参照物)

• 删除节点
  自杀：son.remove()
  父杀子:son.parentNode. (son)

• 获取元素的样式
  window.getComputedStyle(要获取样式的元素节点,null)[要获取的样式名] div.currentStyle[要获取的样式名]

• 自定义属性

p.dataset[xxYy]=45

元素距离和位置相关

• 浏览器可视区域的宽高
  window.innerWidth/innerHeight
• 页面被卷去的距离
  window.pageXOffset
• 元素的宽高
  dom.offsetWidth/offsetHeight
• 元素距离最近的有定位的父元素的距离
  dom.offsetLeft

Element元素

方法

• Element.after() 在Element节点之后插入节点
• Element.append() 在element中最后一个子节点插入
• Element.before() 在Element节点之前插入节点
• Element.closest() ：匹配特定选择器且离当前元素最近的祖先元素（也可以是当前元素本身）。如果匹配不到，则返回 null。包含子元素
• Element.getAttribute(attributeName) 返回单个属性值
• Element.getAttributeNames() 返回Element属性的集合数组

DOM元素

offset家族

• offsetLeft/offsetTop 元素距离最近的有定位的父元素的距离
  没有单位，取整会四舍五入。若要赋值用left/top
• offsetWidth/offsetHeight
  获取元素的宽高=width+padding+border
• offsetParent
  距离元素最近的有定位的父元素

scroll家族

• scrollTop/scrollLeft 被卷曲的部分

  • 元素被卷曲的部分
    dom.scrollLeft
  • 页面被卷曲的部分

      window.pageXOffset == window.scrollX;
      //都不支持IE9 
      //兼容写法
      
      var x = (window.pageXOffset !== undefined) ? window.pageXOffset 
      : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
      var y = (window.pageYOffset !== undefined) ? window.pageYOffset 
      : (document.documentElement || document.body.parentNode || document.body).scrollTop;
    
    

• scrollWidth/scrollHeight
  元素内容的宽高，不能小于盒子的宽高，IE67除外

cliet家族

• clientWidth/clientHeight
  元素的宽高=width+padding
• 页面可视区域的宽高
  • window.innerWidth IE9+
  • document.documentElement.clientWidth 标准模式
  • document.body.clientWidth 怪异模式

DOM事件处理函数

• addEventListener, removeEventListener()
  参数：要处理的事件名字、事件处理函数、布尔值
  布尔值若在true标准在捕获阶段处理程序，若是false在冒泡阶段处理程序（默认）
• addtachEvent(), detachEvent()——IE
  参数：事件处理程序名称，事件处理函数
  由于IE8及更早版本只支持事件冒泡，所以通过addEvent()添加的事件处理程序度会添加到冒泡阶段
• onclick和addtachEvent只能得到冒泡阶段
• event.currentTarget,event.target
  前者是绑定事件的元素，后者是当前触发事件的元素
  li的事件事件委托到ul上，ul是event.currentTarget,li是event.target

阻止冒泡

function Bubble(e){
    var e = e||window.event;
    if(e&&e.stopPropagation){
        e.stopPropagation();
    } else {
        //IE9+
        e.cancleBubble=true;
    }
}

阻止默认事件

function cancleDefault(e){
    var e = e||window.event;
    if(e&&e.preventDefault){
        e.preventDefault();//IE9+
    } else {
        return false;
        //但这个不能直接用于onClick
    }
}