制作链接触发 Javascript

在网页开发中，经常需要通过触发JavaScript来实现一些交互效果，比如点击按钮弹出提示框，或者切换图片显示等。本文将介绍如何制作一个可以触发JavaScript的链接。

1. href 属性实现

我们知道，链接可以通过href属性指定跳转的页面，但是href属性也可以是JavaScript代码。如果我们在链接中指定href为javascript:xxx，则点击链接时就会执行xxx这段JavaScript代码。

<a href="javascript:alert('Hello world!')">点击我弹出提示框</a>

以上代码会在点击链接时弹出一个提示框，内容为"Hello world!"。这种方法实现简单，但是代码放在HTML中，容易让代码看起来混乱。

2. onclick 属性实现

另一种实现方法是使用onclick属性。我们可以将JavaScript代码写在onclick属性中，当用户点击链接时，就会执行onclick属性中的JavaScript代码。

<a href="#" onclick="alert('Hello world!')">点击我弹出提示框</a>

以上代码会在点击链接时弹出一个提示框，内容为"Hello world!"。这种方法代码易读，但是需要我们手动阻止链接的默认行为（跳转页面），通常使用return false来实现。

<a href="#" onclick="alert('Hello world!'); return false;">点击我弹出提示框</a>

以上代码在执行完JavaScript代码后，使用return false来阻止链接跳转。还有一种写法是使用event.preventDefault()来阻止默认行为。

<a href="#" onclick="alert('Hello world!'); event.preventDefault();">点击我弹出提示框</a>

3. 通过JavaScript绑定事件

第三种方法是通过JavaScript来绑定事件。我们可以使用addEventListener或attachEvent方法给链接绑定click事件，当用户点击链接时，就会执行指定的JavaScript代码。

<a id="link1" href="#">点击我弹出提示框</a>

var link1 = document.getElementById('link1');
link1.addEventListener('click', function() {
    alert('Hello world!');
});

以上代码解释如下：

• 首先获取id为link1的链接元素。
• 使用addEventListener方法为link1添加click事件，并指定要执行的JavaScript代码。
• 当用户点击link1时，就会执行alert('Hello world!')这段JavaScript代码。

这种方法可以将JavaScript代码和HTML代码分离，代码易读易维护。但是需要注意的是，attachEvent方法只能在IE浏览器中使用，而addEventListener方法则是标准方法，兼容性更好。

总结

本文介绍了三种方法制作链接触发JavaScript。使用href属性实现简单，但是代码放在HTML中不易维护；使用onclick属性代码易读易维护，但需要手动阻止链接的默认行为；通过JavaScript绑定事件可以将代码和HTML分离，但需要注意兼容性。开发者可以根据需求选择适合自己的方法。