DOM事件和一些实用笔记

let el = document.body.querySelector("style[type='text/css'], style:not([type])");
返回HTML文档里第一个没有type属性或者有值为“text/css”的type属性的<style>元素
document.querySelector只返回第一个符合的对象。

**事件对象**

有时候在事件处理函数内部，您可能会看到一个固定指定名称的参数，例如event，evt或简单的e。
这被称为事件对象，它被自动传递给事件处理函数，以提供额外的功能和信息。
例如，让我们稍稍重写一遍我们的随机颜色示例：

function bgChange(e) {
var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
e.target.style.backgroundColor = rndCol;
console.log(e);
}
btn.addEventListener('click', bgChange);
在这里，您可以看到我们在函数中包括一个事件对象e，并在函数中设置背景颜色样式在e.target上 - 它指的是按钮本身。
事件对象 e 的target属性始终是事件刚刚发生的元素的引用。
所以在这个例子中，我们在按钮上设置一个随机的背景颜色，而不是页面。

**捕获和冒泡**
假如我们点击一个div, 实际上是先点击document，然后点击事件传递到div,而且并不会在这个div就停下，
div有子元素就还会向下传递，最后又会冒泡传递回document
btn2.addEventListener('click',handlers,false);这里的false表示只在冒泡阶段添加事件
btn2.removeEventListener('click',handlers.false);这里的false表示只在冒泡阶段添加事件
stopPropagation()方法可以阻止事件冒泡（IE中为cancleBubble=true）一般用在事件后面的方法体内。

IE事件处理程序(IE和Opera支持)
IE用了attachEvent(),detachEvent(),接收两个参数,事件名称和事件处理程序,
通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段,
所以平时为了兼容更多的浏览器最好将事件添加到事件冒泡阶段,
IE8及以前只支持事件冒泡;
btn3.attachEvent('onclick',handlers2);

**事件委托**
这里用父级ul做事件处理，当li被点击时，由于冒泡原理，事件就会冒泡到ul上，
因为ul上有点击事件，所以事件就会触发，当然，这里当点击ul的时候，也是会触发的，
那么问题就来了，如果我想让事件代理的效果跟直接给节点的事件效果一样怎么办，
比如说只有点击li才会触发，不怕，我们有绝招：
Event对象提供了一个属性叫target，可以返回事件的目标节点，我们成为事件源，
也就是说，target就可以表示为当前的事件操作的dom，但是不是真正操作dom，
当然，这个是有兼容性的，标准浏览器用ev.target，IE浏览器用event.srcElement，
此时只是获取了当前节点的位置，并不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名，
这个返回的是一个大写的，我们需要转成小写再做比较（习惯问题）：
window.onload = function(){
　　var oUl = document.getElementById("ul1");
　　oUl.onclick = function(ev){
　　　　var ev = ev || window.event;
　　　　var target = ev.target || ev.srcElement;
　　　　if(target.nodeName.toLowerCase() == 'li'){
　 　　　　　　 alert(123);
　　　　　　　 alert(target.innerHTML);
　　　　}
　　}
}
那什么样的事件可以用事件委托，什么样的事件不可以用呢？
适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。
值得注意的是，mouseover和mouseout虽然也有事件冒泡，但是处理它们的时候需要特别的注意，
因为需要经常计算它们的位置，处理起来不太容易。
不适合的就有很多了，举个例子，mousemove，每次都要计算它的位置，非常不好把控，
说focus，blur之类的，本身就没用冒泡的特性，自然就不能用事件委托了。

**Text 对象**
属性 描述
accessKey 设置或返回访问文本域的快捷键。
alt 设置或返回当浏览器不支持文本域时供显示的替代文本。
defaultValue 设置或返回文本域的默认值。
disabled 设置或返回文本域是否应被禁用。
form 返回一个对包含文本域的表单对象的引用。
id 设置或返回文本域的 id。
maxLength 设置或返回文本域中的最大字符数。
name 设置或返回文本域的名称。
readOnly 设置或返回文本域是否应是只读的。
size 设置或返回文本域的尺寸。
tabIndex 设置或返回文本域的 tab 键控制次序。
type 返回文本域的表单元素类型。
value 设置或返回文本域的 value 属性的值。
className 设置或返回元素的 class 属性。
dir 设置或返回文本的方向。
lang 设置或返回元素的语言代码。
title 设置或返回元素的 title 属性。

方法 描述
blur() 从文本域上移开焦点。
focus() 在文本域上设置焦点。
select() 选取文本域中的内容。

**Button 对象**
在 HTML 文档中 <button> 标签每出现一次，Button 对象就会被创建。
属性 描述
accessKey 设置或返回访问某个按钮的快捷键。
disabled 设置或返回是否禁用按钮。
form 返回对包含按钮的表单的引用。
id 设置或返回按钮的 id。
name 设置或返回按钮的名称。
tabIndex 设置或返回按钮的 Tab 键控制次序。
type 返回按钮的表单类型。
value 设置或返回显示在按钮上的文本。
className 设置或返回元素的 class 属性。
dir 设置或返回文本的方向。
lang 设置或返回元素的语言代码。
title 设置或返回元素的 title 属性。

window.onkeypress, window.onkeydown, window.onkeyup — 当按钮被按下时颜色会发生改变.
keypress 指的是通俗意义上的按下按钮 (按下并松开), 而 keydown 和 keyup 指的是按键动作的一部分,分别指按下和松开.
注意如果你将事件处理器添加到按钮本身，它将不会工作 — 我们只能将它添加到代表整个浏览器窗口的 window对象中。

**HTML DOM clip 属性**
Object.style.clip=rect(top,right,bottom,left)
把一个元素上下左右分别裁剪相应的像素。
注释：该属性不能用于 "overflow" 设置为 "visible" 的元素。

**javascript 动态修改css样式的四种方法**
1、使用obj.className来修改样式表的类名。
2、使用obj.style.cssTest来修改嵌入式的css。
3、使用obj.setAttribute("class", "style2")方法来修改样式表的类名。
4、使用更改外联的css文件，从而改变元素的css
<link href="css1.css" rel="stylesheet" type="text/css" id="css"/>
document.getElementById("css").setAttribute("href","css2.css");

**async 和 defer**
使用 async 属性可以异步加载脚本，从而不会影响HTML文件，例如：
你的页面要加载以下三个脚本：
<script async src="js/vendor/jquery.js"></script>
<script async src="js/script2.js"></script>
<script async src="js/script3.js"></script>
三者的调用顺序是不确定的。jquery.js 可能在 script2 和 script3 之前或之后调用，
如果这样，后两个脚本中依赖 jquery 的函数将产生错误，因为脚本运行时 jquery 尚未加载。
解决这一问题可使用 defer 属性，脚本将按照在页面中出现的顺序加载和运行：
<script defer src="js/vendor/jquery.js"></script>
<script defer src="js/script2.js"></script>
<script defer src="js/script3.js"></script>
并将关联的脚本按所需顺序置于 HTML 中，以免影响HTML文件。

**property 和 attribute**
property 是DOM节点的属性，是JavaScript里的对象；

attribute 是HTML标签上的特性，表现为DOM节点的attributes属性，它的值只能够是字符串；

attribute 和 property之间的数据绑定是单向的，修改 attribute 会导致 property发生修改；

更改property和attribute上的任意值，都会将更新反映到HTML页面中。