DOM之Event对象

来源：互联网发布：173VPN网络加速器编辑：程序博客网时间：2024/05/22 05:01

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

几个实例：

哪个鼠标按钮被点击？

<html><head>    <script type="text/javascript">        function whichButton(event) {            if (event.button == 2) {                alert("您点击了鼠标右键！")            }            else {                alert("您点击了鼠标左键！")            }        }    </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>

哪个元素被点击了？

<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"        tppabs="http://www.w3school.com.cn/i/eg_mouse2.jpg" /></body></html>

0 0