Как добавить параметры в обработчик событий в JavaScript? - PullRequest
Новая
       21

Как добавить параметры в обработчик событий в JavaScript?

2 голосов
/ 24 августа 2010

и спасибо за поиск.

В настоящее время я реализую код из этого примера.В моем aspx-файле у меня определены Label1 и Textbox1.В моем файле aspx.cs я устанавливаю свойство Label1.Text для случайной строки в методе Page_Load.

В файле .js, который я включил, у меня есть: 

var Label1, TextBox1;

Sys.Application.add_init(AppInit);

function AppInit(sender) {
    Label1 = $get('Label1');
    TextBox1 = $get('TextBox1');

    $addHandler(Label1, "click", Label1_Click);
    $addHandler(TextBox1, "blur", TextBox1_Blur);
    $addHandler(TextBox1, "keydown", TextBox1_KeyDown);
}

Теперь я хочу добавить больше меток (и соответствующих текстовых полей), но я не хочу накладных расходов на определение отдельных обработчиков для каждого из дополнительных событий, т.е. я хочу избежать этого: 

$addHandler(Label1, "click", Label1_Click);
$addHandler(TextBox1, "blur", TextBox1_Blur);
$addHandler(TextBox1, "keydown", TextBox1_KeyDown);
$addHandler(Label2, "click", Label2_Click);
$addHandler(TextBox2, "blur", TextBox2_Blur);
$addHandler(TextBox2, "keydown", TextBox2_KeyDown);
...

КакМогу ли я передать обработчику параметр, который точно идентифицирует отправителя, и чтобы обработчик использовал 'this' или что-то еще.Также следует отметить, что я хочу иметь возможность идентифицировать индекс метки (1,2,3 ...), потому что я должен также редактировать соответствующее текстовое поле.Например, текущая реализация Label1_Click выглядит следующим образом: 

function Label1_Click() {
    TextBox1.value = Label1.innerHTML;
    Label1.style.display = 'none';
    TextBox1.style.display = '';
    TextBox1.focus();
    TextBox1.select();
}

Спасибо, ребята.

Ответы [ 4 ]

0 голосов
/ 17 марта 2012

Есть много способов, но этот прекрасно работает в любом браузере, и вам не нужна библиотека.

Я добавляю обработчик onclick к каждому входу на этой странице и даю ему 2 параметра, чтобы яполучить из 2-мерного массива.Я использовал замыкание, чтобы убедиться, что обработчик все еще имеет доступ к заданным параметрам.Я также сделал меня глобальным объектом (p со страницы), чтобы не загромождать глобальное пространство имен переменными. 

<!DOCTYPE html>
<html>
    <head>
        <script>
            var p = {
                onload: function() {
                    var btns = document.getElementsByTagName("input");
                    var parameters = [["btn1 p1", "btn1 p2"], ["btn2 p1", "btn2 p2"]];
                    for(var i = 0, ceiling = btns.length; i < ceiling; i++) {
                        btns[i].onclick = function(par1, par2) {
                            return function() {
                                p.btnOnclick(par1, par2);
                            };
                        }(parameters[i][0], parameters[i][1]);
                    }
                },
                btnOnclick: function(par1, par2) {
                    alert("par1: " + par1 + " | par2: " + par2);
                }
            };
        </script>
    </head>
    <body onload="p.onload()">
        <input type="button" value="button1"/>
        <input type="button" value="button2"/>
    </body>
</html>
0 голосов
/ 24 августа 2010

Вы можете попробовать создать делегата.Например, с вашими ярлыками: 

function AppInit(sender) {
  $addHandler(Label1, "click", Function.createDelegate(this, LabelClick());
  $addHandler(Label2, "click", Function.createDelegate(this, LabelClick());
}

function LabelClick(sender)
{
 /..
}
0 голосов
/ 17 марта 2012

Я знаю, что это старый вопрос, но вчера я столкнулся с той же самой проблемой, и вот решение, с которым я пришел.

Мне это не очень нравится, но я не нашел более простого способа: я использую собственный CssClass для каждой метки, которую я хочу связать с текстовым полем этим методом (и то же самое для текстового поля). Затем я повторяю их и прикрепляю соответствующий обработчик в зависимости от того, является ли это меткой или кнопкой. 

var labels;
var texts;

Sys.Application.add_init(AppInit);

function AppInit(sender) {

  labels = document.getElementsByClassName('lblDynamic');
  texts = document.getElementsByClassName('txtDynamic');

  for (i = 0; i < labels.length; i++)
  {
      $addHandler(labels[i], "click", Label1_Click);
  }

  for (i = 0; i < texts.length; i++) {

      $addHandler(texts[i], "blur", TextBox1_Blur);
      $addHandler(texts[i], "keydown", TextBox1_KeyDown);
  }
}

Следующий шаг - получить доступ к универсальному элементу управления внутри обработчика метода. Это довольно просто с ссылкой this. Пример: 

function TextBox1_KeyDown(event) {
  if (event.keyCode == 13) {
    event.preventDefault();
    this.blur();
  }
}

Но здесь есть проблема: как мне узнать, что определенный ярлык соединяется с определенным текстовым полем? Я использую очень похожий идентификатор для обоих элементов управления. ASP добавит свою странную номенклатуру viewstate после рендеринга страницы, поэтому мне нужно использовать очень грязные трюки, чтобы избавиться от лишнего текста. Затем я перебираю элементы управления текстовым полем, и если один из них соответствует метке на обработанном событии, я могу работать с ними, как в примере, который вы разместили: 

function Label1_Click() 
{
    var offset = this.id.indexOf('lbl') + 3;

    for (j = 0; j < texts.length; j++) 
    {
        if (texts[j].id.substring(offset) == this.id.substring(offset)) 
        {
            texts[j].value = this.innerHTML;
            this.style.display = 'none';
            texts[j].style.display = '';
            texts[j].focus();
        }            
    }
}

В этом случае моя метка и текстовое поле объявляются таким образом. Обратите внимание на очень похожую номенклатуру: 

<asp:Label runat="server" CssClass="lblDynamic" ID="lblExerciseName">My Text</asp:Label>
<asp:TextBox runat="server" CssClass="txtDynamic" ID="txtExerciseName" Style="display: none;" />

Надеюсь, это поможет:)

0 голосов
/ 24 августа 2010

Ну, $ addHandlers может помочь ускорить процесс добавления обработчиков ... также, в JS вы можете прикреплять разные данные к объектам, выполняя: Label1 ["somenewproperty"] = значение;и поэтому вы можете прикрепить определенные атрибуты и проверить в обработчиках событий ... которые действительно занимают ресурсы, поэтому будьте осторожны, насколько вы это делаете ...

На каком-то уровне, как JS должен знатьобъекты, которые вы хотите слушать и в каком порядке объекты, чтобы уменьшить объем кода?Может быть, хранить массив текстовых полей и надписей и ссылаться на эти объекты по индексу, но на каком-то уровне вы не можете избежать определенного сантехнического кода.

HTH.

...