js事件

来源：互联网发布：maven实战源码下载编辑：程序博客网时间：2024/06/11 04:14
键盘事件，鼠标事件，表单事件，绑定多个事件
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>event</title></head><body><h2>鼠标事件</h2><div style="width:100%;background-color:#dcdcdc"><div style="width: 200px;height: 100px;background-color: green;" id="div01" onmousedown="mDown(this)" onmouseup="mUp(this)" onmouseout="mOut(this)" onmouseover="mOver(this)"><font color="white">hello world</font></div><script type="text/javascript">function mDown(obj){obj.innerHTML="HELLO WORLD";obj.style="width:200px;height: 100px;background-color: green;color:red;";}function mUp(obj){obj.innerHTML="hello world";obj.style="width: 200px;height: 100px;background-color: green;color:white;";}function mOut(obj){obj.innerHTML="mOut";obj.style="width: 200px;height: 100px;background-color: green;color:white;";}function mOver(obj){obj.innerHTML="mOver";obj.style="width: 200px;height: 100px;background-color: green;color:red;";}function mMove(obj){alert("mMove");obj.style="width: 200px;height: 100px;background-color: green;color:red;";}</script></div><h2>键盘事件</h2><div style="width:100%;background-color:#dcdcdc"><input type="text" name="n01" onkeyup="kUp(this)" /><script type="text/javascript">function kDown(obj){alert("键盘按下了");}function kPress(obj){alert("键盘按住");}function kUp(obj){obj.value=obj.value.toUpperCase();}</script></div><h2>表单事件</h2><div style="width:100%;background-color:#dcdcdc"><form action="" method="post" onsubmit="return oSubmit(this)"><input type="text" value="test" onfocus="oFocus(this)" onblur="oBlur(this)" onchange="oChange(this)" /><input type="submit" value="submit" /></form><script type="text/javascript">// window.onload=function(){// alert("onload is work");// }// window.onunload = function(){// alert("unload is work");// }// window.onbeforeunload = function(){// alert("onbeforeunload is work");// }function oSubmit(obj){alert("表单提交了");}function oFocus(obj){obj.style="border-color:#ff0000 #0000ff;";}function oBlur(obj){obj.style="";}function oChange(obj){alert("change");}</script></div><h2>页面事件</h2><div style="width:100%;background-color:#dcdcdc"><div id="name1" style="border:1px solid red;padding:10px 10px 10px 10px;" style="border:1px solid red;padding:10px 10px 10px 10px;"> <div id="name2" style="border:1px solid green;padding:10px 10px 10px 10px;" style="border:1px solid green;padding:10px 10px 10px 10px;">点击</div> </div> <div id="info"></div> <script type="text/javascript"><!-- var name1=document.getElementById('name1'); //要注意 var name2=document.getElementById('name2'); //要注意 var info=document.getElementById('info'); // 对象.attachEvent("事件(on)","处理程序")  添加// 对象.dettachEvent("事件(on)","处理程序")  删除// FF:// 对象.addEventListener("事件","处理程序",布尔值)   添加// 对象.removeEventListener("事件","处理程序",布尔值)  删除// IE:// 事件对象.cancelBubble=true;   // FF:// 事件对象.stopPropagation(); // IE11以下为attachEventif(name1.attachEvent){ //对于attachEvent前面的target我们一定要保证不为空 name1.attachEvent('onclick',function () { info.innerHTML += "红色" + "<br>"; }); name2.attachEvent('onclick',function () { info.innerHTML += "绿色" + "<br>"; }); }else{ name1.addEventListener('click',function () { info.innerHTML += "红色" + "<br>"; },false); name2.addEventListener('click',function () { info.innerHTML += "绿色" + "<br>"; },false); } </script> </div></body></html>
阅读全文
0 0