HTML DOM Event(事件)
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。
1onclick // 当用户点击某个对象时调用的事件句柄。 2ondblclick // 当用户双击某个对象时调用的事件句柄。 3onfocus // 元素获得焦点。 4onblur // 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. 5onchange // 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动） 6onkeydown // 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. 7onkeypress // 某个键盘按键被按下并松开。 8onkeyup // 某个键盘按键被松开。 9onload // 一张页面或一幅图像完成加载。 10onmousedown // 鼠标按钮被按下。 11onmousemove // 鼠标被移动。 12onmouseout // 鼠标从某元素移开。 13onmouseover // 鼠标移到某元素之上。 14onmouseleave // 鼠标从元素离开 15onselect // 文本被选中。 16onsubmit // 确认按钮被点击。
onclick
1<div onclick="alert('hello')">点点点</div> 2<p id="abc">try and try</p> 3<script> 4 var ele=document.getElementById("abc"); 5 ele.onclick=function(){ 6 alert("world"); 7 }; 8</script> 9 10 11<div id="abc" onclick="func1(this)">事件绑定方式1</div> 12<div id="id123">事件绑定方式2</div> 13 14<script> 15 function func1(self){ 16 console.log(self.id) 17 } 18 19 var ele=document.getElementById("id123").onclick=function(){ 20 console.log(this.id); 21 } 22</script>
onload
onload 属性开发中 只给 body元素加. 这个属性的触发 标志着 页面内容被加载完成. 应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.
1<body onload="fun1()"> 2<p id="ppp">hello p</p> 3 <script> 4 function fun1(){ 5 var ele = document.getElementById("ppp"); 6 ele.onclick = function(){ 7 alert(123); 8 }; 9 } 10 </script> 11</body> 12 13 14<head> 15 <meta charset="UTF-8"> 16 <title>Title</title> 17 <script> 18 window.onload = function(){ 19 var p = document.getElementById("id1"); 20 alert(p.nodeName); 21 } 22 </script> 23</head> 24<body> 25<p id="id1">hello p</p> 26</body>
onfocus && onblur
1<input type="text" onfocus="func1()" onblur="func2()"> 2<script> 3 function func1(){ 4 console.log(111); 5 } 6 function func2(){ 7 console.log(222); 8 } 9</script> 10 11 12<input type="text" class="keyword" onfocus="func1()" onblur="func2()" value="请输入用户名"> 13<script> 14 function func1(){ 15 var ky = document.getElementsByClassName("keyword")[0]; 16 ky.value=""; 17 } 18 function func2(){ 19 var ky = document.getElementsByClassName("keyword")[0]; 20 if (ky.value.trim().length==0){ 21 ky.value="请输入用户名"; 22 } 23 } 24</script>
onkeydown && onkeyup
1<input type="button" value="press" onkeydown="fun1(event)"> 2<script> 3 function fun1(e){ 4 alert(e.keyCode); 5 } 6</script> 7 8 9<input type="button" value="press" onkeydown="fun1()" onkeyup="fun2()"> 10<script> 11 function fun1(e){ 12 console.log(456); 13 } 14 function fun2(){ 15 console.log(123) 16 } 17</script>
onmousedown && onmousemove && onmouseout && onmouseover
1<body> 2<div onmousedown="down()" onmousemove="move()" onmouseout="out()" onmouseover="over()">div1</div> 3</body> 4<script> 5 function down(){ 6 console.log("down"); 7 } 8 function move(){ 9 console.log("move"); 10 } 11 function out(){ 12 console.log("out"); 13 } 14 function over(){ 15 console.log("over"); 16 } 17</script>
onsubmit
是当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.
1<form onsubmit="return check()"> 2 <input type="text" name="username"> 3 <input type="submit" value="submit"> 4</form> 5<script> 6 function check(){ 7 alert("验证失败!") 8 return false; 9 } 10</script> 11 12 13<form onsubmit="check(event)"> 14 <input type="text" name="username"> 15 <input type="submit" value="submit"> 16</form> 17<script> 18 function check(event){ 19 alert("验证失败!") 20 event.preventDefault(); 21 } 22</script>
绑定事件的两种方式
1<div id="div1" onclick="func1()">hello div1 2 <p class="ppp">hello p</p> 3</div> 4<script> 5 var obj = document.getElementsByClassName("ppp")[0]; 6 obj.onclick = function(){ 7 alert("ppp"); 8 } 9 10 function func1(){ 11 alert("div1"); 12 } 13</script>
阻止事件向外层div传播
1 <style> 2 #div1{ 3 width: 300px; 4 height: 200px; 5 background-color: #84a42b; 6 } 7 8 #div2{ 9 width: 100px; 10 height: 100px; 11 background-color: rebeccapurple; 12 } 13 </style> 14</head> 15<body> 16<div id="div1" onclick="alert('div1')"> 17 <div id="div2" onclick="func1(event)"></div> 18</div> 19<script> 20 function func1(e){ 21 alert("div2"); 22 e.stopPropagation(); 23 } 24</script>
增删改查
1<div id="div1"> 2 <div id="div2">hello div2</div> 3 <p>hello p</p> 4</div> 5<input type="button" value="添加p" onclick="add()"> 6<input type="button" value="删除最底的元素" onclick="remove()"> 7<script> 8function remove(){ 9 var ele = document.getElementById("div1"); 10 var last_son = ele.lastElementChild; 11 ele.removeChild(last_son); 12} 13function add(){ 14 var ele = document.getElementById("div1"); 15 var son = document.createElement("p"); 16 son.innerHTML = "hello pppp"; 17 ele.appendChild(son); 18} 19</script> 20 21 22 son.innerHTML = "<b>hello pppp</b>"; // 以 HTML 方式修改文本，字体变粗 23 son.innerText = "<b>hello pppp</b>"; // 以纯文本方式修改文本
修改 css 属性
1<div id="div1">flish</div> 2<input type="button" onclick="changeBig()" value="big"> 3<input type="button" onclick="changeSmall()" value="small"> 4<script> 5 function changeBig(){ 6 var ele = document.getElementById("div1"); 7 ele.style.fontSize="30px"; 8 } 9 function changeSmall(){ 10 var ele = document.getElementById("div1"); 11 ele.style.fontSize="10px"; 12 } 13</script>
添加 class 操作
1<head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 .bigger{ 6 font-size: 34px; 7 } 8 </style> 9</head> 10<body> 11<div class="div1 div2" id="ID"> 12 hello 13 <div>hello2</div> 14 <p>hello p</p> 15</div> 16<script> 17 var ele = document.getElementById("ID"); 18 ele.classList.add("bigger"); 19</script>
javascript
1<a href="javascript:show()">hello</a> 2<script> 3 function show(){ 4 alert(121); 5 } 6</script>
this 当前触发的标签对象
1<div> 2 <div> 3 <div onclick="show(this)" alex="111" >hello</div> 4 <div onclick="show(this)" alex="222" >hello</div> 5 <div onclick="show(this)" alex="333" >hello</div> 6 <div onclick="show(this)" alex="444" >hello</div> 7 <div onclick="show(this)" alex="555" >hello</div> 8 </div> 9</div> 10<script> 11 function show(self){ 12 console.log(self.getAttribute("alex")); 13 } 14</script>