js中关于简单事件的处理与浏览器对象_简单事件包含浏览器事件-优快云博客

本文链接：https://blog.youkuaiyun.com/asdfzjs/article/details/12492195

本文介绍了HTML中简单的事件处理方法，如点击和鼠标悬停事件，并演示了如何通过JavaScript来改变元素的样式。此外，还展示了如何在不同浏览器窗口间传递值，包括打开新窗口并将其数据反馈到父窗口的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>简单的事件处理</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--
    <script language="text/javascript" src="hello.html">这个js的外部调用标签不能自结束</script>
    <link rel="stylesheet" type="text/css" href="./styles.css">
    -->
    <script type="text/javascript">
    	function clickD(obj){
    		alert(obj.innerHTML);
    	}
    	
    	function mouseD(obj){
    		obj.style.color = "#f00";
    		//当使用代码来设置样式时，如果css中通过-来表示的，都必须要用驼峰标示font-size -> fontSize
    		obj.style.fontSize = "16px";
    	}
    	function outD(obj){
    		obj.style.color = "#000";
    		obj.style.fontSize = "18px";
    	}
    	
    	//with的用法
    	with(document){
    		write("dddd<br/>");
    	}
    	document.write("aaaa<br/>");
    	document.write("bbbb<br/>");
    	document.write("cccc<br/>");
    </script>
  </head>
  
  <body>
  	<div οnclick="clickD(this)" style="cursor:pointer;">点击了试一下</div>
    <div οnmοuseοver="mouseD(this)" οnmοuseοut="outD(this)">鼠标移动来试试</div>
    
  </body>
</html>

2，浏览器对象的例子：《涉及的是两个浏览器页面之间的传值》

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>js01_hello</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript">
	// setTimeout("endWelcome()",5000);
	// function endWelcome() {
		// document.getElementById("welcome").style.display = "none";
	// }
	</script>
</head>
<body>
	<div id="welcome">欢迎进行我们的网站</div>
	<a href="#" οnclick="window.open('test02.html','aaa','width=300,height=300,resizable=0')">test02</a>
	<a href="#" οnclick="window.open('test03.html','aaa','width=400,height=400,resizable=0')">test03</a>
	<br/>
	<a href="#" οnclick="window.open('bless.html','aaa','width=600,height=300')">输入你祝福语</a>
	<a href="#" οnclick="window.open('bless.html','aaa','width=600,height=300')">选择性别</a>
	<div id="bless"></div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>js01_hello</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript">
	function bless() {
		//获取输入的祝福语
		var mb = document.getElementById("mb").value;
		//获取父类窗口
		var p = window.opener;
		//获取父类窗口中的id为bless的div
		var pd = p.document.getElementById("bless");
		//设置pd的值
		pd.innerHTML = mb;
		//关闭当前窗口
		window.close();
	}
	</script>
</head>
<body>
	输入祝福语:<input type="text" size="40" id="mb"/><input type="button" οnclick="bless()" value="输入" />
</body>
</html>