event事件
事件方法
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 //练习:输入框
onblur 元素失去焦点。 应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景:通常用于表单元素,当元素内容被改变时触发.(三级联动)
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开
onselect 文本被选中。
onsubmit 确认按钮被点击。
两种为元素附加事件属性的方式
<div onclick="alert(123)">点我呀</div> <p id="abc">试一试!</p> <script> var ele=document.getElementById("abc"); ele.onclick=function(){ alert("hi"); }; </script>
ondblclick & onfocus & onblur
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p ondblclick="alert(123)">ppppp</p> <input class="keyword" type="text" onfocus="func1()" onblur="func2()" value="请输入用户名"> <input type="text"> <script> function func1() { // console.log(111) 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> </body> </html>
onpress onkeydown
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="press" onkeydown="fun1(event)" onkeyup="fun2(event)" > <!--<input type="button" value="press2" onkeyup="fun2(event)">--> <script> function fun1(e) { console.log(456); alert(e.keyCode);//键盘按键对应的编码 } function fun2() { console.log(123) } </script> </body> </html>
onload方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function fun1() { var p=document.getElementById("id1") alert(p.nodeName); } // window.onload=function () { // var p=document.getElementById("id1") // alert(p.nodeName); // } </script> </head> <body onload="func1()"> //等同于上述 window.onload,HTML文件(或图片)加载完全后触发该方法 <p id="id1">hello p</p> </body> </html>
onmouse方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ height: 100px; background-color: #84a42b; width: 200px; } </style> </head> <body> <div onmousedown="down()" onmousemove="move()" >div1</div> <script> function down() { console.log("down"); //鼠标点击区域后 } function move() { console.log("move"); //鼠标在该区域内移动 } function out() { console.log("out"); //鼠标离开该区域后 } function over() { console.log("over");//鼠标进入该区域后 } </script> </body> </html>
onsubmit提交
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> //onsubmit必须在form标签中 //<...onsubmit="return check()"> check()函数 return false <form id="form" onsubmit="return check(event)"> <input type="text" name="username"> <input type="submit" value="submit"> </form> <script> function check(event) { alert("验证失败!"); //return false; event.preventDefault(); //阻止事件提交 } //第二种: var Form=document.getElementById("form"); Form.onsubmit=function (event) { alert(123); return false; // event.preventDefault(); }; </script> </body> </html>
事件绑定的两种方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> //事件绑定方式一 <div id="div1" onclick="func1()">hello duv <p class="ppp">hello p</p> </div> <script> //事件绑定方式二 var obj=document.getElementsByClassName("ppp")[0]; obj.onclick=function () { alert(123); } function func1(){ alert("func1") } </script> </body> </html>
阻止事件向下一级传递
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div1{ width: 300px; height: 200px; background-color: #84a42b; } #div2{ height: 100px; width: 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> </body> </html>
posted on 2018-01-02 23:48 JieFangZhe 阅读(226) 评论(0) 编辑 收藏 举报