JavaScript DOM Event 对象属性方法小结

最新推荐文章于 2023-06-10 17:28:29 发布

Claire_TJ

最新推荐文章于 2023-06-10 17:28:29 发布

阅读量250

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

虽然写这个博客主要目的是为了给我自己做一个思路记忆录，但是如果你恰好点了进来，那么先对你说一声欢迎。我并不是什么大触，只是一个菜菜的学生，如果您发现了什么错误或者您对于某些地方有更好的意见，非常欢迎您的斧正！

学习来源：http://www.w3school.com.cn/jsref/dom_obj_event.asp

vent 对象

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

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

事件句柄　(Event Handlers)

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

属性	此事件发生在何时...
onabort	图像的加载被中断。
onblur	元素失去焦点。
onchange	域的内容被改变。
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onerror	在加载文档或图像时发生错误。
onfocus	元素获得焦点。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。
onload	一张页面或一幅图像完成加载。
onmousedown	鼠标按钮被按下。
onmousemove	鼠标被移动。
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。
onmouseup	鼠标按键被松开。
onreset	重置按钮被点击。
onresize	窗口或框架被重新调整大小。
onselect	文本被选中。
onsubmit	确认按钮被点击。
onunload	用户退出页面。

鼠标 / 键盘属性

属性	描述
altKey	返回当事件被触发时，"ALT" 是否被按下。
button	返回当事件被触发时，哪个鼠标按钮被点击。
clientX	返回当事件被触发时，鼠标指针的水平坐标。
clientY	返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey	返回当事件被触发时，"CTRL" 键是否被按下。
metaKey	返回当事件被触发时，"meta" 键是否被按下。
relatedTarget	返回与事件的目标节点相关的节点。
screenX	返回当某个事件被触发时，鼠标指针的水平坐标。
screenY	返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey	返回当事件被触发时，"SHIFT" 键是否被按下。

我的测试结果：每一个按钮点击后就可以出现相应的函数效果。

以下是源代码（有哪里需要我加注释的，欢迎在评论区与我交流）：

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style media="screen" type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        input,
        img {
            margin-left: 50px;
            margin-top: 10px;
            display: block;
            font-size: 20px;
        }

        p {
            margin-left: 50px;
            font-size: 20px;
        }
    </style>
    <script type="text/javascript">
        function ONBlur() {
            var x = document.getElementById('onblur');
            x.value = x.value.toUpperCase();
        }

        function ONChange() {
            var x = document.getElementById('onchange');
            x.value = x.value.toLowerCase();
        }

        window.onload = function () {
            document.getElementById('onfocus').addEventListener("focus", Onfocus);
        }

        function Onfocus() {
            document.getElementById('onfocus').style.backgroundColor = '#FF6699';
        }

        function noNumbers(e) {
            var keynum;
            var keychar;
            if (window.event) { //IE
                keynum = e.keyCode;
            } else if (e.which) { //Netscape/Firefox/Opera
                keynum = e.which;
            }
            keychar = String.fromCharCode(keynum);
            document.getElementById('onkeydown').innerHTML += keychar;
        }

        function ONselect(x) {
            var se = document.getElementById(x);
            se.style.color = "rgb(182,58,207)";
        }

        function isKeyPressed(event) {
            if (event.altKey == 1)
                alert("The alt key was pressed!");
            else {
                alert("not presses!");
            }
        }

        function whichButton(event) {
            if (event.button == 2) {
                alert("You clicked the right mouse button");
            }
            else if (event.button == 1) {
                alert("You clicked the middle mouse button");
            }
            else if (event.button == 0) {
                alert("You clicked the left mouse button");
            }
        }

        function ClientX(event) {
            var x = event.clientX;
            document.getElementById('clientx').innerHTML = "横坐标为：" + x;
        }

        function ClientY(event) {
            var y = event.clientY;
            document.getElementById('clienty').innerHTML = "纵坐标为：" + y;
        }

        function ScreenXY(event) {
            var x = event.screenX;
            var y = event.screenY;
            document.getElementById('screenxy').innerHTML = '横坐标:' + x + ',纵坐标:' + y;
        }
    </script>
</head>

<body onresize="alert('You have changed the size')">
<p>输入您的名字(onblur 事件会在对象失去焦点时发生。)：</p>
<input type="text" id="onblur" onblur="ONBlur()" onchange="ONChange()"/>
<p>输入您的名字(onchange 事件会在域的内容改变时发生。)：</p>
<input type="text" id="onchange" onchange="ONChange()"/>
<p>当输入框获得焦点时，其背景颜色将改变(onfocus 事件在对象获得焦点时发生。)</p>
<input type="text" id="onfocus"/>
<p id="onkeydown">onkeydown某个键盘按键被按下。显示:</p>
<input type="text" onkeydown="return noNumbers(event)"/>
<img src="2.jpg" width="100px" height="100px" alt="miao" onmousedown="alert('miao~')">
<form class="" action="index.html" method="post">
    <p>onreset 事件会在表单中的重置按钮被点击时发生。</p>
    <span style="margin-left:50px;">Input:</span><input type="text" value="123" style="display:inline;">
    <input type="reset" value="reset">
</form>
<p>onresize 事件会在窗口或框架被调整大小时发生。<br/>
    改变大小后会弹出窗口</p>
<p>选中字体后，输入框中的字会变色。onselect 事件会在文本框中的文本被选中时发生。</p>
<input type="text" id="onselect" value="hello world!" onselect="ONselect(this.id)">
<input type="button" value="altKey返回当事件被触发时，'alt'是否被按下。" onclick="isKeyPressed(event)">
<input type="button" value="button 事件属性可返回一个整数，指示当事件被触发时哪个鼠标按键被点击。" onclick="whichButton(event)">
<input type="button" value="返回当事件被触发时，鼠标指针的水平坐标。" onclick="ClientX(event)">
<p id="clientx"></p>
<input type="button" value="返回当事件被触发时，鼠标指针的垂直坐标。" onclick="ClientY(event)">
<p id="clienty"></p>
<input type="button" value="返回事件发生时鼠标指针相对于屏幕的坐标。" onclick="ScreenXY(event)">
<p id="screenxy"></p>
</body>

</html>

Claire_TJ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM Event 对象属性方法小结

虽然写这个博客主要目的是为了给我自己做一个思路记忆录，但是如果你恰好点了进来，那么先对你说一声欢迎。我并不是什么大触，只是一个菜菜的学生，如果您发现了什么错误或者您对于某些地方有更好的意见，非常欢迎您的斧正！学习来源：http://www.w3school.com.cn/jsref/dom_obj_event.asp vent 对象Event 对象代表事件的状态，...
复制链接

扫一扫