JavaScript入门教程(五)事件驱动与界面交互

一、常见事件类型

事件类型


鼠标、键盘属性


二、绑定方法

静态绑定

<input id="btn" type="button" value="click" οnclick="alert('hello');">

注意这里所有的属性值都在双引号中,静态绑定的语句包含分号

动态绑定

<input id="btn" type="button" value="click">
<script type="text/JavaScript">
btn.οnclick=function{alert('hello');}</script>

或者

 
<input id="btn" type="button" value="click" onlink="load()">
<script type="text/JavaScript">
function load(){alert('hello');} </script>

三、实例

1.单击鼠标键

<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
var btnNum = event.button;
if (btnNum==2)
  {
  alert("您点击了鼠标右键!")
  }
else if(btnNum==0)
  {
  alert("您点击了鼠标左键!")
  }
else if(btnNum==1)
  {
  alert("您点击了鼠标中键!");
  }
else
  {
  alert("您点击了" + btnNum+ "号键,我不能确定它的名称。");
  }
}
</script>
</head>

<body οnmοusedοwn="whichButton(event)">
<p>请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。</p>
</body>

</html>

2.返回单击鼠标键的坐标

<html>
<head>
<script type="text/javascript">
function show_coords(event)
{
x=event.clientX
y=event.clientY
alert("X 坐标: " + x + ", Y 坐标: " + y)
}
</script>
</head>

<body οnmοusedοwn="show_coords(event)">

<p>请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。</p>

</body>
</html>


3.返回unicode值

<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
alert(event.keyCode)
}

</script>
</head>

<body οnkeyup="whichButton(event)">
<p><b>注释:</b>在测试这个例子时,要确保右侧的框架获得了焦点。</p>
<p>在键盘上按一个键。消息框会提示出该按键的 unicode。</p>
</body>

</html>





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值