web-dev-qa-db-ja.com

jQuery .clickのバニラJavaScriptバージョン

だから多分私はちょうど適切な場所を見ていませんが、jQueryの同等のものを行う方法の良い説明を見つけることができません

$('a').click(function(){
    // code here
});

昔ながらのJavaScriptで？

基本的に、aタグがクリックされるたびに関数を実行したいのですが、jQueryをページにロードして上記の方法で実行する機能がないため、使用方法を知る必要がありますプレーンJavaScript。

javascriptjqueryfunctionevent-handling
47
Duck in Custard

作業例： http://jsfiddle.net/6ZNws/

HTML

<a href="something">CLick Here</a>
<a href="something">CLick Here</a>
<a href="something">CLick Here</a>

Javascript：

var anchors = document.getElementsByTagName('a');
for(var z = 0; z < anchors.length; z++) {
    var elem = anchors[z];   
    elem.onclick = function() {
        alert("hello");
        return false;
    };
}
56
Kevin Bowersox
element.addEventListener('click', function() { ... }, false);

要素を見つけて、各要素を接続するループを作成する必要があります。

47
Diodeus - James MacFarlane

以下をお試しください

var clickHandler = function() { 
  // Your click handler
};

var anchors = document.getElementsByTagName("a");
for (var i = 0; i < anchors.length; i++) {
  var current = anchors[i];
  current.addEventListener('click', clickHandler, false);
}

注：Ӫ_._Ӫが指摘したように、これはaddEventListenerをサポートしていないためIE8以前では動作しません。

IE8では、次を使用してonclickにサブスクライブできます。全員が協力する必要があるため、完全な代替品ではありませんが、あなたを助けることができるかもしれません

var subscribeToOnClick = function(element) {
  if (element.onclick === undefined) {
    element.onclick = clickHandler;
  } else {
    var saved = element.onclick;
    element.onclick = function() {
      saved.apply(this, arguments);
      clickHandler.apply(this, arguments);
    }
  }
}

for (var i = 0; i < anchors.length; i++) {
  var current = anchors[i];
  subscribeToOnClick(current);
}
13
JaredPar
document.getElementById('elementID').onclick = function(){
      //click me function!
}
10
Neal

どうぞ：

[].forEach.call( document.querySelectorAll( 'a' ), function ( a ) {
    a.addEventListener( 'click', function () {
        // code here
    }, false );
});

ライブデモ：http://jsfiddle.net/8Lvzc/3/

（IE8では動作しません）

また、イベントの委任をお勧めします...

7
Šime Vidas

これにより、onclick関数がすべてのa要素に割り当てられます。

var links = document.getElementsByTagName("a");
var linkClick = function() {
  //code here
};

for(var i = 0; i < links.length; i++){
  links[i].onclick = linkClick;
}

実際にそれを見ることができます here 。

1
Peter Olson