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

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技术所关注的。