事件问题---(js简短汇总4)
2015-04-27 10:34
253 查看
事件的三要素:事件源、时间数据、事件处理程序
事件:
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 //内容改变时触发
事件:
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 //内容改变时触发
相关文章推荐
- [js综合问题汇总]js窗口关闭事件,表单名称,父窗口子窗口,var变量名
- 正则表达式--(js简短汇总5)
- JS给元素循环添加事件的问题
- js 无参数、有参数的webservice通信方法 XMLHttpRequest和 $.ajax方式汇总及返回值为json问题
- 分析并解决移动端js事件响应慢的问题
- js的image onload事件使用遇到的问题
- tab.js分享及浏览器兼容性问题汇总
- 有关js改变class或remove掉class之后,原class绑定事件依旧存在的问题
- css和js的浏览器兼容问题汇总
- onclientclick事件使用JS页面会刷新问题解决
- jquery.ajaxfileupload.js 问题汇总
- 通过SlimerJS触发键盘事件使优酷视频快进(问题未解决)
- JS一个非常经典的问题:在遍历数组时对DOM监听事件,索引值将始终等于遍历结束后的值
- [问题记录]js将事件写在函数之前解决IE8的兼容性问题
- 解决js绑定事件this指向发生改变的问题
- JS的IE和FF兼容性问题汇总
- 关于datagrid中控件利用js调用后台方法事件的问题
- css和js的浏览器兼容问题汇总
- js滚轮事件兼容性问题需要注意哪些
- (js有关图片加载问题)dom加载完和onload事件