javascript代码与html分离进阶

最新推荐文章于 2023-05-07 08:28:39 发布

deargua

最新推荐文章于 2023-05-07 08:28:39 发布

阅读量2.3k

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/deargua/article/details/40629447

版权

javascript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

nodeName属性的结果总是大写的，即使在html代码中标签是小写。

onclick事件虽然叫onclick，但是通过tab来切换链接，并通过回车按下执行的点击大多都会执行onclick事件。

HTML-DOM DOM-Core区别
DOM是一个通用的东西，并不专属于javascript，针对不同的领域定制了很多不同的DOM
像getAttribute和setAttribute是DOM中的基础方法，这些方法在HTML－DOM中提供了简便的访问方法。比如tag.href

下面的例子是将上面说的图库的例子进行了重写，这里使用了HTML－DOM中的各种简便写法。

另外，将javascript和HTML进行完全分离，当javascript不被浏览器支持时，HTML的照样可以访问。最重要的是这里html看起来不没有任何异常（没有使用javascript:伪协议，html中没有onclik函数）

图库的html代码

<!doctype html>

<a href="img1.jpeg" title="IMG1">IMG1</a><br>
<a href="img2.jpeg" title="IMG2">IMG2</a><br>
<a href="img3.jpeg" title="IMG3">IMG3</a><br>

<hr>
<h1 id="title">default</h1>
<hr>
<img id="show" src="img1.jpeg">

<script src="javascript.js"></script>

相关javascript代码，注意给onload或者onclick赋值的时候必须是函数定义（可带参数），或者函数地址，或者匿名函数。

window.onload = function() //匿名函数或实名函数均可
{
	var links = document.getElementsByTagName("a");
	var target = document.getElementById("show");
	var title = document.getElementById("title");
	
	for(var i=0; i < links.length; i++) 
	{
		links[i].onclick = function() //匿名函数或实名函数均可
		{ 
			//links[i]是for循环内的变量，不能在这个函数中使用。
			//当点击链接执行函数时，对于链接执行的onclick函数来说
			//并不认识links[i]是什么东西，相反，this则代表a标签本身。
			//target.src = links[i].href); 
			target.src = this.href
			title.firstChild.nodeValue = this.title;
			return false;
		}
	}
}

onload事件，onload 事件会在页面或图像加载完成后立即发生。

image，layer，window都支持该事件，本文中用到的时window的unload事件。但是默认的unload赋值时，可以写一段javascript代码，赋值函数时，只能写一个函数，当多次赋值时只有最后一个有效。下面方法实现了多次赋值的功能。

1.笨方法，直接写一个封装函数

window.onload = function(){
	firstFunction();
	secondFunction();
}

2.高档一些的做法,如下所述，形成了一个对了，可以不停的进行Add

function addOnLoadEvent(func)
{
	var oldonload = window.onload;
	if (typeof(oldonload) != "function") //如果还没有赋值过函数
	{
		window.onlaod = func;
	}
	else
	{
		window.onload = function()
		{
			oldonload();
			func();
		}
	}
}

《完》

deargua

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javascript代码与html分离进阶

nodeName属性的结果总是大写的，即使在html代码中标签是小写。onclick事件虽然叫onclick，但是通过tab来切换链接，并通过回车按下执行的点击大多都会执行onclick事件。HTML-DOM DOM-Core区别DOM是一个通用的东西，并不专属于javascript，针对不同的领域定制了很多不同的DOM像getAttribute和setAttribute是
复制链接

扫一扫

专栏目录