【知識點(diǎn)】
1裹粤、掌握什么是事件
2邑贴、掌握HTML事件
3、掌握DOM0級事件
4铃在、掌握常用的鼠標(biāo)與鍵盤事件
5阵具、掌握this的指向
一、什么是事件
事件就是文檔或?yàn)g覽器窗口中發(fā)生的一些特定的交互瞬間。
二怔昨、HTML事件
【語法】:
<tag 事件="執(zhí)行腳本"></tag>
【功能】:
在HTML元素上綁定事件。
【說明】:
執(zhí)行腳本可以是一個函數(shù)的調(diào)用宿稀。
為何不建議使用HTML事件趁舀?
三、DOM0級事件
【語法】:
ele.事件=執(zhí)行腳本
【功能】:
在DOM對象上綁定事件
【說明】:
執(zhí)行腳本可以是一個匿名函數(shù)祝沸,也可以是一個函數(shù)的調(diào)用矮烹。
案例1:鎖定-解鎖切換。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.lock{width: 140px;height: 30px;line-height: 30px;background:#00f;color: #fff;font-size: 14px;text-align: center;border-radius: 5px;cursor: pointer; margin-top: 30px;}
.unlock{width:140px;height:30px;line-height: 30px;background:#666;
color:#ccc;font-size:14px;text-align:center;border-radius:5px;
cursor:pointer;margin-top:30px;}
</style>
</head>
<body>
<div class="lock" id="btn">鎖定</div>
<script>
//獲取按鈕
var btn= document.getElementById("btn");
//給按鈕綁定事件罩锐,this是對該DOM元素的引用
btn.onclick=function(){
//判斷如果按鈕是鎖定奉狈,則顯示為解鎖,變?yōu)榛疑螅駝t顯示為鎖定仁期,變?yōu)樗{(lán)色
//方法一:
/*if(this.className=="lock"){
this.className="unlock";
this.innerHTML="解鎖";
}else{
this.className="lock";
this.innerHTML="鎖定";
}*/
//方法二:
if(this.innerHTML=="鎖定"){
this.className="unlock";
this.innerHTML="解鎖";
}else{
this.className="lock";
this.innerHTML="鎖定";
}
}
</script>
</body>
</html>
案例2:使用通過DOM獲取HTML元素的方式綁定事件實(shí)現(xiàn)全選--反選效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>全選和反選</title>
</head>
<body>
<input type="button" value="全選" id="btn">
<script type="text/javascript">
//獲取按鈕
var btn=document.getElementById("btn");
btn.onclick=function(){
if(this.value=="全選"){
this.value="反選";
}else{
this.value="全選";
}
}
</script>
</body>
</html>
四、鼠標(biāo)事件
- 案例·onload事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
//頁面加載時(shí)執(zhí)行
window.onload=function(){
//獲取box
var box= document.getElementById("box");
var clicked=function(){
alert("我被點(diǎn)擊了");
}
box.onclick=clicked;
}
</script>
<script>
//頁面加載是執(zhí)行
window.onload=function(){
var box=document.getElementById("box");
var clicked=function(){
alert("dj");
}
box.onclick=clicked;
}
</script>
</head>
<body>
<div id="box">這是一個DIV</div>
</body>
</html>
- onfocus事件可用有限:
nfocus事件只用于:
1.input標(biāo)簽type為text竭恬、password
2.textarea標(biāo)簽
- 案例:onfocus和onblur事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
padding: 50px;
}
.left,.top{
float: left;
}
.left{margin-right: 10px;}
.tip{display: none;font-size: 14px;}
</style>
<script>
window.onload=function(){
//獲取文本框和提示框
var phone=document.getElementById("phone"),
tip=document.getElementById("tip")
//給文本框綁定激活的事件
phone.onfocus=function(){
//讓tip顯示出來
tip.style.display="block";
}
//給文本框綁定失去焦點(diǎn)的事件
phone.onblur=function(){
//獲取文本框的值,value用于獲取表單元素的值
var phoneVal=this.value;
//判斷手機(jī)號碼是否是11位的數(shù)字
//如果輸入正確跛蛋,則顯示對號圖標(biāo),否則顯示錯號圖標(biāo)
if(phoneVal.length==11 && isNaN(phoneVal)==false){
tip.innerHTML="![](img/right.png)";
}else{
tip.innerHTML="![](img/error.png)";
}
}
}
</script>
</head>
<body>
<div class="box">
<div class="left">
<input type="text" id="phone" placeholder="請輸入手機(jī)號碼">
</div>
<div class="tip" id="tip">
請輸入有效的手機(jī)號碼
</div>
</div>
</body>
</html>
- onchange事件
onchange:域的內(nèi)容改變時(shí)發(fā)生
【說明】:一般用于select表單元素痊硕,或者單選按鈕radio赊级,復(fù)選框checkbox
【案例】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onchange事件案例</title>
<script>
//頁面加載
window.onload=init;
//初始化
function init(){
//獲取下拉菜單
var menu=document.getElementById("menu");
//給菜單綁定change事件,一般作用域select或checkbox或radio
menu.onchange=function(){
//獲取當(dāng)前選中的值
var bgcolor=this.value;
//如上也可寫作:
//var bgcolor=menu.options[menu.selectedIndex].value;
//設(shè)置body的背景色
//如果bgcolor為空,則將背景色設(shè)為白色。否則選擇對應(yīng)顏色
if(bgcolor==""){
document.body.style.background="#fff";
}else{
document.body.style.background=bgcolor;
}
}
}
</script>
</head>
<body>
<div class="box">
請選擇您喜歡的背景色:
<select name="" id="menu">
<option value="">請選擇</option>
<option value="#f00">紅色</option>
<option value="#0f0">綠色</option>
<option value="#00f">藍(lán)色</option>
<option value="#ff0">黃色</option>
<option value="#ccc">灰色</option>
</select>
</div>
</body>
</html>
onchange事件案例2:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>onchange()</title>
<style type="text/css">
#div{
width:300px;
height:300px;
border:2px solid gray;
margin:100px 0 0 200px;
}
</style>
<script type="text/javascript">
window.onload=function(){
//獲取下拉菜單
var color=document.getElementById("color");
var div=document.getElementById("div");
//給菜單綁定onchange事件
color.onchange=function(){
//獲取當(dāng)前選中的背景色
var bgcolor=this.value;
//獲取當(dāng)前選中的值
var txt=this.value;
//設(shè)置對應(yīng)div的背景色變化和文字變化
if(bgcolor=="0"){
div.style.background="#fff";
div.innerHTML="我沒有任何變化"
}else{
div.style.background=bgcolor;
div.innerHTML="我的背景顏色變成了"+txt+" 色";
}
}
}
</script>
</head>
<body>
<div>
<span>請選擇您喜歡的顏色:</span>
<select id="color">
<option value="0">請選擇</option>
<option value="yellow">黃色</option>
<option value="orange">橘色</option>
<option value="pink">粉色</option>
<option value="purple">紫色</option>
</select>
</div>
<div id="div">我是div</div>
</body>
</html>
- 1/ onsubmit表單中的確認(rèn)按鈕點(diǎn)擊時(shí)發(fā)送
【說明】:onsubmit事件不是加在按鈕上理逊,而是表單上。
- 2/ onmousedown和onmouseup成就了onclick事件
onmousedown:鼠標(biāo)按鈕在元素上按下時(shí)觸發(fā)
onmouseup:在元素上松開鼠標(biāo)按鈕時(shí)觸發(fā)
<script>
var box=document.getElementById("box");
// 綁定按下的事件
box.onmousedown=function(){
console.log("我被按下了");
}
// 綁定移動的事件
box.onmousemove=function(){
console.log("我被移動了");
}
// 綁定松開的事件
box.onmouseup=function(){
console.log("我被松開了");
}
// 綁定點(diǎn)擊的事件
box.onclick=function(){
console.log("我被點(diǎn)擊了");
}
// 瀏覽器窗口尺寸發(fā)生改變時(shí)
window.onresize=function(){
console.log("我的尺寸被改變了");
}
// 拖動滾動條
window.onscroll=function(){
console.log("我被拖動了");
}
box.onscroll=function(){
console.log("我是DIV的滾動條");
}
</script>
五盒揉、鍵盤事件與keyCode屬性
鍵盤事件案例:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.text span{font-weight:bold;color:#f00;}
em{font-style:normal;}
b{font-weight:normal;}
</style>
</head>
<body>
<div>
<p class="text">
<b id="showcount">您還可以輸入</b>
<span id="totalbox"><em id="count">30</em>/30</span>
</p>
<div class="input">
<textarea name="" id="text" cols="70" rows="4"></textarea>
</div>
</div>
<script>
// 獲取文本框及其他元素
var text=document.getElementById("text");
var total=30;
var count=document.getElementById("count");
var showcount=document.getElementById("showcount");
var totalbox=document.getElementById("totalbox");
// 綁定鍵盤事件
document.onkeyup=function(){
// 獲取文本框值的長度
var len=text.value.length;
// 計(jì)算可輸入的剩余字符
var allow=total-len;
var overflow=len-total;
// 如果allow小于0
if(allow<0){
showcount.innerHTML="您已超出"+overflow;
totalbox.innerHTML='';
}else{
showcount.innerHTML='您還可以輸入';
totalbox.innerHTML='<em id="count">'+allow+'</em>/30';
}
}
</script>
</body>
</html>
六晋被、關(guān)于this指向
在事件觸發(fā)的函數(shù)中,this是對該DOM對象的引用刚盈。
七墨微、包含事件的函數(shù)調(diào)用無括號
【注意】:
本筆記學(xué)習(xí)整理自慕課網(wǎng)