jQuery에서 onClick과 클릭의 차이점은 무엇입니까? jQuery에서 onClick과 click의 차이점 소개
- 不言앞으로
- 2018-10-17 16:38:414547검색
이 글의 내용은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!