<html5+css3+js>事件触发js代码的不同方式_通过添加css,触发js方法-CSDN博客

本文链接：https://blog.csdn.net/qq_17615475/article/details/50156487

(《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.οnblur=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