onclick（）触发事件
var
btn
=
document
.
querySelector
(
'button'
);
btn
.
addEventListener
(
'click'
,
function
()
{
var
rndCol
=
'rgb('
+
random
(
255
)
+
','
+
random
(
255
)
+
','
+
random
(
255
)
+
')'
;
document
.
body
.
style
.
backgroundColor
=
rndCol
;
});
移除监听事件
btn
.
removeEventListener
(
'click'
,
bgChange
);
事件B 会覆盖事件A
myElement
.
onclick
=
functionA
;
myElement
.
onclick
=
functionB
;
事件A 和事件B 都会被触发
myElement
.
addEventListener
(
'click'
,
functionA
);
myElement
.
addEventListener
(
'click'
,
functionB
);
最好不要在行内元素添加 onclick 方法，因为已经过时，若有多个同类型的元素，onclick的数量将是巨大的。流行用
querySelector
或者是
querySelectorAll 、getEelementById、getEelementByTagName
等
冒泡：若一个视频被点击，则运行完视频的触发事件后，还会运行它所在div 的触发事件。
目标：为实现只运行当前的事件，避免触发上级事件：stopProgation()
捕获：从外向内触发事件。在上例中，则先触发 div 事件，再触发 video 事件
addEventListener（'click '，function(e){....}），true/false} true 为捕获，false为冒泡
事件委托（事件代理）：若一个ul 有 N 个 li ，则要设置 N 个 DOM 操作，引起浏览器大量的重绘与重排，增加整体的交互就绪时间。只对这个 ul 对象进行操作，则效率大大提高。
最适用的元素 ：click，mousedown，mouseup，keydown，keyup，keypress
在使用事件时：
this===target===currentTarget
用父节点的事件，代替下属的所有子节点的事件，做到委托。下面就算是有新增的节点，也会赋予相同的属性。（转换为小写是H5中必要的）
若在li 内有其他子元素，
style 下的 visibility="hidden " 隐藏当前对象 visibility="visible " 显示当前对象
JS 修改 css 样式
1. obj.style.backgroundColor= "black";
2. obj.style.cssText = " display:block;color:White;"
3. obj.setAttribute("class", "style2"); // 推荐
4. obj.setAttribute("href","css2.css");
追加多个className ，先获取原有的类名，再加新类名，最后重新赋值。class="one two";
捕获和冒泡前后的传入的参数要一致
function(e / evn /event ){ // 代表事件的对象，仅在使用期间存在，否则被销毁
}
为事件指定处理程序的方式有多种 ：
1）HTML事件处理程序 <input type="button" value="click me" onclick="alert("hello")" />
①存在一个时间差，当用户在html元素一出现在页面上就去触发相应的事件时，事件的处理程序可能还不具备执行条件（比如说调用的函数还木有被解析），就会引发错误。
②html和js代码耦合度太高，如果要改变事件处理程序，就要改动两个地方：html代码和javascript代码。
2）DMO0级事件处理程序 var btn=document.getElementById("myBtn");
btn.onclick=function(){alert(this.id)};
冒泡阶段被处理
3）DOM2级事件处理程序 addEventListener(要处理的事件名，处理函数，布尔值)
removeEventListner(要处理的事件名，处理函数，布尔值)
同一元素可有多个事件处理程序
通过addEventListner添加的匿名函数无法删除。
4）IE事件处理程序 attachEvent(事件处理程序名，事件处理函数)
事件逆序触发
detachEvent(事件处理程序名，事件处理函数)
5）跨浏览器事件处理程序。 addHandler(操作的元素，事件名称，事件处理程序的函数)
removeHandler(操作的元素，事件名称，事件处理程序的函数)
定时：
setTimeout(code，millisec) （要执行的代码，间隔的时间）
间隔
self.setInterval("调用的函数()"，间隔)
此方法可以按照指定的周期执行来执行一段程序；周期是以毫秒为单位的。
setInterval 中主要区别在于，调用函数如何表示
案例一：以下是正确写法
function A(){......}
function B(){
setInterval("A（）",1000，param);
}
这里加
引号和() 时，把函数A 作为一个全局搜索函数，不在函数B() 内，故函数A（）能被调用
若为A 则报错 A 未定义； 若为 A() 则只会执行一次，是setInterval 内部的错误，无法调用A（）
案例二：以下是正确写法
function B(){
function A(){......}
setInterval(A,1000，param);
}
与上例同理，若为A（）则setInterval 内部的错误，无法调用A（）；若是 "A（）"则寻找的作用域为外部，全局变量无法访问内部变量和函数
总之就是不要写成 A（），局部调用用 A，全局调用用“A（）”
最后一部分：精灵图（把所有的小图标集合到一张图片上，通过定位获取某一个小图标，一次性加载到全部的小图标）
精灵图能减少http服务请求的时间,但是在维护、修改、切片时间上，花费的代价也是巨大的。目前随着可同时连接的http请求不断增加，精灵图的优势也就不那么明显了。