一、注册事件
有两种方式：（一）直接在标签中添加，（二）直接在JS代码中添加，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>event</title> </head> <body> <div>关于事件的注册方式，有两种</div> <div>方式一：直接在标签中添加：</div> <div onmouseover="Cred(this);" onmouseout="Cblue(this);">注册事件方式一，见标签</div> <hr /> <div>方式二：在JS代码中注册</div> <div id="f2">请重点关注JS代码</div> <script> //注册方式一 function Cred(ths){ ths.style.color = "red"; }; function Cblue(ths){ ths.style.color = "blue"; }; //注册方式二 function F(){ console.log("单击"); }; var node = document.getElementById("f2"); node.onclick = F; </script> </body> </html>
二、事件内容
常用的事件有：onclick、ondblclick、onscroll、onmouseover、onmouseout、onkeydown、onkeyup，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>eventList</title> </head> <body> <table cellspacing="0" bordercolordark="white" cellpadding="2" align="center" bordercolorlight="black" border="1"> <tbody> <tr> <td align="middle" colspan="4"><b><font color="red">javascript事件列表解说</font></b></td> </tr> <tr> <td align="middle" colspan="2">事件</td> <td align="middle" width="85">浏览器支持</td> <td align="middle" width="348">解说</td> </tr> <tr> <td width="12" rowspan="10">一般事件</td> <td width="131">onclick</td> <td width="85">IE3、N2 </td> <td width="348">鼠标点击时触发此事件</td> </tr> <tr> <td width="131">ondblclick</td> <td width="85">IE4、N4 </td> <td width="348">鼠标双击时触发此事件</td> </tr> <tr> <td width="131">onmousedown</td> <td width="85">IE4、N4 </td> <td width="348">按下鼠标时触发此事件</td> </tr> <tr> <td width="131">onmouseup</td> <td width="85">IE4、N4 </td> <td width="348">鼠标按下后松开鼠标时触发此事件</td> </tr> <tr> <td width="131">onmouseover</td> <td width="85">IE3、N2 </td> <td width="348">当鼠标移动到某对象范围的上方时触发此事件</td> </tr> <tr> <td width="131">onmousemove</td> <td width="85">IE4、N4 </td> <td width="348">鼠标移动时触发此事件</td> </tr> <tr> <td width="131">onmouseout</td> <td width="85">IE4、N3</td> <td width="348">当鼠标离开某对象范围时触发此事件</td> </tr> <tr> <td width="131">onkeypress</td> <td width="85">IE4、N4 </td> <td width="348">当键盘上的某个键被按下并且释放时触发此事件.</td> </tr> <tr> <td width="131">onkeydown</td> <td width="85">IE4、N4 </td> <td width="348">当键盘上某个按键被按下时触发此事件</td> </tr> <tr> <td width="131">onkeyup</td> <td width="85">IE4、N4 </td> <td width="348">当键盘上某个按键被按放开时触发此事件</td> </tr> <tr> <td width="12" rowspan="9">页面相关事件</td> <td width="131">onabort</td> <td width="85">IE4、N3 </td> <td width="348">图片在下载时被用户中断</td> </tr> <tr> <td width="131">onbeforeunload</td> <td width="85">IE4、N </td> <td width="348">当前页面的内容将要被改变时触发此事件</td> </tr> <tr> <td width="131">onerror</td> <td width="85">IE4、N3 </td> <td width="348">出现错误时触发此事件</td> </tr> <tr> <td width="131">onload</td> <td width="85">IE3、N2 </td> <td width="348">页面内容完成时触发此事件</td> </tr> <tr> <td width="131">onmove</td> <td width="85">IE、N4 </td> <td width="348">浏览器的窗口被移动时触发此事件</td> </tr> <tr> <td width="131">onresize</td> <td width="85">IE4、N4 </td> <td width="348">当浏览器的窗口大小被改变时触发此事件</td> </tr> <tr> <td width="131">onscroll</td> <td width="85">IE4、N </td> <td width="348">浏览器的滚动条位置发生变化时触发此事件</td> </tr> <tr> <td width="131">onstop</td> <td width="85">IE5、N </td> <td width="348">浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断</td> </tr> <tr> <td width="131">onunload</td> <td width="85">IE3、N2 </td> <td width="348">当前页面将被改变时触发此事件</td> </tr> <tr> <td width="12" rowspan="5">表单相关事件</td> <td width="131">onblur</td> <td width="85">IE3、N2 </td> <td width="348">当前元素失去焦点时触发此事件</td> </tr> <tr> <td width="131">onchange</td> <td width="85">IE3、N2 </td> <td width="348">当前元素失去焦点并且元素的内容发生改变而触发此事件</td> </tr> <tr> <td width="131">onfocus</td> <td width="85">IE3 、N2</td> <td width="348">当某个元素获得焦点时触发此事件</td> </tr> <tr> <td width="131">onreset</td> <td width="85">IE4 、N3 </td> <td width="348">当表单中RESET的属性被激发时触发此事件</td> </tr> <tr> <td width="131">onsubmit</td> <td width="85">IE3 、N2 </td> <td width="348">一个表单被递交时触发此事件</td> </tr> <tr> <td width="12" rowspan="3">滚动字幕事件</td> <td valign="top" align="left" width="131">onbounce</td> <td valign="top" width="85">IE4、N</td> <td width="348">在Marquee内的内容移动至Marquee显示范围之外时触发此事件</td> </tr> <tr> <td valign="top" align="left" width="131">onfinish</td> <td valign="top" width="85">IE4、N</td> <td width="348">当Marquee元素完成需要显示的内容后触发此事件</td> </tr> <tr> <td valign="top" align="left" width="131">onstart</td> <td valign="top" width="85">IE4、 N</td> <td width="348">当Marquee元素开始显示内容时触发此事件</td> </tr> <tr> <td width="12" rowspan="20">编辑事件</td> <td valign="top" align="left" width="131">onbeforecopy</td> <td valign="top" width="85">IE5、N</td> <td width="348">当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发此事件</td> </tr> <tr> <td valign="top" align="left" width="131">onbeforecut</td> <td valign="top" width="85">IE5、 N</td> <td width="348">当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发此事件</td> </tr> <tr> <td valign="top" align="left" width="131">onbeforeeditfocus</td> <td valign="top" width="85">IE5、N</td> <td width="348">当前元素将要进入编辑状态</td> </tr> <tr> <td valign="top" align="left" width="131">onbeforepaste</td> <td valign="top" width="85">IE5、 N</td> <td width="348">内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发此事件</td> </tr> <tr> <td valign="top" align="left" width="131">onbeforeupdate</td> <td valign="top" width="85">IE5、 N</td> <td width="348">当浏览者粘贴系统剪贴板中的内容时通知目标对象</td> </tr> <tr> <td valign="top" align="left" width="131">oncontextmenu</td> <td valign="top" width="85">IE5、N</td> <td width="348">当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件</td> </tr> <tr> <td valign="top" align="left" width="131">oncopy</td> <td valign="top" width="85">IE5、N</td> <td width="348">当页面当前的被选择内容被复制后触发此事件</td> </tr> <tr> <td valign="top" align="left" width="131">oncut</td> <td valign="top" width="85">IE5、N </td> <td width="348">当页面当前的被选择内容被剪切时触发此事件</td> </tr> <tr> <td valign="top" align="left" width="131">ondrag</td> <td valign="top" width="85">IE5、N </td> <td width="348">当某个对象被拖动时触发此事件 [活动事件]</td> </tr> <tr> <td valign="top" align="left" width="131">ondragdrop</td> <td valign="top" width="85">IE、N4</td> <td width="348">一个外部对象被鼠标拖进当前窗口或者帧</td> </tr> <tr> <td valign="top" align="left" width="131">ondragend</td> <td valign="top" width="85">IE5、N</td> <td width="348">当鼠标拖动结束时触发此事件，即鼠标的按钮被释放了</td> </tr> <tr> <td valign="top" align="left" width="131">ondragenter</td> <td valign="top" width="85">IE5、N</td> <td width="348">当对象被鼠标拖动的对象进入其容器范围内时触发此事件</td> </tr> <tr> <td valign="top" align="left" width="131">ondragleave</td> <td valign="top" width="85">IE5、N </td> <td width="348">当对象被鼠标拖动的对象离开其容器范围内时触发此事件</td> </tr> <tr> <td valign="top" align="left" width="131">ondragover</td> <td valign="top" width="85">IE5、N</td> <td width="348">当某被拖动的对象在另一对象容器范围内拖动时触发此事件</td> </tr> <tr> <td valign="top" align="left" width="131">ondragstart</td> <td valign="top" width="85">IE4、N</td> <td width="348">当某对象将被拖动时触发此事件</td> </tr> <tr> <td valign="top" align="left" width="131">ondrop</td> <td valign="top" width="85">IE5、N</td> <td width="348">在一个拖动过程中，释放鼠标键时触发此事件</td> </tr> <tr> <td valign="top" align="left" width="131">onlosecapture</td> <td valign="top" width="85">IE5、N</td> <td width="348">当元素失去鼠标移动所形成的选择焦点时触发此事件</td> </tr> <tr> <td valign="top" align="left" width="131">onpaste</td> <td valign="top" width="85">IE5、N</td> <td width="348">当内容被粘贴时触发此事件</td> </tr> <tr> <td valign="top" align="left" width="131">onselect </td> <td valign="top" width="85">IE4、N</td> <td width="348">当文本内容被选择时的事件</td> </tr> <tr> <td valign="top" align="left" width="131">onselectstart</td> <td valign="top" width="85">IE4、N</td> <td width="348">当文本内容选择将开始发生时触发的事件</td> </tr> <tr> <td width="12" rowspan="10">数据绑定</td> <td valign="top" align="left" width="131">onafterupdate</td> <td valign="top" width="85">IE4、N</td> <td width="348">当数据完成由数据源到对象的传送时触发此事件</td> </tr> <tr> <td valign="top" align="left" width="131">oncellchange</td> <td valign="top" width="85">IE5、N</td> <td width="348">当数据来源发生变化时</td> </tr> <tr> <td valign="top" align="left" width="131">ondataavailable</td> <td valign="top" width="85">IE4、N</td> <td width="348">当数据接收完成时触发事件</td> </tr> <tr> <td valign="top" align="left" width="131">ondatasetchanged</td> <td valign="top" width="85">IE4、N</td> <td width="348">数据在数据源发生变化时触发的事件</td> </tr> <tr> <td width="131">ondatasetcomplete</td> <td valign="top" width="85">IE4、N</td> <td width="348">当来子数据源的全部有效数据读取完毕时触发此事件</td> </tr> <tr> <td valign="top" align="left" width="131">onerrorupdate</td> <td valign="top" width="85">IE4、N</td> <td width="348">当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件</td> </tr> <tr> <td valign="top" align="left" width="131">onrowenter</td> <td valign="top" width="85">IE5、N</td> <td width="348">当前数据源的数据发生变化并且有新的有效数据时触发的事件</td> </tr> <tr> <td valign="top" align="left" width="131">onrowexit</td> <td valign="top" width="85">IE5、N</td> <td width="348">当前数据源的数据将要发生变化时触发的事件</td> </tr> <tr> <td valign="top" align="left" width="131">onrowsdelete</td> <td valign="top" width="85">IE5、N</td> <td width="348">当前数据记录将被删除时触发此事件</td> </tr> <tr> <td valign="top" align="left" width="131">onrowsinserted</td> <td valign="top" width="85">IE5、N</td> <td width="348">当前数据源将要插入新数据记录时触发此事件</td> </tr> <tr> <td width="12" rowspan="6">外部事件</td> <td valign="top" align="left" width="131">onafterprint</td> <td valign="top" width="85">IE5、N</td> <td width="348">当文档被打印后触发此事件</td> </tr> <tr> <td valign="top" align="left" width="131">onbeforeprint</td> <td valign="top" width="85">IE5、N</td> <td width="348">当文档即将打印时触发此事件</td> </tr> <tr> <td valign="top" align="left" width="131">onfilterchange</td> <td valign="top" width="85">IE4、N</td> <td width="348">当某个对象的滤镜效果发生变化时触发的事件</td> </tr> <tr> <td valign="top" align="left" width="131">onhelp</td> <td valign="top" width="85">IE4、N</td> <td width="348">当浏览者按下F1或者浏览器的帮助选择时触发此事件</td> </tr> <tr> <td valign="top" align="left" width="131">onpropertychange</td> <td valign="top" width="85">IE5、N</td> <td width="348">当对象的属性之一发生变化时触发此事件</td> </tr> <tr> <td valign="top" align="left" width="131">onreadystatechange</td> <td valign="top" width="85">IE4、N</td> <td width="348">当对象的初始化属性值发生变化时触发此事件</td> </tr> </tbody> </table> </body> </html>
三、事件参数
触发事件时，自动生成系统函数event、this，其中，event不需要传递可直接使用，含有许多事件相关信息；this只事件发生的节点，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>eventExample</title> </head> <body> <div id="cl" onclick="Foo();">点击</div> <script> function Foo(){ console.log(event); //MouseEvent {isTrusted: true, screenX: 37, screenY: 111, clientX: 24, clientY: 14, …} }; //document.getElementById("cl").onclick = null; // 一个节点同时绑定多个事件，以最后一个绑定事件为准，这里null覆盖了之前的事件，所以相当于取消事件绑定， </script> </body> </html>
四、事件取消
一个节点同时只可以绑定一个事件，后面的覆盖前面的，所以取消绑定事件，可以在最后添加事件null，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tryJS</title> <style> .toEdit{ background-color:orange; margin:20px; color:white; height:30px; width:100px; line-height:30px; text-align:center; display:inline-block; } table,table tr td{ border:1px solid gray; } </style> </head> <body> <div class="menu"> <input type="button" value="全选" onclick="Cho();" /> <input type="button" value="反选" onclick="Ant();" /> <input type="button" value="取消" onclick="Del();" /> <p class="toEdit" onclick="Edit();">进入编辑模式</p> </div> <div class="box"> <table> <thead> <tr> <td>选择</td> <td style="width:100px;">主机名</td> <td>端口</td> <td>状态</td> </tr> </thead> <tbody> <tr> <td> <input type="checkbox" class="choice" name="cho" value="1"/> </td> <td>v1fds</td> <td>v11</td> <td> <select class="sta"> <option value="1">在线</option> <option value="2">下线</option> </select> </td> </tr> <tr> <td> <input type="checkbox" class="choice" name="cho" value="2"/> </td> <td>v2fds</td> <td>v22</td> <td> <select class="sta"> <option value="1">在线</option> <option value="2">下线</option> </select> </td> </tr> <tr> <td> <input type="checkbox" class="choice" name="cho" value="3"/> </td> <td>v3fds</td> <td>v33</td> <td> <select class="sta"> <option value="1">在线</option> <option value="2">下线</option> </select> </td> </tr> </tbody> </table> <script> function Edit(){ var nodesList = document.getElementsByClassName("sta"); document.onkeydown = function(event){ if(event && event.keyCode == 17){ for(var i=0;i<nodesList.length;i++){ nodesList[i].setAttribute("onchange","SetAll(this);"); }; }; }; document.onkeyup = function(event){ if(event && event.keyCode == 17){ for(var i=0;i<nodesList.length;i++){ nodesList[i].setAttribute("onchange","null"); }; }; }; }; function SetAll(ths){ var nodesList = document.getElementsByClassName("sta"); for(var i=0;i<nodesList.length;i++){ nodesList[i].value = ths.value; }; }; //////////////////////////////////////////////////////////////////////////////////////////// /* 全选 */ function Cho(){ var nodes = document.getElementsByClassName("choice"); for(var i=0;i<nodes.length;i++){ var currentNode = nodes[i]; currentNode.checked = true; console.log(currentNode.value,currentNode.parentElement.nextElementSibling.innerText); }; } /* 取消 */ function Del(){ var nodes = document.getElementsByClassName("choice"); for(var i=0;i<nodes.length;i++){ var currentNode = nodes[i]; currentNode.checked = false; }; } /* 反选 */ function Ant(){ var nodes = document.getElementsByClassName("choice"); for(var i=0;i<nodes.length;i++){ var currentNode = nodes[i]; if(currentNode.checked){ currentNode.checked = false; }else{ currentNode.checked = true; console.log(currentNode.value,currentNode.parentElement.nextElementSibling.innerText); }; }; }; </script> </div> </body> </html>
浙公网安备 33010602011771号