您的位置
主页 > 网站技术 > 语言编程 > » 正文

简单介绍下js中事件的处理与浏览器对象

来源: 站长圈 点击:

本文主要介绍关于js中简单事件的处理与浏览器对象,下面有个不错的示例,感兴趣的朋友可以参考下!

复制代码 代码如下:

<!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> 

<p onclick="clickD(this)" style="cursor:pointer;">点击了试一下</p> 

<p onmouseover="mouseD(this)" onmouseout="outD(this)">鼠标移动来试试</p> 

</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> 

<p id="welcome">欢迎进行我们的网站</p> 

<a href="#" onclick="window.open('test02.html','aaa','width=300,height=300,resizable=0')">test02</a> 

<a href="#" onclick="window.open('test03.html','aaa','width=400,height=400,resizable=0')">test03</a> 

<br/> 

<a href="#" onclick="window.open('bless.html','aaa','width=600,height=300')">输入你祝福语</a> 

<a href="#" onclick="window.open('bless.html','aaa','width=600,height=300')">选择性别</a> 

<p id="bless"></p> 

</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的p 

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" onclick="bless()" value="输入" /> 

</body> 

</html> 




首页  - 关于站长圈  - 广告服务  - 联系我们  - 关于站长圈  - 网站地图  - 版权声明