关于html：将JavaScript代码放在中的不同方法有什么区别？

hrefhtmljavascript

What is the difference between the different methods of putting JavaScript code in an <a>?

我已经看到以下将javascript代码放入标记的方法：

1	function DoSomething() { ... return false; }

link

我理解这样一个想法，那就是尝试放置一个有效的URL，而不仅仅是javascript代码，以防用户没有启用javascript。但是为了讨论这个问题，我需要假设启用了javascript(没有它他们就不能登录)。

我个人喜欢选项2，因为它允许您查看将要运行的内容&ndash；，特别是在有参数传递给函数的地方进行调试时非常有用。我用了很多，没有发现浏览器问题。

我读过有人推荐4，因为它给了用户一个真正的链接，但实际上，不是"真实的"。它绝对不会去哪里。

当您知道用户启用了javascript时，是否有一个不受支持或非常糟糕？

相关问题：javascript链接的href：""或"javascript:void(0)"？.

相关讨论

我非常喜欢MattKruse的javascript最佳实践文章。在本文中，他指出使用href部分来执行javascript代码是一个坏主意。尽管您已经声明您的用户必须启用javascript，但如果登录后有人碰巧关闭了javascript，那么您没有理由没有一个简单的HTML页面可以让您的所有javascript链接指向他们的href部分。我强烈建议您仍然允许这种回退机制。这样的事情将坚持"最佳实践"并实现您的目标：

相关讨论

当你可以使用addEventListener/attachEvent时，为什么要这样做？如果没有href等价物，不要使用，使用

你忘了另一种方法：

5: Link

使用javascript代码：

1
2
3

document.getElementById('myLink').onclick = function() {
// Do stuff.
};

我不能评论哪一个选项有最好的支持，或者哪一个在语义上是最好的，但是我要说的是，我更喜欢这种风格，因为它将你的内容和你的javascript代码分开。它将所有的javascript代码放在一起，这样更容易维护(特别是当您将它应用于许多链接时)，您甚至可以将它放在一个外部文件中，然后打包以减少文件大小并由客户端浏览器缓存。

相关讨论

link

我会这样做，或者：

1
2
3
4
5

link
(document.getElementById("Link")).onclick = function() {
DoSomething();
return false;
};

视情况而定。对于更大的应用程序，第二个是最好的，因为它整合了您的事件代码。

相关讨论

仅限现代浏览器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(doc){
var hasClass = function(el,className) {
return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1;
}
doc.addEventListener('click', function(e){
if(hasClass(e.target, 'click-me')){
e.preventDefault();
doSomething.call(e.target, e);
}
});
})(document);

function doSomething(event){
console.log(this); // this will be the clicked element
}


</head>
<body>


<button class="click-me">Button 1</button>
<input class="click-me" type="button" value="Button 2">

</body>
</html>

跨浏览器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(doc){
var cb_addEventListener = function(obj, evt, fnc) {
// W3C model
if (obj.addEventListener) {
obj.addEventListener(evt, fnc, false);
return true;
}
// Microsoft model
else if (obj.attachEvent) {
return obj.attachEvent('on' + evt, fnc);
}
// Browser don't support W3C or MSFT model, go on with traditional
else {
evt = 'on'+evt;
if(typeof obj[evt] === 'function'){
// Object already has a function on traditional
// Let's wrap it with our own function inside another function
fnc = (function(f1,f2){
return function(){
f1.apply(this,arguments);
f2.apply(this,arguments);
}
})(obj[evt], fnc);
}
obj[evt] = fnc;
return true;
}
return false;
};
var hasClass = function(el,className) {
return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1;
}

cb_addEventListener(doc, 'click', function(e){
if(hasClass(e.target, 'click-me')){
e.preventDefault ? e.preventDefault() : e.returnValue = false;
doSomething.call(e.target, e);
}
});
})(document);

function doSomething(event){
console.log(this); // this will be the clicked element
}


</head>
<body>


<button class="click-me">Button 1</button>
<input class="click-me" type="button" value="Button 2">

</body>
</html>

您可以在文档准备就绪之前运行此操作，单击按钮将起作用，因为我们将事件附加到文档。

资料来源：

测试元素是否包含类？
event.preventDefault()函数在IE中不工作
https://gist.github.com/eduardocereto/955642

我注意到的一个区别是：

Click me

而这：

Click me

在任何一种情况下，如果你有：

1	$('.actor').click(act2);

然后，对于第一个示例，act2将在act1之前运行，而在第二个示例中，它将相反。

方法2在ff3和ie7中有语法错误。我更喜欢方法1和3，因为4使用弄脏了URI，尽管这会减少键入…显然，正如其他响应所指出的，最好的解决方案是将HTML与事件处理分开。

相关讨论