집 > 기사 > 웹 프론트엔드 > 클릭과 온클릭의 차이점에 대한 자세한 설명

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

php中世界最好的语言원래의: 2018-06-09 11:55:443257검색

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

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

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

구문: buttonObject.click()

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

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

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

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

Difference

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

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

차이는 다음과 같습니다.

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

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

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

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