Обработка событий javascript onclick с использованием чистого JavaScript

Итак, это действительно прямо, но я все еще довольно новичок в JavaScript и просто нашел jsfiddle. Я пытаюсь найти элемент с getElementById(), чтобы отключить и включить кнопку. Что мне не хватает?

<form name="frm" > 
  <div id="chkObj"> 
    <input type="checkbox"  name="setChkBx" onclick="basicList.modifyAndEnableButton(this)" ></input>        
</div>
<div id="Hello"> 
    <input type="button" name="btn" value="Hello"  ></input>        
</div>

Это список, который я использую для добавления флажков, потому что будет больше одного

 var basicList = {
    'items':{},
    'modifyAndEnableButton':function(obj1) {
        var element = document.getElementsByName("btn");
       if(obj1.checked == true && element.getAttribute('disabled') == false){
       element.getAttribute('disabled') = true;
       this.addRecord(obj2);
    } else if(element.getAttribute('disabled') == true) {
       if(hasItems == false) {
           element.getAttribute('disabled') = false;
       }
    } 
  }
};

http://jsfiddle.net/Arandolph0/E9zvc/3/

Заранее благодарим за помощь.

Ответы

Ответ 1

Все браузеры поддерживают это (см. пример здесь):

mySelectedElement.onclick = function(e){
    //your handler here
}

Однако иногда вы хотите добавить обработчик (и не изменять один и тот же), и в целом, когда это возможно, вы должны использовать addEventListener (требуется прокладка для IE8 -)

mySelectedElement.addEventListener("click",function(e){
   //your handler here
},false);

Вот рабочий пример:

var button = document.getElementById("myButton");
button.addEventListener("click",function(e){
    button.disabled = "true";
},false);

И html:

<button id='myButton'>Hello</button>

(скрипка)

Вот некоторые полезные ресурсы:

Ответ 2

Бенджамин отвечает на все. Однако вам нужна модель делегирования для обработки событий на элементах, которые были добавлены динамически, тогда

document.addEventListener("click", function (e) {
    if (e.target.id == "abc") {
        alert("Clicked");
    }
});

Для IE7/IE8

document.attachEvent('onclick', function (e) {
    if (window.event.srcElement == "abc") {
        alert("Clicked");
    }
});

Ответ 3

У вас есть Error здесь

btnRush должен быть Rushbtn

Это пример события кросс-браузера, который я только что сделал (не тестировался))

var addEvent = function( element, type, callback, bubble ) { // 1
    if(document.addEventListener) { // 2
        return element.addEventListener( type, callback, bubble || false ); // 3
    }
    return element.attachEvent('on' + type, callback ); // 4
};



var onEvent = function( element, type, callback, bubble) { // 1
    if(document.addEventListener) { // 2
        document.addEventListener( type, function( event ){ // 3
            if(event.target === element || event.target.id === element) { // 5
                callback.apply(event.target, [event]); // 6
            }
        }, bubble || false);
    } else {
        document.attachEvent( 'on' + type, function( event ){ // 4 
            if(event.srcElement === element || event.srcElement.id === element) { // 5
                callback.apply(event.target, [event]); // 6
            }
        });
    }

};

Действия

  • Создайте функцию, которая принимает 4 значения (self explaining)
  • Проверьте, поддерживает ли браузер addEventListener
  • Добавить событие в элемент
  • else добавить событие в элемент для более старого IE
  • Убедитесь, что элемент (щелкнул) равен = переданному элементу

  • вызов функции обратного вызова передает элемент как это и передает событие

    onEvent используется для делегирования событий. addEvent предназначен для вашего стандартного события.

    здесь, как вы можете их использовать

Первые 2 для динамически добавленных элементов

onEvent('rushBtn', 'click', function(){
    alert('click')
});

var rush = document.getElementById('rushBtn');

onEvent(rush, 'click', function(){
    alert('click');
});

// Standard Event
addEvent(rush, 'click', function(){
    alert('click');
});

Событие Делегация в основном.

Добавить событие клика в документ, чтобы событие срабатывало всякий раз и где бы вы ни проверяли элемент, на который был нажат, чтобы увидеть, соответствует ли он требуемому элементу. таким образом он всегда будет работать.

Демо