JS 绑定及解绑事件
.addEventListener(‘ 事件类型 ’，命名函数，布尔值) //IE8 不支持 (this 代表的是当前绑定事件的对象)
.removeEventListener(‘ 事件类型 ’，函数名字，false) // 移除事件 (注意：addEventListener 中的第三个参数设置为 true 就在捕获过程中执行，反之就在冒泡过程中执行处理函数。)
事件冒泡：多个元素嵌套, 有层次关系, 这些元素都注册了相同的事件, 如果里面的元素的事件触发了, 外面的元素的该事件自动的触发了.
如何阻止事件冒泡:
window.event.cancelBubble=true; IE 特有的, 谷歌支持, 火狐不支持。event.stopPropagation(); 阻止事件冒泡 —-> 谷歌和火狐支持
event 对象的常用属性：
var e = event || window.event // window.event 和 e 都是事件参数对象, 一个是 IE 的标准, 一个是火狐的标准 event.type // 事件类型 event.target // 事件触发的元素
.attachEvent(‘on 事件类型 ’，命名函数) // 谷歌，火狐不支持 this 代表的是 window
.detachEvent(‘on 事件类型 ’，函数名字) // 解绑事件 - 对象.on 事件名字 = 事件处理函数 —> 绑定事件 对象.on 事件名字 = null
JS 事件类型
在元素的事件处理器中：this 指代的就是元素本身
.onclick // 点击事件
.onmouseover (鼠标移入事件) / .onmouseout(鼠标移出事件)
.onfocus (输入框获取焦点) / .onblur(输入框失去焦点)
.onkeydown (按下键盘某个键) / .onkeyup (按下某个键弹起)
JS element 元素属性
.innerText (谷歌，火狐，IE8 都支持) / .textContent(不支持 IE8)
.innerHTML(标签内容可以被识别）
.setAttribute(“ 属性的名字 ”,” 属性的值 ”) // 设置自定义属性
.getAttribute(“ 属性的名字 ”) // 获取自定义属性的值
.removeAttribute(“ 属性的名字 ”) // 移除自定义属性
.style.backgroundColor //style 属性还有很多其他属性
.getAttributeNode(‘id’) // 获取的是元素的键名为‘id’的属性节点
.parentElement // 父级元素
.childNodes // 子节点
.children // 获取子元素
.nodeType // 节点类型 1—- 标签，2— 属性，3— 文本
.nodeName // 节点名字 标签节点 — 大写的标签名字，属性节点 — 小写的属性名字，文本节点 —-#text
.nodeValue // 节点的值 标签节点 —null，属性节点 — 属性值，文本节点 — 文本内容
.parentNode // 父级节点
.firstChild // 第一个子节点
.firstElementChild // 第一个子元素
.lastChild // 最后一个子节点
.lastElementChild // 最后一个子元素
.previousSibling // 前一个兄弟节点
.previousElementSibling // 前一个兄弟元素
.nextSibling // 后一个兄弟节点
.nextElementSibling // 后一个兄弟元素
JS element 元素方法
.appendChild(obj1) // 追加元素
.insertBefore(obj1,obj2) // 将 obj1 插入到第二个参数元素 obj2 之前
.replaceChild(obj1,obj2) // 替换其中某个元素
.removeChild(obj1) // 删除其中某个元素
JS 特定元素属性设置
document.body.style.backgroundImage=”url(//img.png)”;
document.getElementsByTagName(“input”).checked = true;
JS 创建元素的方式
1. document.createElement(‘p’)；2. 对象.innerHTML=” 标签及代码 ”; 3. var ulObj = document.createElement(“ul”);
document.getElementsByTagName(“div”).appendChild(ulObj);
JS offset、scroll、client 系列的值
style 标签中设置的样式属性是获取不到的，然而在标签中设置的 style 属性的值时可以获取到的。
获取元素的宽高，使用 offset 系列的值
offsetWidth // 获取元素的宽，有边框
offsetHeight // 获取元素的高，有边框
offsetLeft // 获取元素距离左边位置的值
offsetRight // 获取元素距离上边位置的值
scrollLeft // 向左卷曲出去的距离
scrollTop // 向上卷曲出去的距离
scrollWidth // 元素中内容实际的宽（如果内容较少，没有内容，就是元素自身的宽），没有边框
scrollHeight // 元素中内容实际的高（如果内容较少，没有内容，就是元素自身的高），没有边框
clientWidth // 可视区域的宽（没有边框），边框内部的宽
clientHeight // 可视区域的高（没有边框），边框内部的高
clientLeft // 左边框宽度
clientTop // 上边框宽度
event.clientX、event.clientY // 鼠标相对于浏览器窗口可视区域的 X，Y 坐标（窗口坐标），可视区域不包括工具栏和滚动条
event.pageX、event.pageY // 类似于 event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标（IE8 不可用）