집 > 기사 > 웹 프론트엔드 > Javascript 이벤트 기반 프로그래밍_javascript 기술에 대한 자세한 설명

Javascript 이벤트 기반 프로그래밍_javascript 기술에 대한 자세한 설명

WBOY원래의: 2016-05-16 15:22:171608검색

1. 기본 개요
JS는 이벤트 중심 메커니즘을 사용하여 사용자 작업에 응답합니다. 즉, 사용자가 html 요소를 작업할 때 특정 기능을 처리하는 시간이 생성됩니다.
추신: 이 방법은 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 이벤트 분류
마우스 이벤트
click dblclick mousedown mouseout mouseover mouseup mousemove 등
키보드 이벤트
keydown 키 누르기 keyup 등
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: 마우스 오른쪽 버튼 메뉴를 클릭하고 웹 콘텐츠를 선택하여 사용자가 웹 콘텐츠를 복사하는 것을 방지

<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 프로그래밍을 배우는 모든 사람에게 도움이 되기를 바랍니다.

성명：

이전 기사：javascript_javascript 스킬을 기반으로 간단한 계산기 기능 구현다음 기사：javascript_javascript 스킬을 기반으로 간단한 계산기 기능 구현

Javascript 이벤트 기반 프로그래밍_javascript 기술에 대한 자세한 설명

관련 기사