클릭과 온클릭의 차이점에 대한 자세한 설명-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

클릭과 온클릭의 차이점에 대한 자세한 설명

Jun 09, 2018 am 11:55 AM

click javascript onclick 용법

이번에는 click과 onclick의 차이점에 대해 자세히 설명하고, click과 onclick을 사용할 때 주의사항은 무엇인지 실제 사례를 통해 살펴보겠습니다.

네이티브 자바스크립트의 click은 w3c에서 DOM 버튼 객체로 설명됩니다. 이는 버튼에 대한 마우스 클릭을 시뮬레이션할 수 있는 html DOM click() 메서드이기도 합니다.

버튼 개체는 HTML 문서의 버튼을 나타냅니다. 버튼 요소에는 기본 동작이 없지만 이를 사용하려면 onclick 이벤트 핸들러가 있어야 합니다.

구문: buttonObject.click()

&lt;html&gt;
&lt;head&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
function clickButton()
 {
 document.getElementById('button1').click()
 }
function alertMsg()
 {
 alert("Button 1 was clicked!")
 }
&lt;/script&gt;
&lt;/head&gt;
&lt;body onload=&quot;clickButton()&quot;&gt;
&lt;form&gt;
&lt;input type=&quot;button&quot; id=&quot;button1&quot; onclick=&quot;alertMsg()&quot; value=&quot;Button 1&quot; /&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

onclick은 이벤트, 이벤트 개체 입니다. 이 이벤트를 지원하는 JavaScript 객체: 버튼, 문서, 체크박스, 링크, 라디오, 재설정, submit

HTML 이벤트가 발생하는 요소, 키보드 키 상태 등 이벤트 상태를 나타내는 DOM 이벤트 객체 , 마우스의 위치, 마우스 버튼의 상태. 이벤트는 이벤트가 발생할 때까지 실행되지 않는 함수와 함께 사용되는 경우가 많습니다!

&lt;html&gt;
&lt;body&gt;
  Field1: &lt;input type=&quot;text&quot; id=&quot;field1&quot; value=&quot;Hello World!&quot;&gt;&lt;br /&gt;
  Field2: &lt;input type=&quot;text&quot; id=&quot;field2&quot;&gt; &lt;br /&gt;
  点击下面的按钮，把 Field1 的内容拷贝到 Field2 中： &lt;br /&gt;
  &lt;button onclick=&quot;document.getElementById(&#39;field2&#39;).value=document.getElementById(&#39;field1&#39;).value&quot;&gt;Copy Text&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

Difference

앞서 언급했듯이 click은 방법이고 onclick은 이벤트입니다.

가장 근본적인 질문은 메소드와 이벤트의 차이점이 무엇인가요?

차이는 다음과 같습니다.

1. 이벤트 이름은 일반적으로 on으로 시작합니다.

2 방법은 프로그래머가 직접 호출하는 문, 즉 [onclick 이벤트]를 작성하는 것입니다. Triggered]

3. 이벤트는 프로그래머가 호출할 필요가 없습니다. 단, 프로그래머는 함수를 작성하여 해당 이벤트에 함수를 할당해야 하며 해당 이벤트가 트리거될 때 호출됩니다. [마우스 클릭 시 수행할 작업을 브라우저에 지시] 따라서 호출 순서는 다음과 같습니다. 먼저 메서드, 다음으로 이벤트입니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!