HTML의 <button>에 클릭 이벤트를 바인딩하는 여러 가지 방법 소개-HTML 튜토리얼-php.cn

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

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

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

로그인 후 복사

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

$(&#39;#btn_submit&#39;).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>

로그인 후 복사

그런 다음

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

HTML의

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

HTML의