<style> #d1{ 200px;height: 200px;background: red;} #d2{ 200px;height: 200px;background: yellow;display: none;} </style> <script type="text/javascript"> //绑定html元素方式 function test1(){ alert("这是绑定html元素的方式"); } //绑定dom的方式 function test2(){ alert("这是绑定dom的方式"); } //添加一个页面加载完成执行 window.onload=function(){ //获取按钮来执行test2函数 var button=document.getElementById("test2"); //给按钮添加监听 button.onclick=test2; } /*更换*/ function over(){ //获取id为d2的元素 var d2=document.getElementById("d2"); //设置d2的元素显示 d2.style.display="block"; } function out(){ //获取id为d2的元素 var d2=document.getElementById("d2"); //设置d2的元素显示 d2.style.display="none"; } </script> </head> <body> <a href="https://www.baidu.com/" >点击我</a> <input type="button" value="测试1" id="mytest1" onClick="test1()"> <button type="button" id="test2"><b>测试2</b></button> <div id="d1" onMouseOver="over()" onMouseOut="out()"></div> <div id="d2"></div> </body>
这是最普通的一个点击出现下拉滑块。
其中比较常用的事件是
常见的事件类型：
|
onclick |
单击鼠标左键触发 |
|
ondblclick |
双击鼠标左键触发 |
|
onmousedown |
单击任意一个鼠标按键时触发 |
|
onmouseout |
鼠标指针移出一个元素边界时触发 |
|
onmousemove |
鼠标在某个元素上移动时持续触发 |
|
onmouseup |
松开鼠标任意一个按键时触发 |
|
onmouseover |
鼠标指针移到一个元素上时触发 |
常用的键盘事件：
|
onkeydown |
按下键盘上某个按键时触发，一直按会持续触发 |
|
onkeyup |
释放某个按键时触发 |
|
onkeypress |
按下某个按键并产生字符时触发，忽略shift等功能键 |
HTML事件：
|
onload |
页面完全加载后在window对象上触发 window.onload=function（）{ }页面加载完成的常用语句 |
|
onunload |
页面完全卸载后再window对象上触发 |
|
onselect |
选择了文本框的一个或多个字符时触发 |
|
onchange |
文本框失去焦点时，并且在它获取焦点后内容发生过改变时触发 |
|
onsubmit |
单击“提交”按钮时在表单form上触发 |
|
onfocus |
任何元素或窗口获得焦点时触发 当鼠标移入表单 |
|
onblur |
任何元素或窗口失去焦点时触发 当鼠标移出表单 |