<html5+css3+js>事件触发js代码的不同方式

来源：互联网发布：奇门遁甲排盘软件编辑：程序博客网时间：2024/06/10 23:57

(《javascript&jquery交互式web前端开发》学习记录)

html5代码：

<!doctype html><html><head><meta charset="UTF-8"><title>Sign up</title><link rel="stylesheet" href="event.css" /></head><body><div id="page">    <h1>List King</h1>        <h2>new account</h2>        <form method="post" action="www.weibo.com/maystudio19082015">        <label for="username">Creata a username: </label>            <input type="text" id="username" />            <div id="feedback"></div>            <label for="password">Create a password:</label>            <input type="password" id="password" />            <input type="submit" value="Sign up" />        </form>    </div>    <script type="text/javascript" src="event.js"></script></body></html>

css代码：

@charset "UTF-8";/* CSS Document */body{background-color:#000000;padding:0;margin:0;font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;color:#FFFFFF;}#page{background-color:#434343;margin:0 auto;max-width:480px;padding:0 10px 0px;}h1{background:url(kinglogo.png) no-repeat center;text-indent:-1000%;overflow:hidden;height:75px;margin:0 auto;width:117px;line-height:75px;padding:20px 0 10px;}h2{text-align:center;font-size:200%;text-transform:uppercase;letter-spacing:.1em;}form{padding:0 80px 40px;margin:0;}label{display:block;font-size:120%;margin:6px 0;text-align:center;}input[type="text"],input[type="password"],textarea{background-color:#C4C4C4;color:#565656;font-size:120%;width:100%;padding:4px 0px;border:1px solid #C4C4C4;border-radius:8px;}input[type='text']:focus,input[type="password"]:focus,textarea:focus{background-color:#FFFFFF;border:1px solid #FFFFFF;}input[type='submit']{display:block;background-color:#FF8D8F;color:#FFFFFF;font-size:120%;padding:6px 10px 8px;border-radius:5px;border-top:none;border-left:none;border-right:none;border-bottom:2px solid #A56C6D;margin:40px auto 0;text-transform:uppercase;}input[type='submit']:hover{position:relative;top:2px;background-color:#FF5E61;border:none;}#feedback{background:url(warning.png) no-repeat 0px 10px;padding:10px 0 0 25px;}

javascript代码：

//HTML事件处理程序/*function checkUsername(){var elMsg=document.getElementById('feedback');var elUsername=document.getElementById('username');if (elUsername.length<5){elMsg.textContent='Username must be 5 characters or more';}else{elMsg.textContent='';}}*///传统的DOM事件处理/*function checkUsername(){var elMsg=document.getElementById('feedback');if(this.value.length<5){elMsg.textContent='Username must be 5 charactrs or more';}else{elMsg.textContent='';}}var elUsername=document.getElementById('username');elUsername.onblur=checkUsername;*///第二级DOM事件监听器/*function checkUsername(){var elMsg=document.getElementById('feedback');if(this.value.length<5){elMsg.textContent='Username must be 5 characters or more';}else{elMsg.textContent='';}}var elUsername=document.getElementById('username');elUsername.addEventListener('blur',checkUsername,false);*///在事件监听器中使用参数/*var elUsername=document.getElementById('username');var elMsg=document.getElementById('feedback');function checkUsername(minLength){if (elUsername.value.length<minLength){elMsg.textContent='Username must be '+minLength+' characters or more';}else{elMsg.textContent='';}}elUsername.addEventListener('blur',function(){checkUsername(6);}, false);*///在IE8中通过备用方法使用事件监听器/*var elUsername=document.getElementById('username');var elMsg=document.getElementById('feedback');function checkUsername(minLength){if(elUsername.value.length<minLength){elMsg.innerHTML='Username must be '+minLength+' characters or more';}else{elMsg.innerHTML='';}}if(elUsername.addEventListener){elUsername.addEventListener('blur',function(){checkUsername(5);},false);}else{elUsername.attachEvent('onblur',function(){checkUsername(5);});}*///在事件监听器中使用事件对象function checkLength(e, minLength){var el,elMsg;if(!e){e=window.event;}el=e.target||e.srcElement;elMsg=el.nextSibling;if(el.value.length<minLength){elMsg.innerHTML='Username must be '+minLength+' characters or more';}else{elMsg.innerHTML='';}}var elUsername=document.getElementById('username');if(elUsername.addEventListener){elUsername.addEventListener('blur',function(e){checkLength(e,5);},false);}else{elUsername.attachEvent('onblur',function(e){checkLength(e,5);},false);}

代码下载：http://download.csdn.net/detail/qq_17615475/9351249

0 0