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

一般来说,有3种方式(我知道)从< a />标签：

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 =“#”,我使用的样式是符合的,因为这仍然是一个被点击的对象,并且按钮在上下文中是不合适的.

谢谢

解决方法

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

>使用你的选项1)或2)在你的HTML中放置一个JavaScript处理程序.在我看来,选择1)是一个更清晰的方式来指定它,但我不认为1)或2)之间有一个不同之处 – 他们都做同样的事情.我通常不是这个选项的粉丝,因为我认为有保留标记和代码的价值.
>用ajax加载内容后,调用一些可以找到并挂接所有链接的本地代码.如果您的页面中的HTML已经是静态HTML,那么这将是与您的页面中相同的代码,并在Domready上执行.我将使用addEventListener(回退到attachEvent)来连接这种方式,因为它更干净地允许单个对象的多个侦听器.
>在使用ajax加载内容之后,调用一些代码,找到所有的链接,并将点击钩到一些通用点击处理程序,然后可以检查链接中的元数据,并找出基于元数据的点击应该做什么.例如,该元数据可以是点击的链接上的属性.
>加载内容时,还可以加载可以单独查找每个链接的代码,并为每个链接绑定一个适当的事件处理程序,这个方法大多数情况下,如果内容正在加载到常规页面中.这将满足从JS分离HTML的愿望,因为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可以检查代码段以查看哪些对象可用,并连接到无论哪一个都存在

原文地址：https://www.jb51.cc/js/153442.html