JavaScript でイベントをバインドおよびバインド解除する方法

この記事では、JavaScript イベントのバインドとバインド解除について説明します。これには一定の参考値があり、参考になることを願っています。ヘルプ

JavaScript のイベントは、HTML 要素をクリックすると JavaScript が開始され、それによってブラウザーの動作がトリガーされることを意味します。次に、イベント バインディングを使用する必要があります。いくつかのタイプの一般的なイベント バインド方法とバインドを解除する方法

#イベント バインディング

##onclick イベント##について詳しく説明します。 #マウスが押されたときにトリガーされるオブジェクトを参照し、要素は 1 つのイベントにのみバインドできます

##マウスが四角形をクリックすると背景色を変更します

window.onload=function(){
var div=document.getElementsByTagName("div")[0];
div.onclick=function(){
div.style.backgroundColor="pink";
console.log(1);
}
}

レンダリング

クリック前

#クリック後

addEventListener(event, function, useCapture)

指定された要素にイベント ハンドラーを追加します複数のイベントを追加できます。これは IE9 以降では不可能です。 互換性のある event: 文字列の形式で存在するイベント名を指定します。

function: 実行される関数を参照します。イベントがトリガーされる

useCapture: イベントがキャプチャ フェーズで実行されるかバブリング フェーズで実行されるかを示すブール値。 true はイベント ハンドラがキャプチャ フェーズで実行されることを示し、false はイベント ハンドラが実行されることを示します

 window.onload=function(){
   var div=document.getElementsByTagName("div")[0];
     div.addEventListener('click',function(){
     		div.style.backgroundColor="pink";
     },false);
 }//用addEventListener绑定一个click事件，当点击时使背景颜色改变

注: イベントを書き込むときは、クリックを直接書き込み、ほとんどの場合 false を書き込まないように注意してください。

attachEvent(イベント、関数)

イベントは複数のハンドラーにバインドでき、同じ関数を複数回バインドすることもできます。event: イベントのタイプ。

function: イベントがトリガーされたときに実行される関数を指します。 #注意: プログラムは IE で実行する必要があります。ブラウザ。

イベントのバインド解除

onclick =false/nullonclick イベントのバインド解除Unbind by値を false または null に設定する

window.onload=function(){
var div=document.getElementsByTagName("div")[0];
 div.attachEvent('onclick',function(){
 div.style.backgroundColor="pink";
     });
 }

removeEventListener(event, function, useCapture)

は、バインドを解除する前に、addEventListener イベントのバインドを解除するために使用されることに注意してください。関数を直接記述することはできません。関数を外部で記述する必要があります。

window.onload=function(){
   var div=document.getElementsByTagName("div")[0];
     div.onclick=function(){
     		div.style.backgroundColor="pink";
     }
     div.onclick=null;

detachEvent(event, function)

は、attachEvent イベントを切り離すために使用されます。バインドを解除する前にデタッチする必要があります。関数を直接記述することはできません。関数を外部から記述する必要があります。

 window.onload=function(){
   var div=document.getElementsByTagName("div")[0];
     div.addEventListener('click',demo,false);
     function demo(){
     	div.style.backgroundColor="pink";
     }
     div.removeEventListener('click',demo,false);
 }//用addEventListener绑定一个click事件，当点击时使背景颜色改变

要約: 上記がこの記事の全内容です。皆さんがイベントのバインディングを学ぶのに役立つことを願っています。 JavaScript

以上がJavaScript でイベントをバインドおよびバインド解除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。