使用ID獲取元素對象
document.getElementById( “ID” );：返回文檔中一個指定ID的元素對象，用於精確獲取；若找到則返回該元素對象，否則返回null
獲取或設置元素內容
元素對象.innerText = “文本”：返回或設置標籤內的文本值，不包含HTML標籤
<div id="zxw">id選擇器</div>
<script>
var zxw = document.getElementById("zxw");
alert(zxw);//獲取
zxw.innerText = "設置新內容";
</script>
元素對象.innerHTML= “文本”：返回或設置標籤內的HTML內容，包含HTML標籤
<div id="zxw">id選擇器</div>
<script>
var zxw = document.getElementById("zxw");
alert(zxw);//獲取
zxw.innerText = "<b>設置新內容</b>";
</script>
獲取或設置元素屬性
元素對象.屬性名 = “屬性值”;：獲取或設置元素屬性
<input type="text" id="zxw" value="設置元素屬性">
<script>
var zxw = document.getElementById("zxw");
// 獲取元素屬性
alert(zxw.id);
alert(zxw.type);
alert(zxw.value);
// 設置元素屬性
zxw.type = "button";
zxw.value = "按鈕";
// 添加元素屬性
zxw.title = "我是添加的屬性";
</script>
通用方法獲取或設置元素屬性
元素對象.getAttribute(“屬性名”)：獲取元素指定的屬性元素對象.setAttribute(“屬性名”, “屬性值”)：設置元素指定屬性的值元素對象.removeAttribute()：移除元素指定的屬性
<input type="text" id="zxw" class="ZZ" value="設置元素屬性" abc="111">
<script>
var z = document.getElementById("zxw");
// 獲取任意屬性
alert(z.getAttribute("abc"));
alert(z.getAttribute("class"));
alert(z.getAttribute("value"));
// 設置元素屬性
z.setAttribute("type", "button");
z.setAttribute("value", "按鈕");
// 添加元素屬性
z.setAttribute("title", "新添加的屬性");
// 移除元素屬性
z.onclick = function(){
z.removeAttribute("value");
}
</script>
獲取或設置元素行內樣式
元素對象.style.屬性名 = “屬性值”：獲取或設置元素行內樣式
<div id="z" style="color: red; font-size: 24px;">獲取和設置元素行內樣式</div>
<script>
var z = document.getElementById("z");
//方式一：獲取元素行內樣式
// alert(z.style.cssText);
// 方式一：設置元素行內樣式,會對行內樣式重置
// z.style.cssText = "color:blue; font-size:50px;"
// 方式二：獲取元素行內某個樣式
alert(z.style.color);
// 方式二：設置元素行內某個樣式
// 當行內樣式中的屬性名有"-"的，應使用駝峯命名法
z.style.color = "blue";
z.style.fontSize = "50px";
</script>
添加或刪除元素類名
元素對象.classList.add(“類名1”, “類名2”);：添加元素類名
元素對象.classList.remove(“類名1”, “類名2”);：刪除元素類名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<style type="text/css">
.cz1{color: black; font-size: 16px;}
.cz2{color: red; font-size: 24px;}
.cz3{width: 200px; height: 100px; border: 2px solid black;}
</style>
</head>
<body>
<div id="z" class="cz1">添加和刪除元素類名</div>
<script>
var z = document.getElementById("z");
// 添加元素類名
z.classList.add("cz2", "cz3");
// 刪除元素類名
z.classList.remove("cz2", "cz3");
</script>
</body>
</html>
元素類名的切換
元素對象.toggle(“類名”)：元素類名的切換
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<style type="text/css">
.cz1{color: black; font-size: 16px;}
.cz2{color: red; font-size: 24px;}
</style>
</head>
<body>
<div id="z" class="cz1">添加和刪除元素類名</div>
<script>
var z = document.getElementById("z");
// toggle在有相同類名時執行刪除，沒有相同類名時執行添加
z.classList.toggle("cz2");
// 強制執行添加或刪除
// 參數爲true時，執行添加
// 參數爲false時，執行刪除
z.classList.toggle("cz2", true);
</script>
</body>
</html>
使用類名獲取元素對象
document.getElementsByClassName(“類名”);：返回文檔中所有指定類名的一組元素，而不是一個元素；可以把它當做數組進行處理
<div id="z1" class="cz1">使用類名獲取元素1</div>
<div id="z2" class="cz1">使用類名獲取元素2</div>
<div id="z3" class="cz1">使用類名獲取元素3</div>
<div id="z4" class="cz1">使用類名獲取元素4</div>
<div id="z5" class="cz1">使用類名獲取元素5</div>
<script>
// 返回文檔中所有指定類名的一組元素，而不是一個元素
// 可以把它當做數組進行處理
var z = document.getElementsByClassName("cz1");
// console.log(z);
// 給某個元素設置樣式
z[0].style.color = "red";
z[2].style.color = "green";
</script>
使用標籤或name屬性獲取元素對象
document.getElementsByTagName(“標籤名”);：返回文檔中所有指定標籤的一組元素，而不是一個元素；可以把它當做數組進行處理
<div id="z1">使用標籤獲取元素1</div>
<p id="z2">使用標籤獲取元素2</p>
<div id="z3">使用標籤獲取元素3</div>
<p id="z4">使用標籤獲取元素4</p>
<div id="z5">使用標籤獲取元素5</div>
<script>
var z = document.getElementsByTagName("p");
z[0].style.color = "red";
z[1].style.color = "blue";
</script>
document.getElementsByName("標籤名");：返回文檔中所有指定Name的一組元素，而不是一個元素；可以把它當做數組進行處理
<div id="z1" name = "cz">使用name獲取元素1</div>
<p id="z2">使用name獲取元素2</p>
<div id="z3" name = "cz">使用name獲取元素3</div>
<p id="z4">使用name獲取元素4</p>
<div id="z5" name = "cz">使用name獲取元素5</div>
<script>
var z = document.getElementsByName("cz")
z[0].style.color = "blue";
z[1].style.color = "red";
z[2].style.color = "orange";
</script>
使用CSS選擇器獲取元素對象
document.querySelectorAll(“css選擇器”);：返回文檔中匹配指定css選擇器的所有元素
document.querySelector(“css選擇器”);：返回文檔中匹配指定css選擇器的第一個元素
<p class="zzz">使用css選擇器獲取元素0</p>
<div id="z1" class="zzz">
<p class="zzz">使用css選擇器獲取元素2</p>
<div class="zzz">使用css選擇器獲取元素3</div>
<p class="zzz">使用css選擇器獲取元素4</p>
<div class="zzz">使用css選擇器獲取元素5</div>
</div>
<script>
var z = document.querySelectorAll("#z1 p");
for (var i = 0; i < z.length; i++){
z[i].style.color = "red";
}
var z = document.querySelector("#z1 p");
z.style.color = "blue";
</script>
事件
描述
-
事件是在一些特定的動作發生時所發出的信號，JavaScript中的事件是可以被JavaScript偵測到的行爲
-
網頁中的每個元素都可以產生某些事件。比方說，我們可以在用戶點擊某些按鈕時產生一個onClick事件來觸發某個函數
-
事件可以是瀏覽器行爲，也可以是用戶行爲
事件綁定
方式一： 行內綁定，在開始標籤中綁定，把事件當作元素屬性
語法：事件名 = “執行的函數()”
缺點：結構+樣式+行爲都綁定在同一個標籤中，不利於後期維護
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<style type="text/css">
#zzz{
width: 500px; height: 300px;
background: red; margin: 0 auto;
color: white; font-size: 30px;
}
</style>
<script>
function abc(){
document.getElementById("zzz").innerHTML = Math.random();
}
</script>
</head>
<body>
<div id="zzz" onclick="abc()"></div>
</body>
</html>
方式二： 動態綁定
語法：對象.事件 = 匿名函數（匿名函數中是要執行的函數）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<style type="text/css">
#zzz{
width: 500px; height: 300px;
background: red; margin: 0 auto;
color: white; font-size: 30px;
}
</style>
<script>
window.onload = function(){
var zzz = document.getElementById("zzz");
zzz.onclick = function(){
zzz.innerHTML = Math.random();
}
}
</script>
</head>
<body>
<div id="zzz"></div>
</body>
</html>
方式三： 事件監聽
語法：對象.addEventListenter(事件名（字符串）， 執行函數，布爾值（可選）);：添加事件
語法：對象.removeEventListenter(事件名（字符串）， 執行函數，布爾值（可選）);：移除事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<style type="text/css">
#zzz{
width: 500px; height: 300px;
background: red; margin: 0 auto;
color: white; font-size: 30px;
}
</style>
<script>
function sjs(){
document.getElementById("zzz").innerHTML = Math.random();
}
function sc(){
document.getElementById("zzz").removeEventListener("mousemove", sjs);
}
window.onload = function(){
document.getElementById("zzz").addEventListener("mousemove",sjs);
document.getElementById("zzz").addEventListener("click",sc);
}
</script>
</head>
<body>
<div id="zzz"></div>
</body>
</html>
事件處理函數
鼠標事件
- onclick：鼠標點擊對象事件（當return事件函數，事件函數返回的是true時，將繼續操作；當返回是false時，將中斷操作）
- ondblclick：鼠標雙擊對象事件
- onmousedown：鼠標按下對象事件
- onmouseup：鼠標鬆開對象事件
- onmousemove：鼠標移動對象事件
- mouseover：鼠標移入對象事件
- mouseout：鼠標移出對象事件
- contextmenu：鼠標右鍵單擊事件
<!-- 事件處理函數 -->
<div id="div1"></div><br>
<input type="button" id="btn1" value="myFun1" ondblclick="myFun1()">
<input type="button" id="btn2" value="myFun2" >
<input type="button" id="btn3" value="myFun2">
<script>
var div1 = document.getElementById("div1");
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
function myFun1(){
div1.innerHTML = "鼠標雙擊事件";
div1.style.border = "5px solid blue";
}
function myFun2(){
div1.innerHTML = "鼠標按下事件";
div1.style.border = "5px solid blue";
}
function myFun3(){
div1.innerHTML = "鼠標鬆開事件";
div1.style.background = "orange";
div1.style.border = "5px solid green";
}
function myFun4(){
div1.innerHTML = "鼠標移入事件";
div1.style.border = "5px solid blue";
}
function myFun5(){
div1.innerHTML = "鼠標移出事件";
div1.style.border = "5px solid green";
}
function myFun67(){
div1.innerHTML = "在div中點擊了右鍵";
div1.style.background = "blue";
}
//鼠標按下事件
div1.onmousedown = myFun2;
//鼠標鬆開事件
div1.onmouseup = myFun3;
//鼠標移入事件
div1.addEventListener("mouseover", myFun4);
//鼠標移出事件
div1.addEventListener("mouseout", myFun5);
//鼠標在div中右鍵
// div1.addEventListener("contextmenu", myFun6);
div1.addEventListener("contextmenu", function(){
div1.innerHTML = "在div中點擊了右鍵";
div1.style.background = "blue";
});
</script>
鍵盤事件
- onkeydown：某個鍵盤按鍵按下
- onkeyup：某個鍵盤按鍵鬆開
- onkeypress：某個鍵盤按鍵被按下並鬆開
- onkeydown與onkeypress的區別
1、一個放開一個沒有放開，onkeydown先於onkeypress發送
2、我們每敲擊一下鍵盤這三個事件會依次發生：onkeydown–onkeypress–onkeyup
3、onkeypress事件不適用於系統按鍵（如：Alt、Ctrl、Shift、ESC）
4、onkeydown：是在用戶按下任何鍵盤鍵時發生。監聽一個用戶是否按下按鍵請用onkeydown事件，所有瀏覽器都支持onkeydown
5、鍵盤事件的event對象中包含一個keyCode和charCode屬性，onkeydown和onkeyup表示你按下的具體的鍵，通過keyCode返回ASCII碼；而onkeypress表示你按下的字符，識別大小寫字母，通過charCode返回Unicode碼
剪貼板事件
- onpaste：事件在用戶向元素中粘貼文本時觸發
- oncopy：事件在用戶拷貝元素上的內容時觸發
- oncut：事件在用戶剪切元素內容時觸發
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>禁止複製和粘貼</title>
</head>
<body>
<form action="" name="myForm">
<p><input type="text" name="copy" value="禁止複製和粘貼"></p>
<p><input type="text" name="paste"></p>
</form>
<script>
var noCopy = document.forms["myForm"].copy;
noCopy.oncopy = function(){
alert("該內容禁止複製！");
return false;//false爲阻止複製
}
noCopy.onpaste = function(){
alert("禁止粘貼內容！");
return false;
}
</script>
</body>
</html>
其他事件
- onload：一個頁面或一幅圖像完成加載後，執行某事件
- onunload：用戶退出頁面後，執行某事件
- onabort：圖像的加載被中斷，執行某事件
- onblur：元素失去焦點，執行某事件
- onfocus：元素獲得焦點，執行某事件
- onchange：域的內容被改變，執行某事件
- onerror：在加載文檔或圖像時發生錯誤，執行某事件
- onselect：文本被選中，執行某事件
- onreset：重置按鈕被點擊後，執行某事件
- onscroll：當文檔被滾動時，執行某事件
事件的對象
在觸發某個事件時，會產生一個事件對象event。這個對象中包含着所有與事件有關的信息。包括導致事件的元素，事件的類型以及其他與特定事件相關的信息
-
type：獲取事件類型
-
target：獲取事件目標來源（某標籤）
-
clientX：返回當事件觸發時，鼠標指針在瀏覽器內的水平座標
-
clientY：返回當事件觸發時，鼠標指針在瀏覽器內的垂直座標
-
screenX：返回當事件觸發時，鼠標指針在屏幕內的水平座標
-
screenY：返回當事件觸發時，鼠標指針在屏幕內的垂直座標
-
offsetX：返回當事件觸發時，鼠標指針在元素內的X座標
-
offsetY：返回當事件觸發時，鼠標指針在元素內的Y座標
-
keyCode：事件屬性，返回按下鍵盤字符的Unicode編碼，在火狐瀏覽器的onkeypress事件中無效
-
which：返回onkeypress事件觸發的鍵的值的字符代碼，或者onkeydown或onkeyup事件的鍵的代碼；注：在不兼容情況下可使用var x = event.which || event.keyCode;
-
ctrlKey：返回當事件觸發時，“Ctrl”是否被按下
-
altKey：返回當事件觸發時，“Alt”是否被按下
-
shiftKey：返回當事件觸發時，“Shift”是否被按下
-
button：返回當事件觸發時，哪個鼠標按鈕被點擊
1、button：事件屬性可返回一個整數，指示當事件被觸發時哪個鼠標按鍵被點擊
2、event.button = 0 | 1 |
3、0、1、2 分別代表左中右三個鍵，但是在IE裏左中右三個鍵對應的數字爲1 4 2 -
scrollLeft：設置或返回區位於對象左邊界和窗口中目前可見內容的最左端之間的距離（就是滾動條離左邊界的距離）
-
scrollTop：設置或返回滾動條離最頂端之間的距離
-
scrollHeight：獲取對象的滾動高度
-
scrollwidth：獲取對象的滾動寬度
1、document.documentElement.scrollTop || document.body.scrollTop垂直方向滾動的值
事件的冒泡和捕獲
-
事件的冒泡：事件按照從最特定的事件目標到最不特定的事件目標的順序觸發
1、事件冒泡可以形象地比喻爲一顆石頭投入水中，泡泡會一直從水底冒出水面，也就是說，事件會從最內層的元素開始發生，一直向上傳播，直到document對象 -
事件的捕獲：與事件冒泡相反，事件會從最外層開始發生，直到最具體的元素
1、事件捕獲時，父級元素先觸發，子級元素後觸發 -
可以自己選擇綁定事件時採用事件捕獲還是事件冒泡，方法就是綁定事件時通過addEventListener函數，它有三個參數，第三個參數若是true，則表示採用事件捕獲，若是false，則表示採用事件冒泡
-
不是所有事件都能冒泡，例如：blur、focus、load、unload
-
stopPropagation()：阻止事件冒泡
-
preventDefault()：阻止事件的默認行爲
this的應用
在事件中this指向當前正在操作的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<style type="text/css">
.zzz{
width: 200px; height: 200px; float: left;
background: red; margin-left: 10px;
}
</style>
<script>
window.onload = function(){
var zzz = document.getElementsByClassName("zzz");
for (var i = 0; i < zzz.length; i++){
zzz[i].onclick = function(){
// 在事件中this指向當前正在操作的元素
this.style.background = "green";
}
}
}
</script>
</head>
<body>
<div class="zzz"></div>
<div class="zzz"></div>
<div class="zzz"></div>
<div class="zzz"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<style type="text/css">
.zzz{
width: 200px; height: 200px; float: left;
background: red; margin-left: 10px;
}
</style>
<script>
function abc(a){
a.style.background = "green";
a.style.height = "300px";
}
window.onload = function(){
var zzz = document.getElementsByClassName("zzz");
for (var i = 0; i < zzz.length; i++){
zzz[i].onclick = function(){
// 在事件中this指向當前正在操作的元素
abc(this);
}
}
}
</script>
</head>
<body>
<div class="zzz"></div>
<div class="zzz"></div>
<div class="zzz"></div>
<div class="zzz"></div>
</body>
</html>
事件監聽會自動轉入正在操作的元素對象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<style type="text/css">
.zzz{
width: 200px; height: 200px; float: left;
background: red; margin-left: 10px;
}
</style>
<script>
function abc(){
this.style.background = "green";
this.style.height = "300px";
}
window.onload = function(){
var zzz = document.getElementsByClassName("zzz");
// 事件監聽會自動傳入正在操作的元素對象
for (var i = 0; i < zzz.length; i++){
zzz[i].addEventListener("click", abc);
}
}
</script>
</head>
<body>
<div class="zzz"></div>
<div class="zzz"></div>
<div class="zzz"></div>
<div class="zzz"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<style type="text/css">
.zzz{
width: 200px; height: 200px; float: left;
background: red; margin-left: 10px;
}
</style>
<script>
function abc(a){
a.style.background = "green";
a.style.height = "300px";
}
</script>
</head>
<body>
<!-- 事件會自動轉入正在操作的元素對象 -->
<div class="zzz" onclick="abc(this)"></div>
<div class="zzz" onclick="abc(this)"></div>
<div class="zzz" onclick="abc(this)"></div>
<div class="zzz" onclick="abc(this)"></div>
</body>
</html>