web-dev-qa-db-ja.com

純粋なJavaScriptで「onclick」イベントを処理する

ですから、これは本当に簡単なことですが、私はまだ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/

よろしくお願いします。

javascripthtmleventsjavascript-eventsevent-handling
25
April_Nara

すべてのブラウザがこれをサポートしています（ こちらの例を参照） ：

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

ただし、ハンドラーを追加する場合があり（同じものを変更しない場合）、より一般的には addEventListener を使用する必要があります（IE8にはshimが必要です）

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>

（フィドル）

以下に役立つリソースをいくつか紹介します。

54
Benjamin Gruenbaum

ベンジャミンの答えは、すべてを網羅しています。ただし、動的に追加された要素のイベントを処理するには委任モデルが必要です

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");
    }
});
4
Atif Mohammed Ameenuddin

ここには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
            }
        });
    }

};

手順

  1. 4つの値を受け入れる関数を作成します（自己説明）
  2. ブラウザがaddEventListenerをサポートしているかどうかを確認します
  3. 要素にイベントを追加
  4. または、古いIEの要素にイベントを追加します
  5. （クリックされた）要素が=渡された要素であることを確認します

  6. コールバック関数を呼び出して、この要素を渡し、イベントを渡します

    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');
});

イベント委任は基本的にこれです。

ドキュメントにクリックイベントを追加して、クリックされた要素を必要な要素と一致するかどうかを確認するために、いつでもどこでもイベントが発生するようにします。このようにして、常に機能します。

デモ

2
iConnor