JavaScript 基礎(四) -
阿新 • • 發佈:2019-01-28
鍵盤 tde 方法 elf 文本 keypress load blur 失去
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>
JavaScript 基礎(四) -