为多个事件调用相同的事件处理程序

Question

在打开jquery模态时，我想调用一个事件处理程序来计算textarea字段中的行数，如:

$(".modal").on("focus", function() {
    var textarea = $(this)[0],
        lines = t.value.split("n").lenth;
});

这可以工作，但我还想在编辑文本区域时实时计算行数。

$(".textarea").on("onkeydown onkeyup", function() {
    var textarea = $(this)[0],
        lines = t.value.split("n").lenth;
});

我将不得不键入相同的行两次甚至更多。有什么捷径吗?

Answer 1

您可以将逻辑提取到一个函数中，然后您可以根据需要将该函数附加到任意多个事件处理程序。试试这个:

function getLines() {
    var textarea = $(this)[0],
    lines = t.value.split("n").length; //Note: fixed typo
}
$(".modal").on("focus", getLines);
$(".textarea").on("onkeydown onkeyup", getLines);

假设.modal和.textarea是同一元素，因此函数中的this总是指向同一元素。

如果它们不指向相同的元素，您可以使用$.proxy()来更改函数的作用域:

$(".modal").on("focus", function() {
    $.proxy(getLines, $(this).find('.textarea'))();
});
$(".textarea").on("onkeydown onkeyup", getLines);

Answer 2

多亏了Rory，我终于找到了解决方案

function get_code_lines(element) {
    var content = $(element).find("textarea.codeview").val(),
        lines = content.split("n").length,
        html = '';
    for(i = 0; i < lines; i++) {
        html += '<div><span>' + (i+1) + '.</span></div>';
    }
    $(element).find("div.line-nums").html(html);
    $(element).find("textarea.codeview").height((18*lines));
}    
$(".modal").on("focus", function() {
    get_code_lines($(this));
});
$(".codeview").on("keydown keyup", function() {
    var parent = $(this).closest(".modal");
    get_code_lines(parent);
});