it-swarm.com.ru

установить событие onclick используя скрипт

Я хочу, чтобы мой script установил свойство onclick для <div>.

Я использую этот HTML-код:

<div id="forgotpass">Forgot Password?</div>

Я хочу, чтобы пользователь щелкнул функцию <div> a forgotpass() для запуска, но я не хочу использовать это:

<div id="forgotpass" onclick="forgotpass();">Forgot Password?</div>

Чистый JavaScript:

function addListener(element, eventName, handler) {
  if (element.addEventListener) {
    element.addEventListener(eventName, handler, false);
  }
  else if (element.attachEvent) {
    element.attachEvent('on' + eventName, handler);
  }
  else {
    element['on' + eventName] = handler;
  }
}

function removeListener(element, eventName, handler) {
  if (element.addEventListener) {
    element.removeEventListener(eventName, handler, false);
  }
  else if (element.detachEvent) {
    element.detachEvent('on' + eventName, handler);
  }
  else {
    element['on' + eventName] = null;
  }
}

addListener(document.getElementById('forgotpass'), 'click', forgotpass);

JQuery:

$(document).ready(function() {
  $("#forgotpass").click(forgotPass);
});

Или же:

$(document).ready(function() {
  $("#forgotpass").click(function() {
    forgotPass();
  });
});
24
Danil Speransky

В качестве альтернативы, если вы не используете jQuery:

document.getElementById('forgotpass').onclick = forgotpass;
45
Summoner

Если вам нужно только поддерживать IE 9+ ( source ), вы можете использовать EventTarget.addEventListener в чистом JavaScript.

function forgotpass() {
  alert("Hello, world!");
}

var element = document.getElementById("forgotpass");
element.addEventListener("click", forgotpass, false);
<button id="forgotpass">Forgot Password?</button>
Если вам нужна поддержка старых браузеров, я рекомендую ответ Сперанского Данила .

2
Nick McCurdy

В чистом JavaScript вы можете сделать:

function forgotpass() {
 //..code
}

var el = document.getElementById("forgotpass");
el.onclick = forgotpass;

но это очень наивно, не гибко и, вероятно, плохая практика.

Если вы используете jQuery, вы можете сделать:

function forgotpass() {
 //..code
}

$(document).ready(function() {
  $("#forgotpass").click(function() {
    forgotPass();
  });
});
2
Strelok

Нечто подобное может сработать ..

var div = document.getElementById("forgotpass");
div.onclick=function(){ /*do something here */ };

если вы не добавите функцию, javascript запустит onclick, как только он пройдет через скрипт.

2
Frøknen

Вы можете сделать это с помощью jQuery, как

$("#forgotpass").click(function() {
  alert("Handler for .click() called.");
});
2
Dr. Dan

Если вы используете jQuery, лучше всего это сделать следующим образом. Если вызов функции выполняется более одного раза, будут зарегистрированы несколько дескрипторов событий. Следующий подход гарантирует, что предыдущие обработчики будут удалены

$("#forgotpass").off().on('click', function () { 
    forgotPass(); 
});
0
warunanc

Добавление обработчика событий непосредственно в HTML:

...
<div>
    <input type="button" value="Set Cookie" onclick="setCookie();" />
</div>
<script>
    function setCookie() {
        console.log('ready to set cookie?');
    }
</script>
...

Справка: W3Schools

Удачи!

0
Akash