HTML DOM事件以及on事件之六
文献种类：专题技术文献；
开发工具与关键技术：VS JavaScript
作者：吴泽锋
撰写时间：2019年4月8日
1、JavaSccript HTML DOM事件
HTML DOM 使 JavaScript有能力对 HTML 事件做出反应。
HTML 事件的例子，如：
1、当用户点击鼠标时；
2、当网页已经加载时；
3、当图片已经加载时；
4、当鼠标移动到元素上时；
5、当输入字段被改变时；
6、当提交 HTML 表单时；
7、当用户触发按键时
例1：当用户在 <h1>元素上点击时，会改变其内容：
<h1 "this.innerHTML='谢谢!'">请点击该文本2</h1>
从事件处理器调用一个函数：
<h1 "changetext(this)">请点击该文本</h1>
<script> function changetext(id) { id.innerHTML = "谢谢!"; } </script>
2、HTML 事件属性
如需向 HTML 元素分配事件，可以使用事件属性。
例2： 向 button 元素分配 onclick 事件：点击按钮就可以执行 displayDate() 函数。
<button "displayDate()">点击这里</button> <p id="demo"></p>
<script> function displayDate()
{ document.getElementById("demo").innerHTML=Date(); }
</script>
3、使用 HTML DOM 来分配事件
HTML DOM 允许通过使用 JavaScript 来向 HTML 元素分配事件：
例3：<button id="myBtn">点击这里</button> <p id="demo"></p>
<script>
document.getElementById( "myBtn" ).onclick = function(){ displayDate() };
function displayDate()
{ document.getElementById("demo").innerHTML=Date(); }
</script>
名为 displayDate 的函数被分配给 id=myButn" 的 HTML 元素。
4、onload 和 onunload 事件：会在用户进入或离开页面时被触发
4.1、onload 事件会在页面或图像加载完成后立即发生。
支持该事件的 HTML 标签：
<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>
支持该事件的 JavaScript 对象：image, layer, window
4.2、onunload 事件：支持该事件的 HTML 标签：<body>, <frameset>
支持该事件的 JavaScript 对象：window
例4.1：在页面关闭时显示一个对话框：
<body onunload = "alert( 'The onunload event was triggered' )"> </body>
例4.2：提示框会告诉你，浏览器是否已启用 cookie。
<body "checkCookies()">
<script>
function checkCookies()
{ if (navigator.cookieEnabled==true) { alert("已启用 cookie") }
else { alert("未启用 cookie") } }
</script>
</body>
5、onerror 事件：会在文档或图像加载过程中发生错误时被触发。
在装载文档或图像的过程中如果发生了错误，就会调用该事件句柄。
支持该事件的 HTML 标签：<img>, <object>, <style>
支持该事件的 JavaScript 对象：window, image
例5：如果装载图像时发生了错误，则显示一个对话框：
<img src="图片" "alert('图片加载出错！')" />
6、onfocus 事件：在对象获得焦点时发生。
例6：当输入框获得焦点时，其背景颜色将改变：
<body>
First name: <input type = "text" onfocus = "setStyle(this.id)" id = "fname">
<script type = "text/javascript">
function setStyle(x)
{ document.getElementById(x).style.background = "yellow" }
</script>
</body>
7、onchange 事件：域的内容被改变。
支持该事件的HTML标签：<input type="text">, <select>, <textarea>
支持该事件的JS对象：fileUpload, select, text, textarea
onchange 事件常结合对输入字段的验证来使用。
例7：当用户改变输入字段的内容时，会调用 upperCase() 函数。
<body>
请输入英文字符：<input type = "text" id = "fname" onchange = "myFunction()">
<p>当离开输入字段时，会触发将输入文本转换为大写的函数。</p>
<script>
function myFunction()
{ var x=document.getElementById("fname");
x.value=x.value.toUpperCase(); }
</script>
</body>
8、onblur 事件：会在对象失去焦点时发生。
例8：当用户鼠标点击除该输入框以外的位置时执行onblur代码
Name: <input type = "text" id = "123" onblur = "alert(this.id)">
借鉴于老师上课文档与W3Cchool