Question

通常，有3种方法（我知道）从<a/>标签执行javascript：

1）使用onclick()：

<a href="#" onclick="alert('hello'); return false">hello</a>

2）直接链接：

<a href="javascript:alert('hello')">hello</a>

3）或外接：

// In an onload event or similar
document.getElementById('hello').onclick = window.alert('Hello'); 
return false;
<a id="hello" href="#">hello</a>

我实际上是通过AJAX加载链接，所以＃3基本上没了。那么，＃1或＃2或完全不同的东西更好吗？还有，为什么？我应该注意哪些陷阱？

另外值得注意的是，锚点确实没有链接到任何地方，因此href="#"，我正在使用a所以样式符合，因为这仍然是一个要点击的对象，一个按钮不合适在上下文中。

由于

Answer 1

如果您通过ajax加载内容并需要挂钩事件处理程序，那么您有以下选择：

使用您的选项1）或2）在您的HTML中放置一个javascript处理程序。在我看来，选项1）是一种更清晰的方式来指定它，但我不认为1）或2）之间存在着巨大的差异 - 它们基本上都是相同的。我一般不喜欢这个选项，因为我认为保持标记和代码是分开的。
使用ajax加载内容后，调用一些本地代码，找到并挂钩所有链接。如果HTML是页面中的静态HTML，那么这将是您在页面中具有的相同类型的代码并在DOMReady上执行。我会使用addEventListener（回退到attachEvent）以这种方式挂钩，因为它更干净地允许单个对象的多个侦听器。
在使用找到所有链接的ajax加载内容后调用一些代码，并将点击挂钩到一些通用的点击处理程序，然后可以检查链接中的元数据，并根据该点击确定应该对该点击执行的操作。元数据。例如，此元数据可以是单击链接上的属性。
当您加载内容时，还会加载可以单独找到每个链接的代码，并为每个链接连接一个适当的事件处理程序，就像在正常页面中加载内容时那样。这将满足将HTML与JS分离的愿望，因为JS会找到每个适当的链接并使用addEventListener或attachEvent为它挂钩事件处理程序。
就像jQuery .live()的工作原理一样，为文档级链接的未处理点击挂钩一个通用事件处理程序，并根据链接中的某些元数据发送每次点击。
运行一些使用jQuery .live()功能等实际框架的代码，而不是构建自己的功能。

我会使用哪种情况取决于具体情况。

首先，在你附加事件处理程序的三个选项中，我使用了一个新选项＃4。我会使用addEventListener（回退到旧版IE的attachEvent）而不是分配给onclick，因为这样可以更清晰地允许项目上的多个侦听器。如果是我，我将使用一个框架（jQuery或YUI），使跨浏览器兼容性不可见。这允许完全分离HTML和JS（没有JS与HTML内联），我认为在任何涉及多个人的项目中都是可取的，对我来说似乎更清晰..

然后，对于我来说，上面用哪个选项来运行连接这些事件监听器的代码只是一个问题。

如果有很多不同的HTML片段我动态加载，如果它们都是“独立的”并且可以单独维护则会更干净，那么我想同时加载HTML和相关代码将新加载的代码句柄连接到适当的链接。

如果没有真正需要通用的独立系统，因为只需要加载几个片段，并且处理它们的代码可以预先包含在页面中，那么我可能只是在之后进行函数调用HTML片段是通过ajax加载的，以便将javascript挂钩到刚刚加载的代码段中的链接。这将保持HTML和JS之间的完全分离，但是很容易实现。您可以在每个片段中放置某种键对象，以识别要调用的JS片段或者可以用作传递给JS的参数，或者JS可以只检查片段以查看哪些对象可用并连接到无论哪一个都在场。

Answer 2

现代浏览器支持Content Security Policy或CSP。这是最高级别的网络安全性，强烈建议您应用它，因为它完全阻止了所有XSS attacks。

CSP执行此操作的方式是禁用用户可以将Javascript注入页面的所有向量 - 在您的问题中，选项1和2（尤其是1）。

因此，最佳做法始终是选项3，因为如果启用CSP，任何其他选项都将中断。

Answer 3

我坚信将javascript与标记分开。恕我直言，在用于显示目的和用于执行目的之间应该有明显的区别。话虽如此，请避免使用onclick属性并在javascript:*属性中嵌入href。

替代？

您可以使用AJAX包含javascript库文件。
您可以设置javascript以查找DOM中的更改（即，如果它是“标准任务”），使锚定使用CSS类名称，该名称可以在以后动态添加时用于绑定特定机制。（jQuery .delegate()））
运行脚本POST-AJAX调用。（引入新内容，然后使用javascript [重新]绑定功能）例如：

function ajaxCallback(content){
  // add content to dom
  // search within newly added content for elements that need binding
}

Answer 4

如果您想通过AJAX加载，则数字3不会“超出”。

var link = document.createElement("a");
//Add attributes (href, text, etc...)
link.onclick = function () { //This has to be a function, not a string
    //Handle the click
    return false; //to prevent following the link
};
parent.appendChild(link); //Add it to the DOM

在锚点上执行Javascript的最佳方式

4 个答案: