分离式JavaScript

最新推荐文章于 2022-12-14 18:31:34 发布

ohanweb123

最新推荐文章于 2022-12-14 18:31:34 发布

阅读量411

点赞数

本文探讨了JavaScript的不同触发方式，包括使用javascript:伪协议、事件处理函数属性(onclick等)及DOM脚本编程方法，并分析了它们的优缺点。

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

大多数脚本都存储在后缀名为.js的外部文件，通过<script>标签与网页关联起来，然而，有些JavaScript仍然需要插在标记中。

有时通过给链接附上”javascript:伪协议”这样的指令来触发JavaScript函数，比如：

<a href="javascript:doSomething();">Click me!<a/>

这不是一个真正的因特网协议(比如http://或ftp://),它只支持JavaScript。如果JavaScript被禁用了。好的结果是，什么都不发生；会的结果是，浏览器会报错。

更常见的做法是用事件处理函数的某些属性(比如onclick)调用JavaScript函数。大多数情况下，这些事件处理函数与某个无关的内部链接相关联：

<a href="#" onclick="doSomething();return false;">Click me!</a>

它比用javascript:伪协议要好一些，但是这也属于对href属性的滥用。如果JavaScript被禁用了，用户则被连接到当前文档的顶部。

<a href="#" onclick="doSomrthing();return false;">Click me!</a>

href属性应该指向一个真实存在的资源。这样一来，在JavaScript被禁用后，也会有条退路：

<a href="page.html" onclick="doSomrthing();return false;">Click me!</a>

上面的方法考虑到了”禁用JavaScript”的情况，这是与javascript:伪协议的在主要区别，但是，它仍然把调用JavaScript函数的语句嵌在了事件处理函数中。

你无须通过嵌入式的事件处理函数触发JavaScript函数，可通过DOM脚本编程把事件与函数关联起来。

var links = document.getElementsByTagName("a");
for(var i=0; i<links.length;i++){
    links[i].onclick = function(){
        doSomething();
        return false;
    }
}

参考:Bulletproof Ajax中文版