html页面中event的常见应用

简介: 一:获取键盘上某个按键的unicode值 1 2 3 4 function whichButton(event) 5 { 6 alert(event.keyCode) 7 } 8 9 10 11 12 13 注释:在测试这个例子时,要确保右侧的框架获得了焦点。

一:获取键盘上某个按键的unicode值

 1 <html>
 2 <head>
 3 <script type="text/javascript">
 4 function whichButton(event)
 5 {
 6 alert(event.keyCode)
 7 }
 8 
 9 </script>
10 </head>
11 
12 <body onkeyup="whichButton(event)">
13 <p><b>注释:</b>在测试这个例子时,要确保右侧的框架获得了焦点。</p>
14 <p>在键盘上按一个键。消息框会提示出该按键的 unicode。</p>
15 </body>
16 
17 </html>
View Code

二:请在页面内点击鼠标的按键。判断你点击的是哪个键

 

 1 <html>
 2 <head>
 3 <script type="text/javascript">
 4 function whichButton(event)
 5 {
 6 var btnNum = event.button;
 7 if (btnNum==2)
 8   {
 9   alert("您点击了鼠标右键!")
10   }
11 else if(btnNum==0)
12   {
13   alert("您点击了鼠标左键!")
14   }
15 else if(btnNum==1)
16   {
17   alert("您点击了鼠标中键!");
18   }
19 else
20   {
21   alert("您点击了" + btnNum+ "号键,我不能确定它的名称。");
22   }
23 }
24 </script>
25 </head>
26 
27 <body onmousedown="whichButton(event)">
28 <p>请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。</p>
29 </body>
30 
31 </html>
View Code

 

三:获取光标的坐标(相对于当前文档)

 

 1 <html>
 2 <head>
 3 <script type="text/javascript">
 4 function show_coords(event)
 5 {
 6 x=event.clientX
 7 y=event.clientY
 8 alert("X 坐标: " + x + ", Y 坐标: " + y)
 9 }
10 </script>
11 </head>
12 
13 <body onmousedown="show_coords(event)">
14 
15 <p>请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。</p>
16 
17 </body>
18 </html>
View Code

 

四:相对于屏幕光标的坐标

 

 1 <html>
 2 <head>
 3 
 4 <script type="text/javascript">
 5 function coordinates(event)
 6 {
 7 x=event.screenX
 8 y=event.screenY
 9 alert("X=" + x + " Y=" + y)
10 }
11 
12 </script>
13 </head>
14 <body onmousedown="coordinates(event)">
15 
16 <p>
17 在文档中点击某个位置。消息框会提示出指针相对于屏幕的 x 和 y 坐标。
18 </p>
19 
20 </body>
21 </html>
View Code

 

五:获取事件触发的类型

 

 1 <html>
 2 <head>
 3 <script type="text/javascript">
 4 function getEventType(event)
 5   { 
 6   alert(event.type);
 7   }
 8 </script>
 9 </head>
10 
11 <body onmousedown="getEventType(event)">
12 
13 <p>在文档中点击某个位置。消息框会提示出被触发的事件的类型。</p>
14 
15 </body>
16 </html>
View Code

 

六:当输入完搜索条件,直接点击回车键触发搜索的js方法

 

1 <li>用户名:<input type="text" class="dfinput" id="queryName" onkeyup="if(event.keyCode==13) queryByName();"  value="${queryName }" style="width: 200px;"></li>
2         <li><input  type="button" class="scbtn" onclick="queryByName();" value="查询"/></li>
View Code

 

sdfa

 

相关文章
|
8天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
27天前
超好看的404提示页面HTML源码
超好看的404提示页面HTML源码
186 77
|
28天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
64 34
|
29天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
53 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
123 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
3月前
太便利了 !通义灵码方便生成html页面
太便利了 !通义灵码方便生成html页面
137 0
|
3月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
121 7
|
3月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
53 0
|
3月前
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
107 11
|
3月前
|
机器学习/深度学习 移动开发 自然语言处理
HTML5与神经网络技术的结合有哪些其他应用
HTML5与神经网络技术的结合有哪些其他应用
50 3

热门文章

最新文章