Dom2和Dom3
Dom2和Dom3
importNode()方法，是将当前文档的某个节点传入到另一个文档中，使其成为该文档的一部分，因为元素都会有一个ownerDocument属性，所以单纯的使用appendChile方法会出错。
Css样式
var div = document.getElementById("div1"); div.style.width = 200;
偏移量
offsetWidth：元素垂直方向上所占的空间。
offsetHeight：元素水平方向上所占的空间。
offsetLeft：元素左边框至父元素左边框之间的距离。
offsetTop：元素上边框至父元素上边框所占的距离。
客户区大小
ClientWidth 和 ClientHeight ，代表元素除边框的高度和宽度。
滚动大小
scrollHeight:没有滚动条的下，元素的高度。
scrollWidth:没有滚动条下,元素的宽度。
scrollLeft:设置这个属性，可以改变元素的滚动位置。
scrollTop:设置这个属性，可以改变元素的滚动位置。
遍历元素
返回某一元素下的所有li算的tagName
var div = document.getElementById("div1"); var filter = function (node) { return node.tagName.toLowerCase() == "li" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP; }; var iterator = document.createNodeIterator(div, NodeFilter.SHOW_ELEMENT, filter, false); var node = iterator.nextNode(); while (node != null) { alert(node.tagName); node = iterator.nextNode(); }
TreeWalke方法
与上个方法类似，不过这个方法可以指定不同的遍历方法
事件流
addEventListener和removeEventLister
这两个方法接收三个参数，分别是事件名称、方法名或方法体、布尔值，这个布尔值代表是在捕获阶段调用，还是在冒泡阶段调用。
function btnfn() { alert(this.id); } function btnfn1() { alert(this.id); } var btn = document.getElementById("btn"); btn.addEventListener("click", btnfn, true); btn.addEventListener("click", btnfn1, true); btn.removeEventListener("click", btnfn, true);
可以进行绑定多个方法，会依次执行，也可去除某个方法。
IE浏览器中使用attachEvent绑定和detachEvent移除事件。
事件对象
触发某个事件时，会产生一个事件对象event，这个对象包含所有与事件相关的信息，例如鼠标事件时，鼠标的位置，键盘事件时，键盘的按下的按键。
阻止事件的默认行为
var link = document.getElementById("link"); link.onclick = function (event) { event.preventDefault(); }
停止事件在dom中的传播
var btn = document.getElementById("btn"); btn.onclick = function (event) { alert("clidked"); event.stopPropagation(); } document.body.onclick = function (event) { alert("body clicked"); }
上段代码，如果不对btn进行停止冒泡的话，那么单击按钮时会弹出两个提示框，因为按照事件规则，事件会冒泡依次注册所有的click事件，所以，就会执行两次。
eventPhase
event.enevtPhase代表当前事件流执行到哪一步，为1时，代表是在捕获阶段的调用上，为2时，代表事件处理程序处于目标对象上，为3时代表事件处理程序处于冒泡阶段调用上。
var btn = document.getElementById("btn"); btn.onclick = function (event) { alert(event.eventPhase);//2 } document.body.addEventListener("click", function (event) { alert(event.eventPhase) //1 }, true); document.body.onclick = function (event) { alert(event.eventPhase);//3 }
上面的代表会先执行body的alert，因为其addEventListener最后一个参数设置为true，代表捕获阶段就开始调用。
Load事件
var img = document.getElementById("img"); img.onload = function (event) { alert("加载成功"); }
Unload事件
Unload事件代表页面完全卸载后触发，只要用户从一个页面切换到另一个页面，那么就会出发该事件，一般用它来操作清除引用等操作。
window.onunload = function () { alert("页面已卸载"); }
Resize事件
当窗口的宽高发生变化时就会触发该方法，需要注意不同的浏览器对这个事件有这不同的处理机制，其他浏览器在变化的同时，会多次执行这个事件，然而Firefox则在停止变化时，才会触发一次。另外当浏览器最大或最小话时，也会触发该方法。
window.onresize = function () { alert("尺寸变化"); }
Scroll事件
window.onscroll = function () { if (document.documentElement.scrollLeft) { alert("滚动至最左侧"); } if (document.documentElement.scrollTop) { alert("滚动至最上方"); } }
鼠标事件
event.clientX event.clientY属性针对于鼠标指针在视口中的坐标
event.pageX event.PageY 属性针对于鼠标在页面中的位置。
只有在不滚动时，两组坐标才相等，也就是说第一组属性，如果用户滚动页面，鼠标不动，那么坐标不会发生变化，而第二组则发生变化。
event.screenX event.screenY 鼠标相对于屏幕的坐标。
键盘键
var div = document.getElementById("div1"); div.addEventListener("click", function (event) { if (event.shiftKey) { alert("shift+鼠标点击"); } if (event.ctrlKey) { alert("ctrl+鼠标点击"); } if (event.altKey) { alert("alt+鼠标点击"); } if (event.metaKey) { alert("windows+鼠标点击"); } })
鼠标按键
event.button 如果为0代表左键，1代表滚轮，2代表右键
var div = document.getElementById("div1"); div.addEventListener("mousedown", function (event) { alert(event.button); })
鼠标滑轮
wheelDelta的值向上则值为正数的120，如果向下，则为负数的-120
document.body.addEventListener("mousewheel",function(event) { alert(event.wheelDelta); })
按键执行的顺序
按下一个键子时，先执行keydown事件，然后是keypress，最后是keyup事件。
Keypress意味着按下的键会影响屏幕的显示，在所有浏览器中删除或插入字符的按钮都会执行。
TextInput事件
事件时判断如何进行输入的。
var text = document.getElementById("text"); text.addEventListener("textInput", function (event) { alert(event.inputMethod); });
只有IE支持
右键弹出自定义菜单
var div = document.getElementById("div1"); div.addEventListener("contextmenu", function (event) { event.preventDefault();//阻止默认事件 var menu = document.getElementById("ul1"); menu.style.left = event.pageX; menu.style.top = event.pageY; menu.style.visibility = "visibility"; }); div.addEventListener("click", function (event) { document.getElementById("ul1").style.visibility = "hidden"; })
Beforeunload事件-关闭页面之前
window.onbeforeunload = function (even) { var message = "确定不保存，直接进行关闭么？"; event.returnValue = message; return message; }
DOMcontentLoaded事件-页面加载完成
与onload事件不同，这个事件时在形成dom树之后触发，并不会完全等待页面加载完毕。
Hashchange- URL变化事件
window.onhashchange = function (event) { alert(event.oldURL); alert(event.newURL); }
事件委托-页面性能优化
很多时候，在处理页面交互功能时，一般为某个交互对象直接绑定一个交互事件，例如为某个按钮绑定点击事件，在相对于简单页面中性能消耗不会太大，但是交互事件一旦很多，性能就会消耗的特别严重，因为在JS中每个函数都是对象，每个对象都会占用内存，内存中的对象越多，性能也就越差，其次因为在绑定事件时，都会访问dom，所有对dom的访问也会消耗很大性能。可以利用委托来解决这种问题，因为事件处理时，会冒泡到最高的dom节点，也就是说在dom数中尽量在最高层次上添加一个事件处理程序。如：
<ul id="ul1"> <li id="l1">1</li> <li id="l2">2</li> <li id="l3">3</li> </ul> var ul = document.getElementById("ul1"); ul.addEventListener("click", clickFn, false); function clickFn(event) { switch (event.target.id) { case "l1": alert(1); break; case "l2": alert(2); break; case "l3": alert(3); break; } }
移除事件
如果在页面中删除某个元素时，一般使用的方法是直接删除，如果利用innerHTML的方法删除某个元素时，那么绑定在这个元素上的事件，就不会被一并删除，所以在利用这种方法删除元素时，别忘记先将事件移除。
事件模拟
var btn = document.getElementById("btn"); //创建事件对象 var event = document.createEvent("MouseEvents"); //初始化 event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null); //触发事件 btn.dispatchEvent(event);
选择文本
var text = document.getElementById("text"); text.addEventListener("focus", function (event) { event.preventDefault(); event.target.select(); }, false); //获取选择的文本 function getSelectText(textBox) { return textBox.value.substring(textBox.selectionStart, textBox.selectionEnd); } document.getElementById("text").select(); var txt=getSelectText(document.getElementById("text")); alert(txt);
contenteditable
<div id="div1" data-value="val1" class="triangle" style="border:solid 1px red" contenteditable>
代表div内的内容是可编辑的
