Question

具体来说，我正在谈论避免这种类型的代码：

<input type='text' id='title_33' class='title'
  onfocus='updateCharsLeft(33);' 
  onkeypress='updateCharsLeft(33);' />

这里我想分别放置onfocus和onkeypress事件句柄，即在.js文件中。像这样：

$(document).ready(function()
  {
    $(".title").focus(updateCharsLeft);
    $(".title").keypress(updateCharsLeft);
);

但问题是文本框的ID需要传递给函数updateCharsLeft()。如果必须从该函数中的文本框的ID中提取出id，那么在HTML代码中放入事件处理程序实际上会更加清晰。

思想？

Answer 1

你不能这样做：

$(document).ready(function()
  {
    $(".title").focus(function() {
        updateCharsLeft(this.id);
    });
    $(".title").keypress(function() {
        updateCharsLeft(this.id);
    });
);

或更整洁：

$(document).ready(function()
  {
    $(".title .another .someother .andAnother").focus(function() {
        updateCharsLeft(this.id);
    }).keypress(function() {
        updateCharsLeft(this.id);
    });
);

Answer 2

我以前必须做类似的事情，也不满意解析ID属性的值。我可以建议的最好的事情是你使用另一个属性来获得你需要的值，比如rel属性：

<input type='text' id='title_33' class='title' rel='33' />

或者根据您对验证的宗教信仰，只需使用自定义属性：

<input type='text' id='title_33' class='title' myval='33' />

Answer 3

我绝对认为你应该将JavaScript和HTML分开。它会更容易找到/维护，你可以编辑一个地方而不是10个。不要重复自己。

我会考虑使用 jQuery的实时功能。如果您有10个文本输入，则以这种方式添加20个事件处理程序而不是2个（一个用于页面上的每个焦点处理程序，一个用于页面上的每个按键处理程序）。

另外你对karim的评论，我不明白为什么你会复制自己。如果需要，只要在命名约定中保持一致，传递id或使用正则表达式转换它应该是微不足道的。例如，this.id.replace(/.*(\d+)$/,'')。但是，传递直接DOM元素引用甚至可能更好，并在函数中使用它。

最后，你似乎认为这方面的某些方面会很糟糕。也许我错过了这一点，但是你能否澄清一下主要补充id或DOM引用或者你需要做什么其他的困难？也许发布一个更长的代码示例，说明你接下来要做什么。

Answer 4

如果您确实不想传递this.Id，那么您可以为输入标记添加自定义属性...

<input type='text' id='title_33' idSuffix='33' class='title'/>

然后你设置这样的事件处理程序......

$(document).ready(function()
{
    $(".title").focus(function() {
        updateCharsLeft(this.idSuffix);
    });
    $(".title").keypress(function() {
        updateCharsLeft(this.idSuffix);
    });
);

我个人喜欢自定义属性。它们提供了一种为Html标签提供自定义元数据并将其全部保留在标记中的方法。虽然Html验证器不喜欢它们:-(

Answer 5

我会尝试从单个JavaScript块管理所有事件。只要您能够在页面上引用元素，就应该可以这样做。

Answer 6

您始终可以使用字符串函数来解析值并将其传递，例如

$(".title").focus(function() {
   var thisid = this.id;
   updateCharsLeft(thisid.substring(thisid.indexOf("_") + 1));
});

我不确定如果必须为很多元素执行此操作会对性能产生什么影响。

Answer 7

$(document).ready(function(){
    var update = function(){ updateCharsLeft(this.id.split("_")[1]); };
    $("input.title")
        .focus(update)
        .keypress(update);
});

Answer 8

这正是Unobtrusive Javascript technique关注的重点。

是不是可以将JavaScript与HTML分开？

8 个答案: