事件对象,阻止冒泡,键盘事件
event事件兼容:
1 //IE event 2 oDiv.style.left=event.clientX+'px'; 3 oDiv.style.top=event.clientY+'px';* 4 5 //FF 事件处理的参数 6 oDiv.style.left=ev.clientX+'px'; 7 oDiv.style.top=ev.clientY+'px'; 8 9 /*if(ev){ 10 oDiv.style.left=ev.clientX+'px'; 11 oDiv.style.top=ev.clientY+'px'; 12 } 13 else{ 14 oDiv.style.left=event.clientX+'px'; 15 oDiv.style.top=event.clientY+'px'; 16 }*/
示例:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <style> 5 #div1 {width:100px; height:100px; background:red; position:absolute;} 6 </style> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 <title>无标题文档</title> 9 <script type="text/javascript"> 10 document.onmousemove=function (ev){ 11 var oDiv=document.getElementById('div1'); 12 13 var oEvent=ev||event; 14 15 oDiv.style.left=oEvent.clientX+'px'; 16 oDiv.style.top=oEvent.clientY+'px'; 17 18 }; 19 </script> 20 </head> 21 22 <body> 23 <div id="div1"> 24 </div> 25 </body> 26 </html>
同理,对于键盘事件(示例):
1 document.onkeydown=function (ev) 2 { 3 var oEvent=ev||event; 4 5 alert(oEvent.keyCode); 6 };
阻止冒泡:
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>无标题文档</title> 5 <script type="text/javascript"> 6 window.onload=function (){ 7 var oBtn=document.getElementById('btn1'); 8 9 oBtn.onclick=function (ev){ 10 var oEvent=ev||event; 11 alert('btn1'); 12 13 oEvent.cancelBubble=true; //阻止点击button按钮时弹出hello(取消冒泡) 14 }; 15 16 document.onclick=function (){ 17 alert('hello'); 18 }; 19 }; 20 </script> 21 </head> 22 <body> 23 <input id="btn1" type="button" value="aaa" /> 24 </body> 25 </html>
分类:
JavaScript
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· [AI/GPT/综述] AI Agent的设计模式综述