泉州浮桥网页设计培训班实例笔记HTML DOM 实例(二)-Event 对象

哪个鼠标按钮被点击?

<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 onmousedown=”whichButton(event)”>

<p>请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。</p>

</body></html>

光标的坐标是?

<html><head>

<script type=”text/javascript”>

function show_coords(event){

x=event.clientX

y=event.clientY

alert(“X 坐标: ” + x + “, Y 坐标: ” + y)

}

</script>

</head>

<body onmousedown=”show_coords(event)”>

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

</body></html>

被按的按键的 unicode 是?

<html><head>

<script type=”text/javascript”>

function whichButton(event){

alert(event.keyCode)

}

 

</script>

</head>

<body onkeyup=”whichButton(event)”>

<p><b>注释:</b>在测试这个例子时,要确保右侧的框架获得了焦点。</p>

<p>在键盘上按一个键。消息框会提示出该按键的 unicode。</p>

</body></html>

相对于屏幕,光标的坐标是?

<html><head>

<script type=”text/javascript”>

function coordinates(event)

{

x=event.screenX

y=event.screenY

alert(“X=” + x + ” Y=” + y)

}

</script>

</head>

<body onmousedown=”coordinates(event)”>

<p>

在文档中点击某个位置。消息框会提示出指针相对于屏幕的 x 和 y 坐标。

</p>

</body></html>

shift 键被按了吗?

<html><head>

<script type=”text/javascript”>

function isKeyPressed(event){

if (event.shiftKey==1) {

alert(“The shift key was pressed!”)

}

else {

alert(“The shift key was NOT pressed!”)

}

}

</script>

</head>

<body onmousedown=”isKeyPressed(event)”>

<p>在文档中点击某个位置。消息框会告诉你是否按下了 shift 键。</p>

</body></html>

哪个元素被点击了?

<html><head>

<script type=”text/javascript”>

function whichElement(e){

var targ

if (!e) var e = window.event

if (e.target) targ = e.target

else if (e.srcElement) targ = e.srcElement

if (targ.nodeType == 3) // defeat Safari bug

targ = targ.parentNode

var tname

tname=targ.tagName

alert(“You clicked on a ” + tname + ” element.”)

}

</script>

</head>

<body onmousedown=”whichElement(event)”>

<p>在文档中点击某个位置。消息框会提示出您所点击的标签的名称。</p>

<h3>这是标题</h3>

<p>这是段落。</p>

<img src=”/i/eg_mouse2.jpg” />

</body></html>

哪个事件类型发生了?

<html><head>

<script type=”text/javascript”>

function getEventType(event) {

alert(event.type);

}

</script>

</head>

<body onmousedown=”getEventType(event)”>

<p>在文档中点击某个位置。消息框会提示出被触发的事件的类型。</p>

</body></html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注