HTML의 에 클릭 이벤트를 바인딩하는 여러 가지 방법 소개

HTML의 버튼에 이벤트를 바인딩하는 세 가지 방법이 있습니다.

예를 들어 다음 태그는 다음과 같습니다.

<button type="submit" id="btn_submit"> submit </button>

1. 바인딩에 jquery를 사용합니다.

$('#btn_submit').click(function(){
});

2. 기본 js 바인딩을 사용합니다. (참고: Internet Explorer 8 및 이전 IE 버전은 그렇지 않습니다. 지원됨 Opera 7.0 및 Opera 이전 버전에서는 addEventListener() 메서드가 지원되지 않습니다. 이 유형의 브라우저 버전에서는 이벤트를 추가하려면 attachEvent() 메서드를 사용해야 합니다)

document.getElementById("#btn_submit").addEventListener(‘click’, function(){
}, false);

추가: 세 번째 매개변수 addEventListener 이벤트 모델을 결정하는 데 사용됩니다. 부모 요소와 자식 요소가 모두 이벤트에 바인딩되면 이 매개 변수는 어떤 이벤트가 먼저 트리거되는지 결정합니다. False는 버블링 이벤트 모델입니다. 하위 요소가 먼저 응답하고 상위 요소에 바인딩된 이벤트가 먼저 응답합니다. 이벤트 이후에 true는 버블링 이벤트 모델의 실행 순서와 반대되는 캡처 이벤트 모델을 묻습니다. 예:

<p id="test_p">   
<button type="button" value ="测试事件顺序" name="测试事件顺序" id="test_button">测试事件顺序</button></p>
document.getElementById(&#39;test_p&#39;).addEventListener(&#39;click&#39;, function () {        
console.log(&#39;p&#39;);    
},true)    
document.getElementById(&#39;test_button&#39;).addEventListener(&#39;click&#39;, function(){        
console.log(&#39;test1&#39;);    
},false);

이 예제의 이벤트 모델은 p 이벤트를 먼저 실행한 다음 버튼 이벤트를 실행하는 캡처 모델입니다. 주의할 사항은 다음과 같습니다. 예를 들어 이벤트 모델을 결정하는 것은 상위 요소가 이벤트를 바인딩할 때 전달되는 세 번째 매개변수입니다. , 위의 예에서 버튼이 이벤트를 바인딩할 때 전달된 세 번째 매개변수는 하위 요소도 포함하지 않는 한 아무런 효과가 없습니다.

3. 버튼 태그에서 직접 onclick 바인딩을 사용하세요

<button type="submit" id="btn_submit" onclick="btnAction()"> submit </button>

그런 다음 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그

<script>        
function btnAction()        { }
</script>

비교:

1 , jquery 바인딩을 사용하면 코드가 간결하고 사용하기 쉽습니다. 이벤트 바인딩 방법은 바인딩된 만큼의 메서드가 실행되는 추가 바인딩입니다.

싱글 바인딩 조건에서는 jQuery의 하위 레이어가 실제로 js로 구현되기 때문에 속도 차이는 크지 않습니다. 적어도 "바인딩" 링크는

속도에서는 병목 현상이 발생하지 않습니다. 페이지의 이벤트에 바인딩된 요소가 수만 개가 넘지 않는 한 걱정할 필요가 없습니다. 응답 속도, 이벤트만 수행하기 바인딩은 여전히 ​​매우 빠릅니다.

그래서 덜 엄격한 로드 요구 사항이 있는 "작은 프로그램"을 수행할 때 유지 관리 관점에서 간단하고 명확하며 유지 관리가 가장 쉬운 jQuery 바인딩을 사용하는 것이 좋습니다.

2 네이티브 js를 사용하면 코드의 양이 약간 늘어나지만, 네이티브 js에 익숙한 개발자에게 권장됩니다.

. 3. onclick 태그 바인딩을 사용하면 코드의 양은 많지 않지만 html 프론트엔드와 js 프론트엔드가 섞여있어 유지관리가 쉽지 않습니다.

원칙적으로 HTML 코드는 웹페이지의 구조만 반영할 수 있으며 특정 동작은 자바스크립트 코드를 사용하여 바인딩해야 합니다.

HTML에서 js와 ​​onclick 이벤트를 섞으면 html 프론트엔드와 js 프론트엔드의 작업이 뒤섞여 작업 분리가 어려워지는데요,

유지 관리가 어렵습니다. 이 접근 방식은 임시 디버깅에는 괜찮지만, 공식 완제품에 나타나지 않아야 한다면

따라서 이벤트를 바인딩하기 위해 onclick 태그 방법을 사용하는 것은 권장되지 않습니다.

위 내용은 HTML의 에 클릭 이벤트를 바인딩하는 여러 가지 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!