js事件，我这里主要谈谈这三种，冒泡事件，委托事件，以及事件监听。
所谓的冒泡事件，通俗一点就是，一个泡泡往上冒，当往上面的节点事件与目标节点事件（这里是p）一致时，也会发生。
直接上货吧。老样子，先把html放上来，要明白的是这里的节点树是：
body>div>p，都添加了onclick事件，目标函数都是add(),赋予的参数不一样
body>div.maopao 这里是要放的内容块
function add(dd){
var maopao = document.getElementsByClassName("maopao")[0];/*取到maopao*/
maopao.innerHTML+=dd;/*把参数放到这个块里*/
}
委托事件， 我认为与冒泡相反，既然，我的底层节点，能够触发祖先节点，那么，可不可以然祖先节点来代替我执行事件呢？
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li>第1个</li> <li>第2个</li> <li>第3个</li> </ul> <input type="button" value="添加" id="tia" />
<script> var uu = document.getElementsByTagName("ul")[0];/*我取到的是ul,不是li*/ var btn = document.getElementById("tia"); var num=3; window.onload = function(){ uu.onclick = weit;/*点击事件，点击弹出提示框*/ uu.onmouseover = mou;/*鼠标移入事件*/ uu.onmouseout = out;/*鼠标移出事件*/ btn.onclick = tian;/*点击添加行*/ } function weit(e){ /*事件对象e，不懂可以看我另一篇《事件对象》*/ var event = e ||window.event; var tar = e.target || e.srcElement;/*具体到某个li，就是用到这个tar,目标源，这两句解决兼容性*/ if(tar.nodeName.toLocaleLowerCase() == "li"){/*toLocaleLowerCase()方法是把字母变小写*/ alert(tar.innerHTML); } } function mou(e){ var e=e || window.event; var target = e.target || e.srcElement; console.log(e.type); target.style.color = "red"; } function out(e){ var e=e || window.event; var target = e.target || e.srcElement; console.log(e.type); target.style.color = "#000"; } function tian(){ num++; var lia = document.createElement("li"); lia.innerHTML = "第"+num+"个"; uu.appendChild(lia); } </script> </body> </html>
监听事件:
<div class="jianting1">通用监听事件，点我</div>
<div class="jianting2">IE监听事件，点我</div>
<div class="jianting3" style="background: red;">标准DOM监听事件，点我</div>
window.onload = function(){ /*监听事件 1通用*/ var tongy1 = document.getElementsByClassName("jianting1")[0]; tongy1.onclick = function(){ alert("我监听到了"); } /*标准DOM*/ var biao3 = document.getElementsByClassName("jianting3")[0]; biao3.addEventListener("click",click1,false); biao3.addEventListener("click",click2,click1); }
function click1(){
var biao3 = document.getElementsByClassName("jianting3")[0];
timer=setInterval(function(){
if(parseInt(biao3.style.width) == 100){
alert("我现在的宽是100")
clearInterval(timer);
}
biao3.style.width = sum+"px";
sum-=10;
},200);
}
function click2(fn){
var biao3 = document.getElementsByClassName("jianting3")[0];
clearInterval(timer);
timer=setInterval(function(){
if(parseInt(biao3.style.width) == 200){
alert("我现在的宽是200")
if(fn){
fn();
}
}
biao3.style.width = sum+"px";
sum+=10;
},200);
}