事件的三要素：事件源、时间数据、事件处理程序
事件：
onclick //单击鼠标触发
实现下拉项隐藏与展示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #caidan ul { display:none;/*将id为caidan的层下的所有子集隐藏*/ }
#caidan li { list-style-type:none;/*将列表中无序显示的点去掉*/ } </style> </head>
<body> <ul id="caidan"> <li> <img src="../images/jia.png" class="tu" height="13"> <span>水果摊1</span> <ul> <li>苹果</li> <li>菠萝</li> <li>雪梨</li> </ul> </li> <li> <img src="../images/jia.png" class="tu" height="13"> <span>水果摊2</span> <ul> <li>香蕉</li> <li>荔枝</li> <li>樱桃</li> </ul> </li> </ul> </body> </html> <script language="javascript">
var ull=document.getElementById("caidan");
for(var i=0;i<ull.childNodes.length;i++) { if(ull.childNodes[i].tagName=="LI") {//最大ul中子代li按钮进行点击 ull.childNodes[i].setAttribute("onclick","xsx(this)"); } }
function xsx(xli) { var xiazhu=xli.getElementsByTagName("ul");//寻找子集中的ul if(xiazhu!=null) { if(xiazhu[0].style.display!="block") { xli.getElementsByTagName("img")[0].src="../images/jian.png";//改变图片 xiazhu[0].style.display="block";//展开下拉项 } else { xli.getElementsByTagName("img")[0].src="../images/jia.png";//改变图片 xiazhu[0].style.display="none";//隐藏下拉项 } } }
</script>
ondblclick //双击鼠标触发
1.如何为表格中所有的行，用代码加上同一个事件？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
function aa(a)
{
var yuanben=a.innerHTML;
var jl=document.createElement("input");
jl.setAttribute("type","text");
jl.style.borderStyle="none";
jl.style.width="100%";
//a.replaceChild(jl,a.childNodes[0]);//点击进入后无显示，纯白，无框
jl.setAttribute("onchange","opp(this)");
//增加onchange属性，属性值代入函数；onchange只有内容改变时才会触发
jl.value=yuanben;
a.innerHTML="";
a.appendChild(jl);
jl.focus();//点击第一个页面需要点击的内容后，获得焦点时触发
jl.select();//显示出来的内容被阴影覆盖，一按删除，将所有内容删除
}
function opp(txt)
{
var s=txt.value;//获得文本框中的内容
txt.parentNode.innerHTML=s;//将文本框内的内容替换
}
</script>
</head>
<body>
<div ondblclick="aa(this)">
点击两次，然后输入信息
</div>
</body>
</html>
onmouseover //鼠标移动到指定位置发生改变
onmouseout //鼠标离开指定位置发生改变
2.如何实现表格中奇偶行不同背景颜色？
3.如何实现光棒效果？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css">
#tab tr { background-color:white; } </style>
</head>
<body> <table id="tab" width="100%" border="5px" bgcolor="black" cellspacing="0" cellpadding="0"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table>
</body> </html> <script language="javascript"> /*//跟上边的style效果一样，改变tr的背景颜色 var trs=document.getElementsByTagName("tr"); for(var i=0;i<trs.length;i++) { trs[i].style.backgroundColor="blue"; } */ var bgse; function dianliang(dj) { bgse=dj.style.backgroundColor;
dj.style.backgroundColor="blue";
} function limie(lm) {//bg=dj.style.backgroundColor;
lm.style.backgroundColor=bgse; }
var trs=document.getElementsByTagName("tr"); for(var i=0;i<trs.length;i++) { if(i%2==0)//i是从0开始的 { trs[i].style.backgroundColor="green"; } trs[i].setAttribute("onmouseover","dianliang(this)"); trs[i].setAttribute("onmouseout","limie(this)"); //以上是两个鼠标触发事件，鼠标指在onmousemove，鼠标离开onmouseout }
</script>
onkeydown //按键按下时触发
onkeyup //应用于输入表单字数，查询剩余字数，
4.微博输入时，显示剩余可输入的字数。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title>
<style type="text/css"> #zishu { color:red; } </style> </head>
<body> <form id="form1" name="form1" method="post" action=""> <p>请输入您的评论： </p> <p> <label for="txt"></label> <textarea name="txt" id="txt" onkeyup="show(this)" cols="80" rows="10"></textarea> </p> <p>最多输入100字，还剩余字:<span id="zishu">100</span></p></form> </body> </html> <script language="javascript"> function show(tt) { var chang=tt.value.length; var sheng=100-chang; document.getElementById("zishu").innerHTML=sheng; } </script>
onfocus //获得焦点时触发
onblur //失去焦点时触发
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head>
<body> <form id="form1" name="form1" method="post" action=""> <p>账号： <label for="zhanghao"></label> <input type="text" onblur="li(this)" onfocus="dol(this)" name="zhanghao" id="zhanghao" style="color:#c0c0c0" value="(必填)" /> </p> <p>密码： <label for="mima"></label> <input type="text" name="mima" id="mima" /> </p> </form> </body> </html> <script language="javascript"> function dol(tt) { if(tt.value=="(必填)") {tt.value=""; //当要填写此文本框时，直接清空原本的文本，且在填写时颜色改为黑 tt.style.color="black";} } function li(tt) { if(tt.value.length==0) { tt.value="(必填)"; //当文本框内没有被输入数据，就离开本文本框时；文本回复为必填，且颜色变为灰 tt.style.color="#c0c0c0"; } } </script>
onchange //内容改变时触发