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

 

相关文章
|
15天前
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
|
18天前
|
机器学习/深度学习 移动开发 自然语言处理
HTML5与神经网络技术的结合有哪些其他应用
HTML5与神经网络技术的结合有哪些其他应用
31 3
|
24天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
42 2
|
8天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
24 0
|
1月前
|
JavaScript 前端开发 UED
HTML 超链接的多种类型及应用
【10月更文挑战第17天】HTML 超链接类型丰富多样,它们共同构成了网页中不可或缺的导航和交互元素。通过合理地选择和运用这些超链接类型,我们可以为用户创造更加流畅和便捷的浏览体验,提升网站的可用性和吸引力。
42 1
|
1月前
|
移动开发 前端开发 JavaScript
HTML5 新的 Input可以有哪些好玩的应用
HTML5的新输入类型为应用带来了多种创新和互动功能,显著提升了用户体验和界面趣味性。例如,颜色选择器可动态改变网站主题色;滑块控制适用于音量或亮度调节;日期和时间输入便于预约系统的设计;互动式表单结合多种输入类型实现高效的数据收集;猜数字游戏增加用户参与度;实时搜索建议优化网站搜索功能;图像预览功能让用户上传图片前预览效果;密码可见性切换按钮提升表单的可用性;结合用户位置的电话号码输入则能提供附近服务信息。这些应用场景不仅使网站更具吸引力,还增强了用户的互动体验。
|
1月前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
35 1
|
2月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
47 6
|
1月前
|
移动开发 HTML5
一个最简单的 HTML 页面结构如下:
HTML 是一种标记语言,用于描述网页结构。通过 `&lt;html&gt;`, `&lt;head&gt;`, `&lt;body&gt;` 等标签构建页面,支持文本、图像、链接、表格等多种元素。本文介绍了 HTML 基础,包括常用标签及创建简单网页的实例,帮助初学者快速入门。
62 0
|
2月前
|
移动开发 JavaScript 数据管理
HTML5 拖放在游戏中的应用
HTML5的拖放功能在游戏开发中广泛应用,尤其在创建交互式网页游戏时。它支持多种场景,如拖动角色或物品、选择和装备物品、拼图或配对游戏以及自定义界面布局。通过简单的HTML和JavaScript代码,可实现流畅的拖放交互,并提供视觉反馈,增强用户体验。此外,还需考虑设备兼容性和数据管理,确保游戏在不同设备和浏览器上都能良好运行。总之,HTML5拖放功能使网页游戏更生动有趣。