Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как правильно повесить событие на кнопку (https://javascript.ru/forum/dom-window/19253-kak-pravilno-povesit-sobytie-na-knopku.html)

c124578 29.07.2011 19:40

Как правильно повесить событие на кнопку
 
Есть такая кнопка, созданная JS на стороне клиента:
<button class="DeleteItem"></button>
к ней прикручен обработчик:

var c=document.createElement("button");
c.className="DeleteItem";
conteiner.appendChild(c);
c.onclick=DeleteCookie;

вот функция:

function DeleteCookie(e) {
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation(); // подавляем всплывание
var x=e.target||e.srcElement;
x=x.parentNode; // контейнер, в котором запись
var id=x.innerHTML.match(/в базе[^\d]{1,5}([0-9]+)<\//); // ее ID
setcookie("id"+id[1], 0, -1000); // вычеркиваем из блокнота
x.removeChild(x.lastChild); // удаляем эту самую кнопку
}

Все работает, как надо. Это для удаления выбранной записи, предназначенной для блокнота.
PHP скрипт, выдающий записи, при повторном, например, посещении страницы, на основании кук рисует такую кнопку:
<button type="button" onClick=DeleteCookie(click) class="DeleteItem"></button>
Она работает неправильно: x неопределен, кнопка не удаляется.
Firebug для JSной кнопки показывает, onClick -> DeleteCookie(e), а для PHPной onclick -> onclick(event)
attributes -> [class="DeleteItem", onclick="DeleteCookie", type="button"]
Я не знаю, почему разные определения получаются, кто знает расскажите, как PHP кнопку сделать идентичной JS кнопке.

melky 31.07.2011 09:37

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

c124578 31.07.2011 11:25

Есть такая кнопка, созданная JS на стороне клиента:
<button class="DeleteItem"></button>

к ней прикручен обработчик DeleteCookie:

var c=document.createElement("button");
c.className="DeleteItem";
conteiner.appendChild(c);
c.onclick=DeleteCookie;


вот функция:

function DeleteCookie(e) {
   if (!e) var e = window.event;
   e.cancelBubble = true;
   if (e.stopPropagation) e.stopPropagation(); // просто подавляем всплывание
   var x=e.target||e.srcElement; //взяли элемент, в котором произошло событие
   x=x.parentNode; // контейнер, в котором запись
   var id=x.innerHTML.match(/в базе[^\d]{1,5}([0-9]+)<\//); // ее ID в базе
   setcookie("id"+id[1], 0, -1000); // вычеркиваем из блокнота
   x.removeChild(x.lastChild); // удаляем эту самую кнопку
}


Все работает, как надо. Это для удаления выбранной записи, предназначенной для блокнота.
PHP скрипт, выдающий записи, при повторном, например, посещении страницы, на основании кук рисует такую кнопку:
<button type="button" onClick=DeleteCookie(click) class="DeleteItem"></button>

Она работает неправильно: x неопределен, кнопка не удаляется.
Firebug для JSной кнопки показывает, onClick -> DeleteCookie(e), а для PHPной onclick -> onclick(event)
attributes -> [class="DeleteItem", onclick="DeleteCookie", type="button"]
Я не знаю, почему разные определения получаются, кто знает расскажите, как PHP кнопку сделать идентичной JS кнопке.

melky 31.07.2011 11:30

x.removeChild(x.lastChild); // удаляем эту самую кнопку

???

попробуй так. убери обработчики из вывода php. они будут назначаться скриптом

HTML:
<button type="button" class="DeleteItem"></button>


JS:
function DeleteCookie(e) {
    var x;
    
    if( e ){
        e.stopPropagation();
        x = e.target;
    } else {
        e = window.event;
        e.cancelBubble = true;
        x = e.srcElement;
    }

    var id = x.innerHTML.match(/в базе[^\d]{1,5}([0-9]+)<\//)[1]; 
    
    setcookie("id" + id, 0, -1000);
    
    x.parentNode.removeChild(x);
}


а это в конец body :
var a = document.getElementsByTagName("button"),
    b = a.length;
while (b--)
    if (a[b].className === "DeleteItem") 
            a[b].onclick = DeleteCookie;

c124578 31.07.2011 12:07

Спасибо, я так и сделал в конце-концов, обработчики назначил скриптом, я думал, что не знаю чего-то очевидного, непонятно почему обработчик, назначенный JS, понимается как обработчик, а переданный PHP - определяется, как атрибут.
На будущее пригодится, поэтому хотел узнать.


Часовой пояс GMT +3, время: 07:35.