网页链接说明的JS程序

最新推荐文章于 2023-06-03 16:01:33 发布

码动传奇

最新推荐文章于 2023-06-03 16:01:33 发布

阅读量383

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/u013806814/article/details/48809317

版权

javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

通过even对象t获取对象属性(srcElement或target属性)的使用和将事件设置为属性的使用，制作网页链接说明的小JS demo

//在Internet Explorer的event属性中event.srcElement代表元素出现的对象
//在Netscape和Firefox的event属性中event.target代表元素出现的对象
<!document html>
<body>
<h1>为网页链接添加说明</h1>
<center>
	<a  href="http://baidu.com" id="ex1">example1</a><br/>
	<a href="http://sogou.com" id="ex2">example2</a><br/>
	<a href="http://huohu.com" id="ex3">example3</a><br/>
	<h2 id="description"></h2><br/>
</center>

<script language="javascript" type="text/javascript">
function hover(e){
	if(!e) var e = window.event;
	whichlink = (e.target) ? e.target.id : e.srcElement.id;	//whichlink获取元素的对象
	if(whichlink=="ex1") desc="示例1";
	else if(whichlink=="ex2") desc="示例2";
	else if(whichlink=="ex3") desc="示例3";
	t = document.getElementById("description");
	t.innerHTML = desc;
}

function cleardesc(){
	t = document.getElementById("description");
	t.innerHTML = "";
}

alink = document.getElementById("ex1");
alink.onmouseover = hover;	//将事件设置为属性，注意onmouseover都是小写。
alink.οnmοuseοut=cleardesc;

blink = document.getElementById("ex2");
blink.onmouseover = hover;
blink.οnmοuseοut=cleardesc;

clink = document.getElementById("ex3");
clink.onmouseover = hover;
clink.οnmοuseοut=cleardesc;
</script>
</body>
</html>