jQuery에서 onClick과 클릭의 차이점은 무엇입니까? jQuery에서 onClick과 click의 차이점 소개-JS 튜토리얼-php.cn

jQuery에서 onClick과 클릭의 차이점은 무엇입니까? jQuery에서 onClick과 click의 차이점 소개

不言

풀어 주다： 2018-10-17 16:38:41

앞으로

4556명이 탐색했습니다.

이 글의 내용은 jQuery에서 onClick과 click의 차이점에 관한 것입니다. jQuery에서 onClick과 click의 차이점에 대한 소개에는 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

상황을 제외하고

이전 회사에서는 이런 문제가 발생하지 않아서 더 이상 다루지 않았습니다. 현재 회사를 바꾸기 전까지는 다른 사람들이 반쯤 작성한 프로젝트를 둘째 날부터 작성하기 시작했는데 너무 무기력했습니다. 프로젝트가 급해서 프레임워크를 전환하기에는 너무 늦었습니다. -레이아웃이 있어서 계속해야 했습니다.

이런 상황에서

목록은 어디에나 있고 js로 만든 동적 페이지는 어디에나 있는데 알겠습니다 계속하겠습니다 갑자기 사고가 발생했습니다. ==내가 바인딩한 클릭 이벤트가 잘못되었습니다==.

Situation - Solved

당시 알았던 이유는 초기화 중에 동적으로 생성된 요소를 아직 사용할 수 없는데 어떻게 바인딩할 이벤트를 바인딩할 수 있었는지(==onclick의 차이점을 몰랐습니다.) 그리고 그때 클릭하면 아래 설명된 사용법을 모르겠네요 onclick ==)

Solution

$("#list").on('click',function(e){
        var ev = e || window.event;
        var target = ev.target || ev.srcElement;
        if (target.nodeName.toLowerCase() == 'a' && target.className=='reset') {
            msgconfirm('','是否确认重置密码？',function(){
                ajax('/user/reset?id='+target.type,'','get','json',null,function(data){
                    var userObj=data.tUser;
                    tipalert('',{
                        data:'密码重置成功',
                        username:userObj.account,
                        password:userObj.passWord,
                        uKey:userObj.key.replace(/\,/img,'</br>')
                    },'../../images/ok-ico.png',function(){
                        window.location.reload();
                    })
                })
            })
        }
    })

로그인 후 복사

jquery+native 하고 싶지 않은데 다른 해결방법을 못찾아서 해결책은 괜찮습니다. 보기에는 좋지 않지만 성능도 그다지 좋지는 않지만 자세히 살펴보지는 않았습니다.

. . . . . . . . . .

오랜만에 상황이 끝나고

이제 남의 코드를 보면

$("body").on("keyup","#userId,#password",function(){
        if(event.keyCode==13){
            loginFunc();
        }
    });

로그인 후 복사

정말 "뭐해?"라고 혼잣말하고 싶어요.

그땐 정말 별 생각이 없었어요. 인터넷에서 확인해 보니 동적 요소에는 onclick이 적합하고 정적 요소에는 click이 적합하다고 하더군요. 하지만 그 이유는 밝히지 않았습니다. 위에는 말도 안되는 내용이 많이 있습니다. 아래에서 제가 이해한 내용을 설명하겠습니다.

먼저 js의 사전 해석에 대해 이야기해 봅시다

페이지 초기화

Variables

graph LR
Variables-->| 초기화|변수를 초기화하지만 값을 할당하지는 않습니다
변수를 초기화하지만 값을 할당하지 않습니다-- >|초기화 완료|변수 할당

function

graph LR
function-->|초기화|현재 범위에 새 공간을 형성합니다. 현재 함수를 저장하면서
새 공간을 형성합니다. 현재 범위-as 현재 함수 저장 -->|초기화 완료|함수 실행

사전 설명을 읽어보신 후 오늘의 주제를 이야기해보겠습니다

초기화 중 온클릭과 클릭의 차이점

정적 요소 바인딩: 요소가 존재하고 사전 해석이 가능하므로 차이가 없습니다.
동적 요소 바인딩: 요소가 존재하지 않고 사전 해석이 가능하며 요소를 찾을 수 없는 이유입니다. -해석이므로 onclick인지 click인지 알 수 없습니다. ;
정적 요소를 바인딩하여 동적 요소의 이벤트 바인딩을 구현합니다.

<html>

    <div class="test">
        <button class="new" id="newon">NewOn</button> 
        <button class="new" id="newclick">NewClick</button>
        <ul class="li"> 
            <li>原先的HTML元素on<button class="deleteon">Delete</button></li> 
            <li>原先的HTML元素click<button class="deleteclick">Delete</button></li> 
        </ul> 
    </div>
    <script>
        $("#newclick").click(function(){ 
            $(".li").append('<li>动态添加的HTML元素click<button class="deleteclick">Delete</button></li>'); 
        });
        $("#newon").click(function(){ 
            $(".li").append('<li>动态添加的HTML元素on<button class="deleteon">Delete</button></li>'); 
        });
        $(".delete").click(function(){ 
            $(this).parent().remove(); 
        }); 
        //删除选中元素
        $(".li").on('click', ".deleteon", function(){
            $(this).parent().remove(); 
        })
        //看看，删除不了吧
        $(".deleteclick").click(function(){ 
            $(this).parent().remove(); 
        });
    </script>
    
</html>

로그인 후 복사

onclick 사용법(jquery, jquery+native)

사용 방법에 대해 , 위에 소개한 적이 있는데, 오늘에서야 알게 됐는데, 이벤트 바인딩 시 요소를 추가할 수 있다고 알고 있는데, 실제로는 네이티브로 전환해서 보니 얼핏 보면 초보, 초보자처럼 보였습니다.

상황 요약

Onclick은 동적 요소 바인딩에 사용되며 두 정적 요소 모두 바인딩할 수 있습니다. 코드 통합을 위해 onclick을 사용하면 요소를 필터링할 수 있습니다. !

위 내용은 jQuery에서 onClick과 클릭의 차이점은 무엇입니까? jQuery에서 onClick과 click의 차이점 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!