jQuery 일반 이벤트 바인딩 방법 이해-JS 튜토리얼-php.cn

jQuery 일반 이벤트 바인딩 방법 이해

WBOY

풀어 주다： 2024-02-28 08:24:03

원래의

897명이 탐색했습니다.

jQuery 일반 이벤트 바인딩 방법 이해

일반적인 jQuery 이벤트 바인딩 방법을 이해하려면 특정 코드 예제가 필요합니다.

프론트 엔드 개발에서 이벤트 바인딩은 매우 일반적인 작업입니다. 이벤트 바인딩을 통해 페이지 상호 작용 효과를 얻고 사용자 작업에 응답할 수 있습니다. 기능. jQuery에는 이벤트 직접 바인딩, .on() 메서드 사용, .delegate() 메서드 사용(더 이상 사용되지 않음), .live() 메서드 사용(더 이상 사용되지 않음) 등을 포함하여 이벤트를 바인딩하는 여러 가지 방법이 있습니다. 다음에서는 이러한 일반적인 이벤트 바인딩 방법을 자세히 소개하고 해당 코드 예제를 제공합니다.

이벤트 직접 바인딩: 선택기를 통해 요소를 선택한 후 click(), mouseover() 등 jQuery의 이벤트 바인딩 방법을 사용하여 이벤트를 직접 바인딩합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>直接绑定事件</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btn").click(function(){
                alert("你点击了按钮！");
            });
        });
    </script>
</head>
<body>
    <button id="btn">点击我</button>
</body>
</html>

로그인 후 복사

.on() 메서드 사용: .on() 메서드는 이벤트를 선택한 요소 또는 동적으로 추가된 요소에 바인딩할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用.on()方法绑定事件</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btn").on('click', function(){
                alert("你点击了按钮！");
            });
        });
    </script>
</head>
<body>
    <button id="btn">点击我</button>
</body>
</html>

로그인 후 복사

.delegate() 메서드 사용(지원 중단됨): .delegate() 메서드를 사용하여 선택한 요소의 하위 요소에 이벤트를 바인딩했습니다. 이 메서드는 .on() 메서드로 대체되었으며 더 이상 사용되지 않습니다. 추천합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用.delegate()方法绑定事件</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#parent").delegate('#child', 'click', function(){
                alert("你点击了子元素！");
            });
        });
    </script>
</head>
<body>
    <div id="parent">
        <button id="child">点击我</button>
    </div>
</body>
</html>

로그인 후 복사

.live() 메서드 사용(더 이상 사용되지 않음): .live() 메서드를 사용하여 선택한 요소에 요소 바인딩 이벤트를 동적으로 추가합니다. 이 메서드는 .on() 메서드로 대체되었으며 더 이상 권장되지 않습니다. .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用.live()方法绑定事件</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#container").append('<button class="btn">点击我</button>');
            $(".btn").live('click', function(){
                alert("你点击了按钮！");
            });
        });
    </script>
</head>
<body id="container">
    <!-- 动态添加的按钮 -->
</body>
</html>

로그인 후 복사

위의 코드 예제를 통해 실제 애플리케이션에서 다양한 이벤트 바인딩 방법의 구체적인 작업을 확인할 수 있습니다. 실제 개발에서는 필요에 따라 적절한 이벤트 바인딩 방법을 선택하는 것이 매우 중요합니다. 동시에 오래된 방법을 사용하지 않도록 jQuery 버전의 업데이트에도 주의해야 합니다. 위 내용이 모든 사람이 jQuery의 일반적인 이벤트 바인딩 방법을 더 잘 이해하는 데 도움이 되기를 바랍니다.

위 내용은 jQuery 일반 이벤트 바인딩 방법 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!