偷米寄居

为何要分离

在项目进行时，我们提交页面后，程序开发工程师需要在HTML结构上编写行为代码。

例如:

<a href="javascript:alertTommy()">alert my name</a>
<script type="text/javascript">
	function alertTommy(){
		alert('tommy')
	}
</script>

由例子可以看出，a标签捆绑住了函数alertTommy()。

当函数需要改变，就比如tommy十年后己经不再是tommy,tommy现在是叫tom。

当然你可以修改alertTommy函数里面的内容alert(’tommy’)为alert(’tom’)，让用户看到tommy的改变。

<a href="javascript:alertTommy()">alert my name</a>
<script type="text/javascript">
	function alertTommy(){
		alert('tom')
	}
</script>

现在感觉到问题的存在了吧？看一看结构， javascript:alertTommy();该死的tommy还是tommy。

如果不单单是名字变了。我点击不想弹出，而是把tommy的名字写在页面的某个div内，那函数名还是那样子alertTommy，这样的结果太糟糕了。

<a href="javascript:alertTommy()">alert my name</a>
<div id="div1">content</div>
<script type="text/javascript">
	function alertTommy(){
		document.getElemntById('div1').innerHTML = 'tom';
	}
</script>

然而后面还有更糟糕的事情会发生。

在用户禁用了浏览器脚本运行的时候，页面显示的是一个链接，但点击之后因为脚本被禁用根本没任何反应，就像这样：

alert my name

如何解决

其实我们可以这样让变得简单！

在我们给于程序开发工程师页面的时候结构附加上一个id，然后链接地址给于正确的地址或者页面锚点，最后使用脚本为这id所属无素添加事件。

<a href="http://www.tommyfan.com/" id="link1" >alert my name</a>
<script type="text/javascript">
	...
	window.onload = function(){
		document.getElementById('div1').onclick = function(){
			document.getElemntById('div1').innerHTML = 'tom'
		}
	}
</script>