HTML DOM Event(事件)
HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動作（action），比如當使用者點選某個 HTML 元素時啟動一段 JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標籤來定義事件動作。
onclick // 當使用者點選某個物件時呼叫的事件控制程式碼。
ondblclick // 當使用者雙擊某個物件時呼叫的事件控制程式碼。
onfocus // 元素獲得焦點。
onblur // 元素失去焦點。 應用場景：用於表單驗證,使用者離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.
onchange // 域的內容被改變。 應用場景：通常用於表單元素,當元素內容被改變時觸發.（三級聯動）
onkeydown // 某個鍵盤按鍵被按下。 應用場景: 當使用者在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress // 某個鍵盤按鍵被按下並鬆開。
onkeyup // 某個鍵盤按鍵被鬆開。
onload // 一張頁面或一幅影像完成載入。
onmousedown // 滑鼠按鈕被按下。
onmousemove // 滑鼠被移動。
onmouseout // 滑鼠從某元素移開。
onmouseover // 滑鼠移到某元素之上。
onmouseleave // 滑鼠從元素離開
onselect // 文字被選中。
onsubmit // 確認按鈕被點選。onclick
<div onclick="alert(`hello`)">點點點</div>
<p id="abc">try and try</p>
<script>
var ele=document.getElementById("abc");
ele.onclick=function(){
alert("world");
};
</script><div id="abc" onclick="func1(this)">事件繫結方式1</div>
<div id="id123">事件繫結方式2</div>
<script>
function func1(self){
console.log(self.id)
}
var ele=document.getElementById("id123").onclick=function(){
console.log(this.id);
}
</script>onload
onload 屬性開發中 只給 body元素加.
這個屬性的觸發 標誌著 頁面內容被載入完成.
應用場景: 當有些事情我們希望頁面載入完立刻執行,那麼可以使用該事件屬性.
<body onload="fun1()">
<p id="ppp">hello p</p>
<script>
function fun1(){
var ele = document.getElementById("ppp");
ele.onclick = function(){
alert(123);
};
}
</script>
</body><head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function(){
var p = document.getElementById("id1");
alert(p.nodeName);
}
</script>
</head>
<body>
<p id="id1">hello p</p>
</body>onfocus && onblur
<input type="text" onfocus="func1()" onblur="func2()">
<script>
function func1(){
console.log(111);
}
function func2(){
console.log(222);
}
</script><input type="text" class="keyword" onfocus="func1()" onblur="func2()" value="請輸入使用者名稱">
<script>
function func1(){
var ky = document.getElementsByClassName("keyword")[0];
ky.value="";
}
function func2(){
var ky = document.getElementsByClassName("keyword")[0];
if (ky.value.trim().length==0){
ky.value="請輸入使用者名稱";
}
}
</script>onkeydown && onkeyup
<input type="button" value="press" onkeydown="fun1(event)">
<script>
function fun1(e){
alert(e.keyCode);
}
</script><input type="button" value="press" onkeydown="fun1()" onkeyup="fun2()">
<script>
function fun1(e){
console.log(456);
}
function fun2(){
console.log(123)
}
</script>onmousedown && onmousemove && onmouseout && onmouseover
<body>
<div onmousedown="down()" onmousemove="move()" onmouseout="out()" onmouseover="over()">div1</div>
</body>
<script>
function down(){
console.log("down");
}
function move(){
console.log("move");
}
function out(){
console.log("out");
}
function over(){
console.log("over");
}
</script>onsubmit
是當表單在提交時觸發. 該屬性也只能給form元素使用.應用場景: 在表單提交前驗證使用者輸入是否正確.如果驗證失敗.在該方法中我們應該阻止表單的提交.
<form onsubmit="return check()">
<input type="text" name="username">
<input type="submit" value="submit">
</form>
<script>
function check(){
alert("驗證失敗!")
return false;
}
</script><form onsubmit="check(event)">
<input type="text" name="username">
<input type="submit" value="submit">
</form>
<script>
function check(event){
alert("驗證失敗!")
event.preventDefault();
}
</script>繫結事件的兩種方式
<div id="div1" onclick="func1()">hello div1
<p class="ppp">hello p</p>
</div>
<script>
var obj = document.getElementsByClassName("ppp")[0];
obj.onclick = function(){
alert("ppp");
}
function func1(){
alert("div1");
}
</script>阻止事件向外層div傳播
<style>
#div1{
width: 300px;
height: 200px;
background-color: #84a42b;
}
#div2{
width: 100px;
height: 100px;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div id="div1" onclick="alert(`div1`)">
<div id="div2" onclick="func1(event)"></div>
</div>
<script>
function func1(e){
alert("div2");
e.stopPropagation();
}
</script>增刪改查
<div id="div1">
<div id="div2">hello div2</div>
<p>hello p</p>
</div>
<input type="button" value="新增p" onclick="add()">
<input type="button" value="刪除最底的元素" onclick="remove()">
<script>
function remove(){
var ele = document.getElementById("div1");
var last_son = ele.lastElementChild;
ele.removeChild(last_son);
}
function add(){
var ele = document.getElementById("div1");
var son = document.createElement("p");
son.innerHTML = "hello pppp";
ele.appendChild(son);
}
</script> son.innerHTML = "<b>hello pppp</b>"; // 以 HTML 方式修改文字，字型變粗
son.innerText = "<b>hello pppp</b>"; // 以純文字方式修改文字修改 css 屬性
<div id="div1">flish</div>
<input type="button" onclick="changeBig()" value="big">
<input type="button" onclick="changeSmall()" value="small">
<script>
function changeBig(){
var ele = document.getElementById("div1");
ele.style.fontSize="30px";
}
function changeSmall(){
var ele = document.getElementById("div1");
ele.style.fontSize="10px";
}
</script>新增 class 操作
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bigger{
font-size: 34px;
}
</style>
</head>
<body>
<div class="div1 div2" id="ID">
hello
<div>hello2</div>
<p>hello p</p>
</div>
<script>
var ele = document.getElementById("ID");
ele.classList.add("bigger");
</script>javascript
<a href="javascript:show()">hello</a>
<script>
function show(){
alert(121);
}
</script>this 當前觸發的標籤物件
<div>
<div>
<div onclick="show(this)" alex="111" >hello</div>
<div onclick="show(this)" alex="222" >hello</div>
<div onclick="show(this)" alex="333" >hello</div>
<div onclick="show(this)" alex="444" >hello</div>
<div onclick="show(this)" alex="555" >hello</div>
</div>
</div>
<script>
function show(self){
console.log(self.getAttribute("alex"));
}
</script>