JavaScript_03 事件

最新推荐文章于 2024-08-29 21:48:56 发布

yongdami

最新推荐文章于 2024-08-29 21:48:56 发布

阅读量409

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/yongdami/article/details/39433891

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了HTML中常见的事件如onload、onclick等的应用场景及使用方法，并通过实例展示了如何利用JavaScript进行DOM元素的创建与删除。

属性	事件发生时机
onabort	图片下载被打断时
onblur	元素失去焦点时
onchange	框内容改变时
onclick	鼠标点击一个对象时
ondblclick	鼠标双击一个对象时
onerror	当加载文档或图片时发生错误时
onfocus	当元素获取焦点时
onkeydown	按下键盘按键时
onkeypress	按下或按住键盘按键时
onkeyup	放开键盘按键时
onload	页面或图片加载完成时
onmousedown	鼠标被按下时
onmousemove	鼠标被移动时
onmouseout	鼠标离开元素时
onmouseover	鼠标经过元素时
onmouseup	释放鼠标按键时
onreset	重新点击鼠标按键时
onresize	当窗口或框架被重新定义尺寸时
onselect	文本被选择时
onsubmit	点击提交按钮时
onunload	用户离开页面时

点击事件

  <body>
    
    <script type="text/javascript">
    	document.getElementById("pp").style.color = "red";
  	</script>
  	
  	<p onclick="this.innerHTML='谢谢'">1213</p>
  	
  </body>

  <body>
    
    <script type="text/javascript">
    	function chang(id){
			id.innerHTML = "谢谢";
        	}
  	</script>
  	
  	<p onclick="chang(this)">1213</p>
  	
  </body>

  <body>
    
    <script type="text/javascript">
    	function chang(){
			document.getElementById("qq").innerHTML = new Date();
        }
  	</script>
  	
  	<button onclick="chang()">查看时间</button>
  	
  	<p id="qq"></p>
  	
  </body>

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

  <body onload="checkCookies()">
    
    <script type="text/javascript">
    	function checkCookies(){
			if(navigator.cookieEnable == true){
				alert("已启用cookie");
			}
			else{
				alert("未启用cookie");	
			}
        }
  	</script>
  	
  </body>

onshange事件光标离开转换大写

 <body onload="checkCookies()">
    
    <script type="text/javascript">
    	function upp(){
			var str = document.getElementById("aa");
			str.value = str.value.toUpperCase();
        }
  	</script>
  	
  	请输入字母:<input id="aa" onchange="upp()" type="text"/>
  	
  </body>

onmouseover 与 onmouseout 事件鼠标移动鼠标离开

 <body>
  
	  <script type="text/javascript">
	    	function mov(me){
				me.innerHTML = "谢谢";
	        }
	        
	    	function mou(me){
				me.innerHTML = "继续移上来";
	        }
	  </script>
	  
	 
	   <div onmouseover="mov(this)" onmouseout="mou(this)" 
	   		style="background-color: green;width: 150px;height: 100px">
	    	把鼠标移上来
	   </div>
 
  </body>

onmousedown 与 onmouseup 鼠标按下与鼠标释放事件

  <body>
  
	  <script type="text/javascript">
	    	function mdown(me){
				me.innerHTML = "按下我";
	        }
	        
	    	function mup(me){
				me.innerHTML = "释放我";
	        }
	  </script>
	  
	 
	   <div onmousedown="mdown(this)" onmouseup="mup(this)" 
	   		style="background-color: green;width: 150px;height: 100px">
	    	把鼠标移上来
	   </div>
 
  </body>

创建新的 HTML 元素

<body>

	<div id="div1">
		<p>这是一个段落</p>
		<p>这是另一个段落</p>
	</div>
			
	<script type="text/javascript">
	    	var para = document.createElement("p");
	    	var node = document.createTextNode("这是新的段落");
	    	para.appendChild(node);

	    	var element = document.getElementById("div1");
	    	element.appendChild(para);
	 </script>

</body>

删除已有的 HTML 元素

	<body>

	   <div id="div1">
		<p id="pp">这是一个段落</p>
		<p>这是另一个段落</p>
	   </div>
			
	   <script type="text/javascript">
	    	var dd = document.getElementById("div1");
	    	var pp = document.getElementById("pp");
	    	dd.removeChild(pp);
	   </script>

	</body>

fgdsgfds