読者です 読者をやめる 読者になる 読者になる

ねっとぱんだ

Webデザイン、プログラミングの勉強ブログ。

【javascript】DOMの操作・イベント【随時更新】

HTMLイベントハンドラ属性

HTMLタグに記入できる

<div onclick="alert('クリックされました。')">button</div>
関数の呼び出し
<div onclick="hello();">button</div>
<script>
function hello(){alert('hello');};
</script>

イベントリスナー

addEventListener
Nodeが持つメソッド。
引数が3つある
test.addEventListener('イベント名','イベントリスナー(呼び出される関数名)',フェーズ(真偽値));
function hello(){
    alert('a');
}
var button = document.getElementById('button');
console.log(button);
 button.addEventListener('click', hello, false);

イベントリスナは複数登録できる。

function hello(){
    alert('hello');
}
function hello2(){
    alert('hello,hello');
}
var button = document.getElementById('button');
console.log(button);
 button.addEventListener('click', hello, false);
 button.addEventListener('click', hello2, false);
removeEventListener
登録されているイベントをなくす。
var button = document.getElementById('button');
console.log(input);
var input = document.getElementById('input');
console.log(input);
function hello(){
    input.innerHTML = 'ハロー';
};
function hay(){
    input.innerHTML += 'ハワユ';
//2回目以降はhay関数は消える
    button.removeEventListener('click',hay,false);
};
button.addEventListener('click',hello,false);
button.addEventListener('click',hay,false);

無名関数を登録すると消せない
remove~を指定してもクリックされるたびに新しい無名関数が作り出される。

<script>
var button = document.getElementById('button');
console.log(input);
var input = document.getElementById('input');
console.log(input);
button.addEventListener('click',function(){
        input.innerHTML+='消せない!'},false);
button.removeEventlistener('click',function(){
        input.innerHTML+='消せない!'},false);
</script>