html 4.0 的新特性之一是有能力使 html 事件触发浏览器中的动作(action),比如当用户点击某个 html 元素时启动一段 javascript。下面是一个属性列表,这些属性可插入 html 标签来定义事件动作。
onclick // 当用户点击某个对象时调用的事件句柄。 ondblclick // 当用户双击某个对象时调用的事件句柄。 onfocus // 元素获得焦点。 onblur // 元素失去焦点。 应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange // 域的内容被改变。 应用场景:通常用于表单元素,当元素内容被改变时触发.(三级联动) onkeydown // 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress // 某个键盘按键被按下并松开。 onkeyup // 某个键盘按键被松开。 onload // 一张页面或一幅图像完成加载。 onmousedown // 鼠标按钮被按下。 onmousemove // 鼠标被移动。 onmouseout // 鼠标从某元素移开。 onmouseover // 鼠标移到某元素之上。 onmouseleave // 鼠标从元素离开 onselect // 文本被选中。 onsubmit // 确认按钮被点击。
<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 属性开发中 只给 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>
<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>
<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>
<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>
是当表单在提交时触发. 该属性也只能给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>
<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>"; // 以纯文本方式修改文本
<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>
<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 好题汇总分享(持续更新,看到好题就写)
XMLHttpRequest 2级 &&进度事件&&JSONP
使用递归原生实现拷贝&&最简单的方法实现深拷贝
网友评论