ホームページ > 記事 > ウェブフロントエンド > Javascriptイベントドリブンプログラミング_JavaScriptスキルを詳しく解説

Javascriptイベントドリブンプログラミング_JavaScriptスキルを詳しく解説

WBOYオリジナル: 2016-05-16 15:22:171610ブラウズ

1. 基本概要
JS はイベント駆動型のメカニズムを使用してユーザーの操作に応答します。つまり、ユーザーが HTML 要素を操作すると、特定の関数の処理を開始する時間が生成されます。
PS: このメソッドは Java GUI のイベントリスニングメカニズムに非常に似ていますが、どちらもリスナーを登録してからリスナーを処理する必要がありますが、実装方法が異なります。

2. イベント駆動の原則

イベントソース: イベントが生成される場所 (html 要素)
イベント: クリック/マウス操作/キーボード操作など
イベントオブジェクト: イベントが発生すると、時間オブジェクトが時間情報をカプセル化してイベントハンドラーに渡します
イベントハンドラー: ユーザーイベントに応答するコード

ケース:

<html> 
  <head> 
    <script type="text/javascript"> 
      function test1(e){ 
        window.alert("x=" + e.clientX + " y=" + e.clientY); 
      } 
      function test2(e){ 
        window.alert("x=" + e.clientX + " y=" + e.clientY); 
      } 
      function test3(e){ 
        window.alert(new Date().toLocaleString()); 
      } 
      function test4(e){ 
        if(e.value == "red"){ 
          div1.style.backgroundColor = "red"; 
        } else if (e.value == "black"){ 
          div1.style.backgroundColor = "black"; 
        } 
      } 
    </script> 
  </head> 
  <body> 
    <input type="button" onclick="test1(event)" value="button1"> 
    <input type="button" onmouseover="test2(event)" value="button2"> 
    <input type="button" onclick="test3(event)" value="button3"> 
    <div id="div1" style="width: 400px; height: 300px; background-color: red"></div> 
    <input type="button" onclick="test4(this)" value="red"> 
    <input type="button" onclick="test4(this)" value="black"> 
  </body> 
</html>

JS イベント分類
マウスイベント
クリック dblクリックマウスダウンマウスアウトマウスオーバーマウスアップマウス移動など
キーボードイベント
キーダウンキープレスキーアップなど
HTML イベント
ウィンドウのオンロードアンロードエラー中止テキストボックスの選択変更など
その他のイベント
ページ上のいくつかの特別なオブジェクトの操作中に生成されるイベント

ケース 1: マウスクリックイベントを監視し、マウスクリックの位置 x、y を表示できる

<html> 
   <head> 
   <script> 
   function test1(e){ 
     window.alert("x="+e.clientX+"y="+e.clientY); 
   } 
   </script> 
   </head> 
   <body onmousedown="test1(event)"> 
   </body> 
</html>

ブラウザをクリックすると座標が表示されます(ブラウザによっては対応しない場合があります)

ケース 2: ボタンをクリックすると、画像が赤と黒に変わります
メソッド: JS が内部 CSS にアクセスする

//js如何访问css属性，来改变外观 
<html> 
  <head> 
  <script> 
    function test3(e){ 
      var pic=document.getElementById("pic"); 
      if(e.value=="红色"){ 
        pic.style.backgroundColor="red"; 
      } 
      else if(e.value=="黑色"){ 
        pic.style.backgroundColor="black"; 
      } 
   } 
  </script> 
  </head> 
  <body > 
    <div id="pic" style="border:1;background-color:red;width:300px;height:300px"></div> 
    <input type="button" onclick="test3(this)" value="红色"> 
    <input type="button" onclick="test3(this)" value="黑色"> 
  </body> 
</html>

方法: JS が外部 CSS にアクセスする (この方法はすべてのブラウザーに適用できるわけではありません)

event2.css
.style { 
  border:1; 
  background-color:red; 
  width:300px; 
  height:300px; 
} 
event2.html
<html> 
  <head> 
  <script> 
    function test3(e){ 
      //取连接的第一个css文件的内容用0 
      var ocssRules=document.styleSheets[0].rules; 
      //从ocssRules取出你希望的样式 
      var style=ocssRules[0];//这里面的0表示event2.css文件中第一个规则 
      if(e.value=="黑色"){ 
        style.style.backgroundColor="black"; 
       } 
       else if(e.value=="红色"){ 
         style.style.backgroundColor="red"; 
       } 
    } 
  </script> 
  </head> 
  <body> 
    <div class="style"></div> 
    <input type="button" onclick="test3(this)" value="红色"> 
    <input type="button" onclick="test3(this)" value="黑色"> 
   </body> 
</html>

ケース 3: 現在のブラウザのコアは何ですか (ie6/7/8/Firefox などを区別します)

<script language="javascript"> 
   if(window.XMLHttpRequest) 
   { //Mozilla, Safari, IE7,IE8  
      if(!window.ActiveXObject) 
    {  // Mozilla, Safari,  
      alert('Mozilla, Safari');  
    } 
     else 
     {  
      alert('IE7 .8');  
    }  
   } 
   else  
   {  
     alert('IE6');  
   }  
</script>

ケース 4: 複数の関数でイベントを監視できる

<html> 
  <head> 
  function test(e){ 
    window.alert("fss"); 
  } 
  function test1(e){ 
    window.alert("sfdsdf"); 
  } 
  </script> 
  </head> 
  <body> 
    <div class="style"></div> 
    <input type="button" onclick="test(this),test1(this)" value="红色"> 
  </body> 
</html>

ケース 5: ユーザーがマウスの右ボタンのメニューをクリックして Web コンテンツを選択することにより、Web コンテンツをコピーできないようにします

<html> 
  <script type="text/javascript"> 
    function test(){ 
      //window.alert("没有菜单"); 
      return false; 
    } 
    function test2(){ 
      //window.alert("全选不行"); 
      return false; 
    }   
  </script>  
  </head>  
  <!--body元素响应oncontextmenu,onselectstart事件 --> 
  <body oncontextmenu="return test()" onselectstart="return test2()">   
    内容 
  </body> 
</html>

次の記事では、シンプルで包括的なケースを紹介します:シンプルな計算機。お見逃しなく。

JavaScript のイベント駆動型プログラミングにはこれ以外にもたくさんの機能があり、この記事が皆さんの JavaScript プログラミングの学習に役立つことを願っています。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：javascript_javascriptスキルに基づいた簡単な計算機能の実装次の記事：javascript_javascriptスキルに基づいた簡単な計算機能の実装

続きを見る

Javascriptイベントドリブンプログラミング_JavaScriptスキルを詳しく解説

関連記事