HTML DOM Event 对象

最新推荐文章于 2021-07-13 21:51:43 发布

码农人生1314

最新推荐文章于 2021-07-13 21:51:43 发布

阅读量5.9k

点赞数 1

分类专栏： html5 随记 web相关文章标签： html dom 对象 evet

本文链接：https://blog.csdn.net/u010989191/article/details/51285821

版权

随记同时被 3 个专栏收录

63 篇文章 0 订阅

订阅专栏

web相关

51 篇文章 0 订阅

订阅专栏

html5

6 篇文章 0 订阅

订阅专栏

前言

对于任何一个网页来说都会涉及到交互，交互的过程必然离不开事件的响应与处理。下面简单谈谈HTML DOM Event对象。

HTML DOM Event

Event 对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！

事件句柄 (Event Handlers)

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。
这里写图片描述

鼠标 / 键盘属性

这里写图片描述

IE 属性

除了上面的鼠标/事件属性，IE 浏览器还支持下面的属性：
这里写图片描述

标准 Event 属性

下面列出了 2 级 DOM 事件标准定义的属性。
这里写图片描述

标准 Event 方法

下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法：
这里写图片描述

实例演示

网页源代码：

<!DOCTYPE html>
<html>
<head>
    <title>HTML DOM Event Detail</title>
    <script type="text/javascript">
        function blurFunc(node)
        {
            alert("onblur 事件响应！ 内容是："+node.value);
        }
    </script>
</head>
<body>
<div style="margin-left: 200px;margin-right: 200px;margin-top: 50px;">
    <div>
        <div style="font-weight: bold;font-size: 30px;">Event Handlers Test</div>
        onblur事件1: <input type="text" onblur="javascript:alert('input1失去焦点 内容是：'+this.value)" placeholder="输入文字并移开鼠标试试" /><br>
        onblur事件2: <input type="text" onblur="javascript:blurFunc(this);" placeholder="输入文字并移开鼠标试试" /><br>
        onchange事件:<input type="text" onchange="javascript:alert('内容发生改变，当前内容是：'+this.value);" placeholder="改变输入内容试试" /><br>
        onclick事件：<button onclick="javascript:alert('点击事件响应！！')">点击我试试</button><br>
        ondblclick事件：<button ondblclick="javascript:alert('双击事件响应！！')">必须双击才有反应</button><br>
        onfocus事件：<input type="text" onfocus="javascript:alert('获得焦点！！');" onblur="javascript:alert('失去焦点！！！');"placeholder="将鼠标移至输入框内" /><br>
        <div style="font-weight: bold;font-size: 20px;">键盘响应事件</div>
        onkeydown事件：<input type="text" onkeydown="javascript:alert('有键盘按键按下，编码是：'+event.keyCode)"/><br>
        onkeyup事件：<input type="text" onkeyup="javascript:alert('按键已抬起，响应事件是onkeyup，编码是：'+event.keyCode)"/><br>
        onkeypress事件：<input type="text" onkeypress="javascript:alert('有键盘按键按下并松开，编码是：'+event.keyCode)" /><br>
        <div style="font-weight: bold;font-size: 20px;">鼠标响应事件</div>
        onmousedown事件：<span style="width: 200px;height: 20px;background-color: red;" onmousedown="javascript:alert('鼠标左键响应')">用鼠标左键点击试试</span><br>
        onmouseup事件：<span style="width: 200px;height: 20px;background-color: blue;" onmouseup="javascript:alert('鼠标按键被松开')">用鼠标点击试试</span><br>
        onmouseover事件：<span style="width: 200px;height: 20px;background-color: green;" onmouseover="javascript:alert('鼠标移到某元素之上事件响应')">用鼠标经过这里试试</span><br>
        onmouseout事件：<span style="width: 200px;height: 20px;background-color: gray;" onmouseout="javascript:alert('鼠标从某元素移事件响应')">鼠标从某元素移</span><br>
        <div style="font-weight: bold;font-size: 20px;">鼠标响应事件时的位置</div>
        clientX and clientY：<button onclick="javascript:alert('Client x:'+event.clientX+' Client y:'+event.clientY)">获取鼠标指针的坐标(相对浏览器)</button><br>
        screenX and screenY：<button onclick="javascript:alert('screen x:'+event.screenX+' screen y:'+event.screenY)">获取鼠标指针的坐标(相对屏幕)</button><br>
        offsetX and offsetY：<button onclick="javascript:alert('offset x:'+event.offsetX+' offset y:'+event.offsetY)">发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标</button><br>
    </div>
    <div style="background-color: gray;height: 80%; top: 5px;">
        <div style="font-weight: bold;font-size: 20px;">测试键盘按键与编码</div>
        <div>
            <div style="font-weight: bolder;color: red;">Display:</div>
            <span id="show"></span>
        </div>
        <div>
            <span>请用键盘输入：</span><input onkeypress="javascript:appendT()"></input>
        </div>
        <script type="text/javascript">
            var i = 1;
            function appendT()
            {
                var showNode = document.getElementById('show');
                showNode.innerHTML += "["+event.keyCode+'-->'+String.fromCharCode(event.keyCode)+']\t';
                if(i%6 == 0)
                    showNode.innerHTML += "<br>";
                i++;
            }
        </script>
    </div>
</div>
</body>
</html>