事件
<body>
<button type="button" onclick="show()">一个按钮</button>
<h1 id="myh">aaaa</h1>
<h1>aaaa</h1>
<h1>aaaa</h1>
<h1>aaaa</h1>
<h1>aaaa</h1>
<h1>aaaa</h1>
<h1>aaaa</h1>
<h1>aaaa</h1>
<h1>aaaa</h1>
</body>
</html>
<script type="text/javascript">
// 事件:生活中的指的就是一件事情。
// JS中的事件,指的就是一些特定的事情,或行为。
//JS中的事件:
//事件源 :事件在那个标签发生。
//事件类型 :各种各样的事件 比如点击事件,双击事件 等等
//事件绑定 :把这个事件绑定给元素某个元素
//事件的处理函数:事件触发后的处理函数。
//给标签如何来绑定某个事件
//绑定事件的3种方式:
//方式1:直接在标签上,绑定事件
function show(){//事件一点击 事件处理函数就执行了
alert("单击了");
}
//方式2:用代码来绑定事件: 标签对象.事件名=function(){}
var h1=document.getElementById("myh");
h1.onclick=function(){
alert("弹了");
}
var h1Arr=document.getElementsByTagName("h1");
for(var i=0;i<h1Arr.length;i++){
h1Arr[i].onclick=function(){
//每点一个元素,随机变换一个文本颜色。
//this表示当前触发了点击事件的那个元素对象。
//随机取整数,进行颜色搭配
var a=Math.floor(Math.random()*255);
var b=Math.floor(Math.random()*255);
var c=Math.floor(Math.random()*255);
this.style.color=`rgb(${a},${b},${c})`;
}
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button" id="myBtn">一个按钮</button>
</body>
</html>
<script type="text/javascript">
var btn=document.getElementById("myBtn")
var show=function(){
alert("点击了");
}
var show2=function(){
alert("点击了22222");
}
var show3=function(){
this.style.background="red";
}
var show4=function(){
this.style.background="yellow";
}
//给一个元素,绑定多个事件
btn.addEventListener("click",show);
btn.addEventListener("click",show2);
btn.addEventListener("mouseover",show3);
btn.addEventListener("mouseout",show4);
// removeEventListener() 方法 移除事件 值1:事件名,值2:事件的处理函数
btn.removeEventListener('click',show);
</script>
焦点事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- * 焦点事件:针对表单
* onfocus 元素获得焦点。
* onblur 元素失去焦点 -->
<form action="#" method="get">
用户名: <input type="" name="" id="uname" value="请输入用户名6-16位字母" onfocus="clearValue()" onblur="show()"/><br>
密码:
<input type="" name="" id="" value="" placeholder="请输入密码6-16位数字"/>
<br>
<input type="submit" value="提交"/>
</form>
</body>
</html>
<script type="text/javascript">
function clearValue(){
//alert("获取焦点了");
document.getElementById("uname").value="";
}
function show(){
var v=document.getElementById("uname").value;
alert(v);
}
</script>
表单校验
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--onsubmit 表单提交事件
onsubmit="return true" 返回true表单会提交
onsubmit="return false" 返回false 表单不会提交
-->
<form action="#" method="get" onsubmit="return checkForm()">
用户名: <input type="" name="username" id="uname" value="请输入用户名6-16位字母" onfocus="clearValue()" onblur="checkUsername()" />
<span id="usp"></span>
<br>
密码:
<input type="" name="password" id="pwd" value="" placeholder="请输入密码6-16位数字" onblur="checkPassword()" /><span id="psp"></span>
<br>
<input type="submit" value="提交" />
</form>
</body>
</html>
<script type="text/javascript">
function checkForm(){
return checkUsername()&&checkPassword();
}
function clearValue() {
//alert("获取焦点了");
document.getElementById("uname").value = "";
}
function checkUsername() {
var username = document.getElementById("uname").value;
var regx=/^[a-z]{6,16}$/i;
var f=regx.test(username);
if(f){
document.getElementById('usp').innerHTML="<span style='color: aquamarine;'>用户名规则正确</span>"
}else{
document.getElementById('usp').innerHTML="<span style='color:red;'>用户名规则错误</span>"
}
return f;
}
function checkPassword() {
var password = document.getElementById("pwd").value;
var regx=/^[1-9][0-9]{5,15}$/;
var f=regx.test( password);
if(f){
document.getElementById('psp').innerHTML="<span style='color: aquamarine;'>密码规则正确</span>"
}else{
document.getElementById('psp').innerHTML="<span style='color:red;'>密码规则错误</span>"
}
return f;
}
</script>