<ul id="parent-list"> <li id="list-1">List 1</li> <li id="list-2">List 2</li> <li id="list-3">List 3</li> <li id="list-4">List 4</li> <li id="list-5">List 5</li> </ul>
// 方法一
var list1 = document.getElementById("list-1");
list1.addEventListener("click",function(){
alert(this.firstChild.nodeValue);
},false);
var list2 = document.getElementById("list-2");
list2.addEventListener("click", function() {
alert(this.firstChild.nodeValue);
}, false);
var list3 = document.getElementById("list-3");
list3.addEventListener("click", function() {
alert(this.firstChild.nodeValue);
}, false);
var list4 = document.getElementById("list-4");
list4.addEventListener("click", function() {
alert(this.firstChild.nodeValue);
}, false);
var list5 = document.getElementById("list-5");
list5.addEventListener("click", function() {
alert(this.firstChild.nodeValue);
}, false);
// 方法二
var parentList = document.getElementById("parent-list");
parentList.addEventListener("click",function(){
var target = event.target;
if(target.nodeName.toLowerCase() === "li"){
alert(target.firstChild.nodeValue);
}
},false);
// 方法二
var parentList = document.getElementById("parent-list");
parentList.addEventListener("click",function(){
var target = event.target;
if(target.nodeName.toLowerCase() === "li"){
switch(target.id){
case "list-1":
alert("学的越多,越觉得自己无知!");
break;
case "list-2":
alert("爱是一种艺术!");
break;
case "list-3":
target.innerHTML = "呵呵,我改了啊!";
break;
case "list-4":
target.style.background = "#aaa";
break;
case "list-5":
target.style.color = "red";
target.style.fontSize = "2em";
break;
default:
break;
}
}
},false);
<button id="button">提交</button>
var button = document.getElementById("button");
button.onclick = function(){
// 提交某个表单的操作代码
button.onclick = null; // 移除事件处理程序
event.target.firstChild.nodeValue = "提交中。。。";
};
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码(独立后台)...苏ICP备2024110244号-2 苏公网安备32050702011978号 增值电信业务经营许可证编号:苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有