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="添加" />
<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);
}