JavaScript DOM Event 对象属性方法 小结
虽然写这个博客主要目的是为了给我自己做一个思路记忆录,但是如果你恰好点了进来,那么先对你说一声欢迎。我并不是什么大触,只是一个菜菜的学生,如果您发现了什么错误或者您对于某些地方有更好的意见,非常欢迎您的斧正!
学习来源: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>