您的位置: 首页  >  文章  >  JavaScript DOM Event 对象属性方法 小结

JavaScript DOM Event 对象属性方法 小结

分类: 文章 • 2023-12-12 23:09:28

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

学习来源：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" 键是否被按下。

 

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

JavaScript DOM Event 对象属性方法 小结 以下是源代码（有哪里需要我加注释的，欢迎在评论区与我交流）：

 

<!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>

 

相关推荐