jquery点击功能说明

jquery click function explanation

我可以让$("#demoMapPut").click(function(){ console.log("Success!");});在HTML页面中充当事件处理程序。

但是，如果我将其更改为：

1
2
3
4
5

$("#demoMapPut").click(onPutMap);

var onPutMap = function(evt){
console.log("This is a Test");
}

似乎不再是了。有人能指出我是否做错了什么吗？这只是一个简单的例子，我用id="demoMapPut"单击一个HTML按钮，控制台中会出现一条消息。

相关讨论

简单。在处理程序之前声明函数。

1
2
3
4
5

var onPutMap = function(evt){
console.log("This is a Test");
}

$("#demoMapPut").click(onPutMap);

现在，让我们结合一些最佳实践(和我的强迫症)。

首先，最好根据处理的内容命名处理程序。所以不是"onputmap"，而是"onclickmapput"会更好。此外，我还建议使用"打开"而不是单击快捷方式。此外，最好总是对字符串声明使用单引号。所以我的OCD重写如下：

1
2
3
4
5
6
7

var onClickDemoMapPut;

onClickDemoMapPut = function ( event ) {
console.log( 'This is a test' );
}

$( '#demo-map-put' ).on( 'click', onClickDemoMapPut );

我知道这些都很简单，也许看起来很傻，但有些可以节省很多时间。例如，查看处理程序名称"onclickdemomapput"：约定告诉我调用它的确切内容。这有助于减少愚蠢的错误和认知开销。

此外，还有围绕混合大小写类和ID名称的X浏览器问题。为了这些目的只使用小写是明智的。另外，类名有破折号作为名称间距的一种形式，并且避免了大小写混合。

干杯，祝你好运！