Javascript学习笔记:DOM事件
程序员文章站
2024-03-22 09:33:04
...
1.HTML事件
直接在HTML元素标签内添加事件,执行脚本。
<tag 事件=“执行脚本”></tag>
鼠标事件:
<body>
<div class='aaa bbb ccc'>
<input type='button' value='say hello' onclick="alert('hello')">
<div id='btn' onmouseover="mouseoverFn(this)" onmouseout="mouseoutFn(this)">开始</div>
</div>
<script>
function mouseoverFn(btn){
btn.style.background="red";
}
function mouseoutFn(btn){
btn.style.background="lightblue";
}
</script>
</body>
2.DOM0级事件
语法:ele.事件=执行脚本
功能:在DOM对象上绑定事件
说明:执行脚本可以是一个匿名函数,也可以是一个函数的调用
方法1:匿名函数
<body>
<div class='aaa bbb ccc'>
<div id='btn'>解锁</div>
</div>
<script>
//获取按钮
var btn = document.getElementById("btn");
//给按钮绑定事件
btn.onclick=function(){
if(this.innerHTML=="解锁"){
this.innerHTML="锁定";
this.style.background='red';
}else{
this.innerHTML="解锁";
this.style.background='green';
}
}
</script>
</body>
方法2:普通函数
//给按钮绑定事件
btn.onclick=cilckBtn;
function cilckBtn(){
if(this.innerHTML=="解锁"){
this.innerHTML="锁定";
this.style.background='red';
}else{
this.innerHTML="解锁";
this.style.background='green';
}
}
3.鼠标事件
onfoucs
事件和onblur
事件
小案例:输入手机号码的文本框,鼠标获得焦点(输入时)文本框左边显示提示文字,输入完成后,检测手机号码是否为11位和纯数字,若是,文本框右边显示“对勾”,否则显示“叉号”。
<body>
<input type='text' id='phone' placeholder='请输入手机号码'>
<div class='tip' id='tip'>
<img src='right.png'>
</div>
<script>
//获取按钮
var phone = document.getElementById("phone");
//给文本框绑定事件
phone.onfocus=showTip;
function showTip(){
var tip = document.getElementById('tip');
tip.innerHTML='请输入11位手机号码';
tip.style.display='block';
}
phone.onblur=showImgTip;
function showImgTip(){
var phoneNumber = this.value;
var tip = document.getElementById('tip');
if(phoneNumber.length==11 && isNaN(phoneNumber)==false){
console.log("ok");
tip.innerHTML="<img src='right.png'>";
}else{
console.log("wrong");
tip.innerHTML="<img src='wrong.png'>";
}
}
</script>
</body>
3.1 onload事件
页面从上往下加载,若将js代码直接写在head里面,将会导致找不到DOM元素。使用window.onload事件即可。
格式:
window.onload=function(){
//JS代码
}
3.2 onchange事件
一般作用在select、单选框或复选框
上。
选中的值如何获取:this.value
3.3 其他鼠标事件
4.键盘事件与keyCode属性
document.onkeydown=function(event){
console.log(event.keyCode);
}
event代表事件的状态,如触发event对象的元素、鼠标的位置及状态等。
上一篇: RESTful API 设计
下一篇: Java学习笔记08