이 글은 온클릭 비동기성, 동시성, 이벤트 트리거 순서, 시간 등록 등 일반적으로 사용되는 클릭 시간에 대한 관련 내용을 주로 소개하는 JavaScript에 대한 관련 지식을 제공합니다. 함께 살펴보시길 바랍니다. 모두에게 도움이 될 것입니다. [관련 권장 사항: JavaScript 비디오 튜토리얼, 웹 프론트 엔드] onclick 소개 onclick은 HTML의 이벤트 속성이며, 해당 기능은 사용자가 요소를 클릭할 때 이벤트를 트리거하는 것입니다. . onclick 이벤트는 , , 등과 같은 모든 요소에 바인딩될 수 있습니다. onclick 이벤트의 트리거 순서는 먼저 캡처한 다음 버블링하는 것입니다. 즉, 캡처 이벤트가 먼저 트리거된 다음 버블링 이벤트가 트리거됩니다. onclick의 비동기성 onclick 이벤트는 비동기식입니다. 즉, onclick 이벤트는 JavaScript 실행 스택의 작업이 실행된 후에만 트리거됩니다. onclick click document.getElementById('btn').onclick = function () { console.log('click'); } console.log('start'); for (var i = 0; i < 1000000000; i++) ; console.log('end'); 위 코드에서는 onclick 이벤트를 요소에 바인딩한 다음 JavaScript에서 for 루프를 사용했습니다. 이때 이 루프는 1억 번 실행됩니다. , 그러나 버튼을 클릭하는 것을 방해하지는 않습니다. 이때, 버튼을 클릭해도 콘솔에서는 응답이 없을 것입니다. 이는 onclick 이벤트가 비동기식이기 때문에 버튼을 클릭하면 onclick 이벤트가 발생하지 않고 대기할 때까지 기다립니다. JavaScript가 실행되면 스택의 작업이 실행될 때까지 트리거되지 않습니다. onclick의 동기화 위에서는 onclick 이벤트가 비동기적이라고 했는데, 지금은 onclick 이벤트가 동기적이라고 합니다. 사실 둘 다 맞는 말입니다. 코드: onclick click document.getElementById('btn').onclick = function () { console.log('click'); } for (var i = 0; i < 10; i++) { console.log(i); if (i === 5) { document.getElementById('btn').click(); } } 위 코드에서는 콘솔 출력이 5에 도달하면 onclick 이벤트를 수동으로 트리거합니다. 이때 콘솔은 click 을 출력한 후 계속해서 다음을 출력합니다. . 관련 정보를 참조한 후 onclick 이벤트가 사용자에 의해 수동으로 트리거되면 onclick 이벤트는 비동기식이며 이벤트 대기열에 푸시됩니다. onclick 이벤트가 JavaScript 코드에 의해 트리거되면 onclick 이벤트가 발생합니다. 즉시 실행됩니다. onclick의 트리거링 시퀀스 onclick 이벤트의 트리거링 시퀀스는 먼저 캡처한 다음 버블링하는 것입니다. 즉, 캡처 이벤트가 먼저 트리거된 다음 버블링 이벤트가 트리거됩니다. onclick click document.getElementById('div1').onclick = function () { console.log('div1'); } document.getElementById('div2').onclick = function () { console.log('div2'); } document.getElementById('div3').onclick = function () { console.log('div3'); } document.getElementById('btn').onclick = function () { console.log('btn'); } 위 코드에서는 onclick 이벤트를 요소와 요소에 각각 바인딩한 다음 요소를 클릭하면 콘솔에 btn, div3, div2가 출력됩니다. div1, 이는 onclick 이벤트의 실행 순서입니다. 이벤트가 트리거되는 순서 onclick 이벤트에서 마우스 버튼과 관련된 여러 이벤트를 바인딩하면 이러한 이벤트가 트리거되는 순서는 무엇입니까? onclick click document.getElementById('btn').onclick = function () { console.log('click'); } document.getElementById('btn').ondblclick = function () { console.log('dblclick'); } document.getElementById('btn').onmousedown = function () { console.log('mousedown'); } document.getElementById('btn').onmouseup = function () { console.log('mouseup'); } 위 코드에서는 onclick, ondblclick, onmousedown 및 onmouseup 네 가지 이벤트를 그런 다음 요소를 클릭하면 콘솔에 mousedown, mouseup 및 click이 순서대로 출력됩니다. 요소를 두 번 클릭하면 콘솔은 mousedown, mouseup, click, mousedown, mouseup, click, dblclick을 순서대로 출력합니다. 따라서 이벤트가 발생하는 순서는 onmousedown, onmouseup, onclick, ondblclick입니다. 따라서 onclick 이벤트를 사용할 때 마우스 버튼과 관련된 여러 이벤트가 바인딩된 경우 예상치 못한 문제가 발생하지 않도록 이벤트 처리 로직에 주의해야 합니다. Event Object onclick 이벤트에서는 이벤트 관련 정보가 포함된 이벤트 매개변수를 통해 이벤트 객체를 얻을 수 있습니다. 이벤트 객체는 MouseEvent의 인스턴스입니다. UIEvent와 Event를 상속하므로 이벤트 객체에는 UIEvent와 Event의 모든 속성과 메서드가 포함됩니다. MouseEvent 속성: MouseEvent 메서드: getModifierState(): 지정된 키가 눌렸는지 여부를 나타내는 부울 값을 반환합니다. initMouseEvent(): 이벤트 객체를 초기화합니다. preventDefault(): 이벤트를 방지하기 위한 기본 동작입니다. stopImmediatePropagation(): 이벤트가 위쪽으로 버블링되는 것을 중지하고 이벤트의 추가 캡처 또는 버블링을 방지합니다. stopPropagation(): 이벤트가 발생하는 것을 중지합니다. 클릭 이벤트 등록 방법 클릭 이벤트는 onclick 속성, addEventListener() 메소드, attachmentEvent() 메소드를 통해 등록할 수 있습니다. onclick 속성 onclick 속성은 요소의 속성으로, 클릭 이벤트가 발생하면 이 함수가 실행됩니다. clickaddEventListener() addEventListener()方法是EventTarget的一个方法，它的第一个参数是事件的名称，第二个参数是事件处理函数，第三个参数是一个布尔值，表示是否在捕获阶段触发事件处理函数。click var btn = document.getElementById('btn'); btn.addEventListener('click', function() { console.log('click'); }); attachEvent() attachEvent()方法是EventTarget的一个方法，它的第一个参数是事件的名称，第二个参数是事件处理函数。click var btn = document.getElementById('btn'); btn.attachEvent('onclick', function() { console.log('click'); }); 结语 click事件是鼠标点击事件，它是MouseEvent的一个实例，它的事件类型是click，它可以通过onclick属性、addEventListener()方法和attachEvent()方法注册。 【相关推荐：JavaScript视频教程、web前端】
