방법: ASP.NET 웹 서버 컨트롤에 클라이언트 스크립트 이벤트 추가

아티클
10/22/2014

업데이트: 2007년 11월

클라이언트 스크립트를 HTML 요소에 추가하는 것처럼 ASP.NET 웹 페이지의 컨트롤에도 선언적으로 추가할 수 있습니다. 또는 클라이언트 스크립트 이벤트를 프로그래밍 방식으로 ASP.NET 웹 서버 컨트롤에 추가할 수도 있습니다. 이 방법은 이벤트 또는 코드가 런타임에만 사용할 수 있는 정보에 의존하는 경우 유용합니다.

참고:
클라이언트 스크립트에서 ID를 기준으로 컨트롤을 참조할 수 있습니다. 자세한 내용은 ASP.NET 웹 페이지의 클라이언트 스크립트를 참조하십시오.

클라이언트 스크립트 onclick 이벤트를 단추에 추가하려면 이 항목의 뒷부분에 나오는 특수한 절차를 수행해야 합니다.

참고:
브라우저에 따라 클라이언트 스크립트에 대한 지원 형식이 다릅니다. 예를 들어 Internet Explorer, Mozilla 및 모바일 장치용 브라우저에서는 각각 다른 형식으로 클라이언트 스크립트를 지원합니다.

클라이언트 이벤트 처리기를 선언적으로 ASP.NET 서버 컨트롤에 추가하려면

컨트롤의 태그에서 onmouseover 또는 onkeyup 같은 이벤트 특성을 추가합니다. 특성 값에 대해서는 실행할 클라이언트 스크립트를 추가합니다.

참고:
특성에서 클라이언트 스크립트 뒤에는 항상 세미콜론(;)을 추가해야 합니다. 이렇게 하면 ASP.NET에서 컨트롤에 대한 클라이언트 스크립트를 생성하는 경우(예: 컨트롤의 AutoPostBack 속성이 true로 설정되어 있는 경우) 사용자 코드가 맨 먼저 실행됩니다.

컨트롤의 태그에서 컨트롤 속성과 일치하지 않는 특성/값 쌍은 원래 상태로 브라우저에 전달됩니다.

다음 코드 예제에서는 사용자가 마우스를 단추 위로 가져가면 단추의 텍스트 색을 변경하는 클라이언트 스크립트가 포함된 ASP.NET 웹 페이지를 보여 줍니다.

<%@ Page Language="VB"%>
<html>
<head >
  <title>Untitled Page</title>
  <script type="text/javascript">
      var previousColor;
      function MakeRed()
      {
          previousColor = window.event.srcElement.style.color;
          window.event.srcElement.style.color = "#FF0000";
      }
      function RestoreColor()
      {
          window.event.srcElement.style.color = previousColor;
      }
  </script>
</head>
<body>
  <form id="form1" >
    <asp:button id="Button1" 
      text="Button1"
        onmouseover="MakeRed();"onmouseout="RestoreColor();" />
  </form>
</body>
</html>

<%@ Page Language="C#" %>
<html>
<head >
  <title>Untitled Page</title>
  <script type="text/javascript">
      var previousColor;
      function MakeRed()
      {
          previousColor = window.event.srcElement.style.color;
          window.event.srcElement.style.color = "#FF0000";
      }
      function RestoreColor()
      {
          window.event.srcElement.style.color = previousColor;
      }
  </script>
</head>
<body>
  <form id="form1" >
  <asp:button id="Button1"  
    text="Button1" 
      onmouseover="MakeRed();"onmouseout="RestoreColor();" />
  </form>
</body>
</html>

클라이언트 이벤트 처리기를 프로그래밍 방식으로 ASP.NET 컨트롤에 추가하려면

페이지의 Init 또는 Load 이벤트에서 컨트롤에 대한 Attributes 컬렉션의 Add 메서드를 호출합니다.

다음 코드 예제에서는 TextBox 컨트롤에 클라이언트 스크립트를 추가하는 방법을 보여 줍니다. 이 클라이언트 스크립트는 TextBox 컨트롤의 텍스트 길이를 표시합니다. 이 때 스크립트에서는 페이지에 spanCounter라는 span 요소가 포함되어 있다고 가정합니다.
```
Protected Page_Load(ByVal sender As Object, _
    ByVal e As System.EventArgs)
    Dim displayControlName As String = "spanCounter"
    TextBox1.Attributes.Add("onkeyup", _
        displayControlName & ".innerText=this.value.length;")
End Sub
```

protected void Page_Load(object sender, EventArgs e)
{
    String displayControlName = "spanCounter";
    TextBox1.Attributes.Add("onkeyup", displayControlName + 
        ".innerText=this.value.length;");
}

단추 컨트롤에 클라이언트 onclick 이벤트를 추가하려면

단추 컨트롤(Button, LinkButton 및 ImageButton 컨트롤)에서 실행할 클라이언트 스크립트를 OnClientClick 속성 값으로 설정합니다.

다음 코드 예제에서는 Button 컨트롤에 클라이언트 스크립트 click 이벤트를 추가하는 방법을 보여 줍니다.

<%@ Page Language="VB" %>
<script >
    Sub Button1_Click(ByVal sender As Object, _
        ByVal e As System.EventArgs)
        Label1.Text = "Server click handler called."
    End Sub
</script>

<body>
  <form id="form1" >
    <asp:Button ID="Button1" Runat="server" 
      OnClick="Button1_Click" 
        OnClientClick="return confirm('Ready to submit.')" 
        Text="Test Client Click" />
    <br />
    <asp:Label ID="Label1" Runat="server" text="" />
  </form>
</body>
</html>

<%@ Page Language="C#" %>
<script >
    protected void Button1_Click(Object sender, EventArgs e)
    {
        Label1.Text = "Server click handler called.";
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
  <form id="form1" >
    <asp:Button ID="Button1" Runat="server" 
      OnClick="Button1_Click" 
        OnClientClick="return confirm('Ready to submit.')" 
        Text="Test Client Click" />
    <br />
    <asp:Label ID="Label1" Runat="server" text="" />
  </form>
</body>
</html>

보안

클라이언트 스크립트는 클라이언트 컴퓨터에서 잠재적으로 악의적인 함수를 수행할 가능성이 있습니다. 특히 사용자 입력에 대한 응답으로 스크립트가 생성 또는 변경되는 경우에는 페이지에 스크립트를 작성할 때 매우 주의해야 합니다. 자세한 내용은 스크립트 악용 개요를 참조하십시오.

참고 항목

작업

방법: ASP.NET 웹 페이지에서 컨트롤의 HTML 특성 설정

방법: ASP.NET 웹 페이지에 동적으로 클라이언트 스크립트 추가

개념

ASP.NET 웹 페이지의 클라이언트 스크립트

다음을 통해 공유

방법: ASP.NET 웹 서버 컨트롤에 클라이언트 스크립트 이벤트 추가

클라이언트 이벤트 처리기를 선언적으로 ASP.NET 서버 컨트롤에 추가하려면

클라이언트 이벤트 처리기를 프로그래밍 방식으로 ASP.NET 컨트롤에 추가하려면

단추 컨트롤에 클라이언트 onclick 이벤트를 추가하려면

보안

참고 항목

작업

개념

추가 리소스