HTML DOM事件以及on事件之六

最新推荐文章于 2025-05-27 09:28:53 发布

原创最新推荐文章于 2025-05-27 09:28:53 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#HTML DOM事件以及on事件之六

新人路途专栏收录该内容

33 篇文章

订阅专栏

本文详细介绍了HTML DOM事件及其应用场景，包括用户交互事件（如点击、聚焦）、页面加载与卸载事件、错误处理事件等，并提供了多个实例演示如何使用JavaScript响应这些事件。

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