JS HTML DOM事件

JavaScrip学习

之前mooc网上的视频对JavaScript知识介绍的比较少，自己也不是很了解，今天开始在W3School上系统的学一学JavaScript相关知识。
让我们先通过一个获取时间和日期的实例来进入今天的学习吧。

显示日期和时间

<!DOCTYPE html>
<html>
<body>
<h2>我的第一段 JavaScript</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
点击这里来显示日期和时间
</button>
<p id="demo"></p>
</body>

在这一段代码中有事件，函数，DOM操作等知识。
首先我们需要button按钮标签实现一个按钮；事件时点击按钮onclick；点击之后通过id查找元素，innerHTML写入Date函数获取的日期和时间。

js HTML DOM事件

js事件在web前端开发中必不可少，鼠标点击，移动，键盘按下，文本框输入等都是js html dom事件，事件可以增强用户的互动感、体验感。
js html dom事件可以分为输入事件，鼠标事件，点击事件，加载事件等。

输入事件

onblur-离开输入字段时

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  var x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}
// 通过id寻找元素，function函数实现输入文本转为大写
</script>
</head>
<body>

请输入您的英文姓名：<input type="text" id="fname" onblur="myFunction()">
<!-- 当onblur事件产生时执行function函数 -->
<p>当离开输入字段时，会触发一个函数，将输入文本转换为大写。</p>

</body>
</html>

onchange-更改输入字段的内容时

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  var x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}
// 通过id寻找元素，function函数实现输入文本转为大写
</script>
</head>
<body>

请输入您的姓名：<input type="text" id="fname" onchange="myFunction()">
<!-- 当onchange事件产生时执行function函数 -->
<p>离开输入字段时，会触发一个函数，将输入文本转换为大写。</p>

</body>
</html>

onchange-选择下拉值时

<!DOCTYPE html>
<html>
<head>
<script>
function preferedBrowser() {
  prefer = document.forms[0].browsers.value;
  alert("你喜欢使用 " + prefer + " 在网上冲浪！");
}
// preferedBrowser函数，prefer获取value值，并弹出窗口显示你喜欢使用XX在网上冲浪
</script>
</head>
<body>

<form>
请选择您喜欢的浏览器：
  <select id="browsers" onchange="preferedBrowser()">
  <!-- 当onchange事件产生时执行preferedBrowser函数 -->
    <option value="Chrome">Chrome</option>
    <option value="Internet Explorer">Internet Explorer</option>
    <option value="Firefox">Firefox</option>
  </select>
</form>
<!-- 表单下拉窗口 -->
</body>
</html>

onfocus-输入字段获取焦点时

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x) {
  x.style.background = "yellow";
}
// function函数实现背景颜色变黄
</script>
</head>
<body>

请输入您的姓名：<input type="text" onfocus="myFunction(this)">
<!-- 当onfocus事件产生时，执行function函数 -->
<p>当输入字段获得焦点时，将触发一个更改背景颜色的函数。</p>

</body>
</html>

onselect-输入文本被选取时

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "你选择了一些文字";
}
// 通过id寻找元素，function函数实现输入文本
</script>
</head>
<body>

一些文本：<input type="text" value="Hello world!" onselect="myFunction()">
<!-- 当onselect选择事件产生时，执行function函数 -->
<p id="demo"></p>

</body>
</html>

onsubmit-点击提交按钮时

<!DOCTYPE html>
<html>
<head>
<script>
function confirmInput() {
  fname = document.forms[0].fname.value;
  alert("Hello " + fname + "！您现在将被重定向到 www.w3School.com.cn");
}
// confirmInput函数，弹出说明窗口
</script>
</head>
<body>
<!-- 当onsubmit提交事件产生时，执行confirmInput函数 -->
<form onsubmit="confirmInput()" action="http://www.w3school.com.cn/">
  请输入您的姓名：<input id="fname" type="text" size="20">
  <input type="submit">
</form>

</body>
</html>

onreset-点击重置按钮时

<!DOCTYPE html>
<html>
<head>
<script>
function message() {
  alert("此警报框由 onreset 事件处理程序触发");
}
// message函数，弹出说明窗口
</script>
</head>
<body>
<!-- 当onrese重置事件产生时，执行message函数 -->
<form onreset="message()">
  请输入您的姓名：<input type="text" size="20">
  <input type="reset">
</form>

</body>
</html>

onkeydown-键盘按下某个键时

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  alert("您在输入字段中按了一个键");
}
// 弹出说明窗口
</script>
</head>
<body>

<p>当用户在输入字段中按键时，将触发函数。</p>
<!-- 当onkeydown键盘按下事件产生时，执行function函数 -->
<input type="text" onkeydown="myFunction()">

