JavaScript HTML 事件实例
JavaScript基础 2022-04-25 01:55:27小码哥的IT人生shichen
JavaScript HTML 事件实例
使用 JavaScript 对事件做出反应的实例。
输入事件
完整实例【onblur - 当用户离开输入字段时】：
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</head>
<body>
请输入您的英文姓名：<input type="text" id="fname" onblur="myFunction()">
<p>当离开输入字段时，会触发一个函数，将输入文本转换为大写。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【onchange - 当用户更改输入字段的内容时】：
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</head>
<body>
请输入您的姓名：<input type="text" id="fname" onchange="myFunction()">
<p>离开输入字段时，会触发一个函数，将输入文本转换为大写。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【onchange - 当用户选择下拉值时】：
<!DOCTYPE html>
<html>
<head>
<script>
function preferedBrowser() {
prefer = document.forms[0].browsers.value;
alert("你喜欢使用 " + prefer + " 在网上冲浪！");
}
</script>
</head>
<body>
<form>
请选择您喜欢的浏览器：
<select id="browsers" onchange="preferedBrowser()">
<option value="Chrome">Chrome</option>
<option value="Internet Explorer">Internet Explorer</option>
<option value="Firefox">Firefox</option>
</select>
</form>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【onfocus - 当输入字段获得焦点时】：
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x) {
x.style.background = "yellow";
}
</script>
</head>
<body>
请输入您的姓名：<input type="text" onfocus="myFunction(this)">
<p>当输入字段获得焦点时，将触发一个更改背景颜色的函数。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【onselect - 当输入文本被选取时】：
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "你选择了一些文字";
}
</script>
</head>
<body>
一些文本：<input type="text" value="Hello world!" onselect="myFunction()">
<p id="demo"></p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【onsubmit - 当用户点击提交按钮】：
<!DOCTYPE html>
<html>
<head>
<script>
function confirmInput() {
fname = document.forms[0].fname.value;
alert("Hello " + fname + "！您现在将被重定向到 www.phpcodeweb.com");
}
</script>
</head>
<body>
<form onsubmit="confirmInput()" action="http://www.phpcodeweb.com/">
请输入您的姓名：<input id="fname" type="text" size="20">
<input type="submit">
</form>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【onreset - 当用户点击重置按钮】：
<!DOCTYPE html>
<html>
<head>
<script>
function message() {
alert("此警报框由 onreset 事件处理程序触发");
}
</script>
</head>
<body>
<form onreset="message()">
请输入您的姓名：<input type="text" size="20">
<input type="reset">
</form>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【onkeydown - 当用户按下/按住某个键时】：
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
alert("您在输入字段中按了一个键");
}
</script>
</head>
<body>
<p>当用户在输入字段中按键时，将触发函数。</p>
<input type="text" onkeydown="myFunction()">
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【onkeypress - 当用户按下/按住某个键时】：
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
alert("您在输入字段中按了一个键");
}
</script>
</head>
<body>
<p>当用户在输入字段中按键时，将触发函数。</p>
<input type="text" onkeypress="myFunction()">
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【onkeyup - 当用户释放按键时】：
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</head>
<body>
<p>当用户在输入字段中释放键时，将触发一个函数。该函数将字符转换为大写。</p>
请输入您的姓名：
<input type="text" id="fname" onkeyup="myFunction()">
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【onkeyup - 当用户释放按键时】：
<!DOCTYPE html>
<html>
<head>
<script>
function writeMessage() {
document.forms[0].mySecondInput.value = document.forms[0].myInput.value;
}
</script>
</head>
<body>
<p>当键盘按键正在向上移动时，会发生 onkeyup 事件。</p>
<form>
请输入您的姓名：
<input type="text" name="myInput" onkeyup="writeMessage()" size="20">
<input type="text" name="mySecondInput" size="20">
</form>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【onkeydown vs onkeyup - 两者】：
<!DOCTYPE html>
<html>
<head>
<script>
function color(color) {
document.forms[0].myInput.style.background = color;
}
</script>
</head>
<body>
<form>
请编写一条消息：<br>
<input
type="text"
onkeydown="color('yellow')"
onkeyup="color('white')"
name="myInput">
</form>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
鼠标事件
完整实例【onmouseover/onmouseout - 当鼠标经过一个元素时】：
<!DOCTYPE html>
<html>
<body>
<h1 onmouseover="style.color='red'" onmouseout="style.color='black'">将鼠标悬停在此文字上</h1>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【onmousedown/onmouseup - 当按下/释放鼠标按钮时】：
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(elmnt, clr) {
elmnt.style.color = clr;
}
</script>
</head>
<body>
<p onmousedown="myFunction(this,'red')" onmouseup="myFunction(this,'green')">
单击文本以更改颜色。按下鼠标按钮时会触发带参数的函数，当释放鼠标按钮时，会再次使用其他参数触发。
</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【onmousedown - 当按下鼠标时：提示点击了哪个元素】：
<!DOCTYPE html>
<html>
<head>
<script>
function whichElement(e) {
var targ;
if (!e) {
var e = window.event;
}
if (e.target) {
targ=e.target;
} else if (e.srcElement) {
targ=e.srcElement;
}
var tname;
tname = targ.tagName;
alert("您点击了 " + tname + " 元素。");
}
</script>
</head>
<body onmousedown="whichElement(event)">
<h1>卢浦大桥</h1>
<img border="0" src="/skin/i/shanghai_lupu_bridge.jpg" alt="卢浦大桥" />
<p>卢浦大桥，位于中国上海市原卢湾区与浦东新区之间的黄浦江上，曾经是世界上主拱桥最长的拱桥、钢拱桥。</p>
<p><b>（单击文档中的某个位置。警告框将提示您单击的元素的名称。）</b></p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【onmousedown - 当点击鼠标时：提示点击了哪个按钮】：
<!DOCTYPE html>
<html>
<head>
<script>
function WhichButton(event) {
alert("You pressed button: " + event.button)
}
</script>
</head>
<body>
<div onmousedown="WhichButton(event);">单击此文本（使用其中一个鼠标按钮）
<p>
0 指定鼠标左键<br>
1 指定鼠标中键<br>
2 指定鼠标右键
</p>
<p>
<b>注释：</b>Internet Explorer 8及更早版本返回另一个结果：<br>
1 指定鼠标左键<br>
4 指定鼠标中键<br>
2 指定鼠标右键
</p>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【onmousemove/onmouseout - 当把鼠标指针移入/移出 div 时】：
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(e) {
x = e.clientX;
y = e.clientY;
coor = "Coordinates: (" + x + "," + y + ")";
document.getElementById("demo").innerHTML = coor
}
function clearCoor() {
document.getElementById("demo").innerHTML = "";
}
</script>
</head>
<body style="margin:0px;">
<div id="coordiv" style="width:300px;height:200px;border:1px solid" onmousemove="myFunction(event)" onmouseout="clearCoor()"></div>
<p>将鼠标悬停在上方的矩形上，然后获取鼠标指针的坐标。</p>
<p id="demo"></p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【onmouseover/onmouseout - 当把鼠标指针移入/移出图像时】：
<!DOCTYPE html>
<html>
<head>
<script>
function bigImg(x) {
x.style.height = "150px";
x.style.width = "150px";
}
function normalImg(x) {
x.style.height = "50px";
x.style.width = "50px";
}
</script>
</head>
<body>
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0"
src="/skin/i/eg_smile.gif" alt="Smiley" width="128" height="128">
<p>当用户将鼠标指针移到图像上时，会触发 bigImg() 函数。</p>
<p>当鼠标指针移出图像时，会触发 normalImg() 函数。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【onmouseover - 将鼠标悬停在图像映射上】：
<!DOCTYPE html>
<html>
<head>
<script>
function writeText(txt) {
document.getElementById("desc").innerHTML = txt;
}
</script>
</head>
<body>
<img src ="/skin/i/eg_planets.jpg"
alt="Planets"
usemap ="#planetmap" />
<map name="planetmap">
<area shape ="rect" coords ="0,0,108,260"
onmouseover="writeText('太阳和像木星这样的天然气巨行星是迄今为止太阳系中最大的天体。')"
href ="/demo/planets_sun.html" target ="_blank" alt="Sun" />
<area shape ="circle" coords ="129,162,9"
onmouseover="writeText('水星很难从地球上研究，因为它总是如此接近太阳。')"
href ="/demo/planets_mercur.html" target ="_blank" alt="Mercury" />
<area shape ="circle" coords ="180,139,14"
onmouseover="writeText('直到 20 世纪 60 年代，金星经常被认为是地球的孪生姐妹，因为金星是离我们最近的行星，因为这两个行星似乎有许多共同的特征。')"
href ="/demo/planets_venus.html" target ="_blank" alt="Venus" />
</map>
<p id="desc">将鼠标悬停在太阳和火星上，看看不同的描述。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
点击事件
完整实例【对 onclick 事件作出反应】：
<!DOCTYPE html>
<html>
<head>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">这是一段文字。</p>
<button type="button" onclick="displayDate()">显示日期</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【onclick - 单击按钮时】：
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</head>
<body>
<p>单击按钮以触发函数。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【ondblclick - 双击文本时】：
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</head>
<body>
<p ondblclick="myFunction()">双击此段以触发函数。</p>
<p id="demo"></p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
加载事件
完整实例【onload - 页面加载后】：
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
alert("页面已加载");
}
</script>
</head>
<body onload="myFunction()">
<h2>Hello World!</h2>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【onload - 图像加载后】：
<!DOCTYPE html>
<html>
<head>
<script>
function loadImage() {
alert("图像已加载");
}
</script>
</head>
<body>
<img src="/skin/i/shanghai_lupu_bridge.jpg" onload="loadImage()" />
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【onerror - 当图像加载时发生错误】：
<!DOCTYPE html>
<html>
<head>
<script>
function imgError() {
alert('无法加载图像。');
}
</script>
</head>
<body>
<img src="image.gif" onerror="imgError()">
<p>如果加载图像时发生错误，则会触发函数。该函数显示带有文本的警告框。在此例中，我们引用了不存在的图像，因此发生了 onerror 事件。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【onunload - 当浏览器关闭文档时】：
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
alert("感谢您访问phpcodeweb！");
}
</script>
</head>
<body onunload="myFunction()">
<h1>欢迎访问到我的主页</h1>
<p>关闭此窗口或按 F5 重新加载页面。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【onresize - 当浏览器窗口大小被调整时】：
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var w = window.outerWidth;
var h = window.outerHeight;
var txt = "Window size: width=" + w + ", height=" + h;
document.getElementById("demo").innerHTML = txt;
}
</script>
</head>
<body onresize="myFunction()">
<p>请尝试调整浏览器窗口的大小。</p>
<p id="demo">??</p>
<p><b>注意：</b>此例在 IE8 及更早版本中无法正常工作。IE8 及更早版本不支持 window 对象的 outerWidth/outerHeight 属性。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
其他
完整实例【按键的键码是什么？】：
<!DOCTYPE html>
<html>
<head>
<script>
function whichButton(event) {
document.getElementById("demo").innerHTML = event.keyCode;
}
</script>
</head>
<body onkeyup="whichButton(event)">
<p><b>注释：</b>尝试此示例时，请确保右框架具有焦点！</p>
<p>单击此页面，然后按键盘上的键。</p>
<p id="demo"></p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【光标的坐标是什么？】：
<!DOCTYPE html>
<html>
<head>
<script>
function show_coords(event) {
document.getElementById("demo").innerHTML = "X= " + event.clientX + "<br>Y= " + event.clientY;
}
</script>
</head>
<body>
<img src ="/skin/i/eg_planets.jpg" alt="Planets"
onmousedown="show_coords(event)" />
<p>单击上面的图片可显示鼠标指针的 x 和 y 坐标。</p>
<p id="demo"></p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【相对于屏幕的光标坐标是什么？】：
<!DOCTYPE html>
<html>
<head>
<script>
function coordinates(event) {
document.getElementById("demo").innerHTML = "X = " + event.screenX + "<br>Y = " + event.screenY;
}
</script>
</head>
<body>
<img src ="/skin/i/eg_planets.jpg" alt="Planets"
onmousedown="coordinates(event)" />
<p>单击上面的图片可显示鼠标指针相对于屏幕的 x 和 y 坐标。</p>
<p id="demo"></p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【是否按下 shift 键？】：
<!DOCTYPE html>
<html>
<head>
<script>
function isKeyPressed(event) {
var text = "切换键未被按下！";
if (event.shiftKey == 1) {
text = "切换键被按下了！";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</head>
<body>
<img src ="/skin/i/eg_planets.jpg" alt="Planets"
onmousedown="isKeyPressed(event)" />
<p>点击上面的图片，会提示您是否按下了 shift 键。</p>
<p id="demo"></p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【发生何种事件类型？】：
<!DOCTYPE html>
<html>
<head>
<script>
function getEventType(event) {
document.getElementById("demo").innerHTML = event.type;
}
</script>
</head>
<body>
<img src ="/skin/i/eg_planets.jpg" alt="Planets"
onmousedown="getEventType(event)" />
<p>点击上面的图片，会提示您触发了哪种类型的事件。</p>
<p id="demo"></p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