</body>
</html>

onkeypress-键盘按下某个键时

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  alert("您在输入字段中按了一个键");
}
// 弹出说明窗口
</script>
</head>
<body>

<p>当用户在输入字段中按键时，将触发函数。</p>
<!-- 当onkeypress键盘按下事件产生时，执行function函数 -->
<input type="text" onkeypress="myFunction()">

</body>
</html>

我们可以看到onkeydown和onkeypress都是键盘按下事件，那么它们的区别有一下几点：
1、onkeydown是用户按下任何键盘键时发生的事件
2、onkeypress是用户按下任何数字字母键时发生的事件，对于系统按钮（箭头，功能键）无法识别。

onkeyup-键盘释放按键时

<!DOCTYPE html>
<html>
<head>
<script>
// writeMessage函数实现将输入内容写入另一个文本框
function writeMessage() {
  document.forms[0].mySecondInput.value = document.forms[0].myInput.value;
}
</script>
</head>
<body>

<p>当键盘按键正在向上移动时，会发生 onkeyup 事件。</p>
<!-- 当onkeyup键盘释放事件发生时，执行writeMessage函数 -->
<form>
  请输入您的姓名：
  <input type="text" name="myInput" onkeyup="writeMessage()" size="20">
  <input type="text" name="mySecondInput" size="20">
</form>

</body>
</html>

鼠标事件

onmouseover/onmouseout-鼠标移入/移出时

<!DOCTYPE html>
<html>
<body>
<!-- 当onmouseover/onmouseout事件发生执行颜色改变，鼠标移入变红色，鼠标移出变绿色 -->
<h1 onmouseover="style.color='red'" onmouseout="style.color='green'">将鼠标悬停在此文字上</h1>

</body>
</html>

onmousedown/onmouseup-鼠标按下/释放时

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(elmnt, clr) {
  elmnt.style.color = clr;
}
// function函数实现颜色改变
</script>
</head>
<body>
<!-- 当onmousedown/onmouseup事件发生执行function函数，鼠标点击文本颜色变红，鼠标松开文本颜色变绿 -->
<p onmousedown="myFunction(this,'red')" onmouseup="myFunction(this,'green')">
单击文本以更改颜色。按下鼠标按钮时会触发带参数的函数，当释放鼠标按钮时，会再次使用其他参数触发。
</p>

</body>
</html>

onmousemove-鼠标移动时

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(e) {
  x = e.clientX;
  y = e.clientY;
  coor = "Coordinates: (" + x + "," + y + ")";
  document.getElementById("demo").innerHTML = coor
}
// myfunction函数通过clientX和clientY获取鼠标坐标，并通过innnerHTML输入id为demo的p标签中
function clearCoor() {
  document.getElementById("demo").innerHTML = "";
}
</script>
</head>
<body style="margin:0px;">
<!-- 当onmousemove鼠标移动事件，onmouseout鼠标移出事件发生时执行clearCoor函数 -->
<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>

点击事件

onclick-单击按钮时

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}
// function函数实现在id为demo的标签中写入Hello World
</script>
</head>
<body>

<p>单击按钮以触发函数。</p>
<!-- 当onclick单击按钮事件发生时，执行function函数 -->
<button onclick="myFunction()">点击这里</button>

<p id="demo"></p>

</body>
</html>

ondblclick-双击文本时

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}
// function函数实现在id为demo的标签中写入Hello World
</script>
</head>
<body>
<!-- 当ondblclick双击事件发生时，执行function函数 -->
<p ondblclick="myFunction()">双击此段以触发函数。</p>

<p id="demo"></p>

</body>
</html>

加载事件

onloat-页面加载完成时

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  alert("页面已加载");
}
// 弹出窗口说明文本
</script>
</head>
<!-- 当onload页面加载后执行function函数 -->
<body onload="myFunction()">
<h2>Hello World!</h2>
</body>

</html>

onerror-页面加载失败时

<!DOCTYPE html>
<html>
<head>
<script>
function imgError() {
  alert('无法加载图像。');
}// 弹出窗口说明文本
</script>
</head>
<body>
<!-- 当onerror加载失败后执行imgError函数 -->
<img src="image.gif" onerror="imgError()">

<p>如果加载图像时发生错误，则会触发函数。该函数显示带有文本的警告框。在此例中，我们引用了不存在的图像，因此发生了 onerror 事件。</p>

</body>
</html>

onresize-改变窗口时

<!DOCTYPE html>
<html>
<!-- 当onresize改变窗口事件发生时，弹出说明窗口 -->
<body onresize="alert('改变了窗口')">
<p>尝试改变窗口大小</p>
</body>

</html>