자바스크립트 등록 이벤트 처리 function_javascript 스킬 설명 예시
이벤트는 JavaScript의 핵심 콘텐츠이므로 여기서는 그 중요성에 대해 소개하지 않습니다. 이벤트가 트리거된 후 이를 처리하려면 이벤트 처리 함수가 필요합니다. 예를 들어 버튼을 클릭하면 div의 배경이 녹색으로 설정되도록 정의할 수 있습니다. 그런 다음 먼저 달성 방법을 살펴보겠습니다. 이 효과는 다음과 같습니다.
<html>
<head>
<meta charset=" utf-8">
<title>javascript如何注册事件处理函数</title>
<style type="text/css">
#mydiv{
width:100px;
height:100px;
background-color:red;
}
</style>
<script type="text/javascript">
function changebg(){
var mydiv=document.getElementById("mydiv");
mydiv.style.backgroundColor="green";
}
</script>
</head>
<body>
<div id="mydiv"></div>
<button id="bt">点击查看效果</button>
</body>
</html>
위 코드에서 버튼을 클릭하면 div의 배경색이 녹색으로 설정됩니다. 이는 코드가 버튼의 onclick 이벤트에 대한 이벤트 핸들러 함수를 등록하기 때문입니다. 이 함수를 사용하면 div의 배경색을 설정할 수 있습니다. 녹색으로. 객체 이벤트에 대한 이벤트 처리 함수 등록 방법을 예시를 통해 간략하게 소개하겠습니다.
방법 1:
이벤트 처리 기능을 HTML 코드에 직접 등록합니다. 즉, 이벤트 처리 기능을 통해 실행할 코드를 HTML 속성 값으로 직접 설정하는 방식입니다. 기사. 장점과 단점은 다음과 같습니다.
- 1. 이해하기 쉽고 사용하기 쉽습니다.
- 2. 모든 주요 브라우저가 이 방법을 지원합니다.
- 3. HTML 코드와 혼합되어 페이지가 매우 복잡해지고 성능과 내용의 분리 원칙에 어긋납니다.
- 4. 동일한 객체에는 동일한 유형의 이벤트 핸들러를 하나만 등록할 수 있습니다.
방법 2:
이벤트 핸들 모드, 소위 이벤트 핸들은 이벤트 처리 기능이며 지정된 개체의 지정된 이벤트는 이벤트 핸들러에 해당합니다. 이런 방식으로 이벤트 처리 함수를 등록하려면 먼저 객체에 대한 참조를 얻은 다음 객체의 해당 이벤트 처리 함수 속성에 이벤트 핸들을 할당해야 합니다. 사실 방법 1도 일종의 이벤트 핸들러 방법이다.
코드 예시는 다음과 같습니다.
<html>
<head>
<meta charset=" utf-8">
<title>javascript如何注册事件处理函数</title>
<style type="text/css">
#mydiv{
width:100px;
height:100px;
background-color:red;
}
</style>
<script type="text/javascript">
window.onload=function(){
var mydiv=document.getElementById("mydiv");
var bt=document.getElementById("bt");
bt.onclick=function(){
mydiv.style.backgroundColor="green";
}
}
</script>
</head>
<body>
<div id="mydiv"></div>
<button id="bt">点击查看效果</button>
</body>
</html>
위 코드에서 먼저 document.getElementById("bt")를 사용하여 버튼 객체에 대한 참조를 얻은 다음 이벤트 핸들(이벤트 처리 기능)을 버튼 객체의 onclick 이벤트 속성에 할당합니다. onclick은 버튼을 클릭할 때 이벤트가 발생하고 이벤트 핸들러에서 코드를 실행합니다. 장점과 단점은 다음과 같습니다.
- 1. 간단하고 이해하기 쉽습니다.
- 2개의 브라우저에서 지원됩니다.
- 3. 동일한 객체에는 동일한 유형의 이벤트 핸들러를 하나만 등록할 수 있습니다.
방법 3:
좀 더 발전된 이벤트 등록 방법, 즉 이벤트 리스너(Event Listener)입니다. 이 방법은 지정된 이벤트 유형에 대해 하나의 핸들러 함수만 지정된 개체에 등록할 수 있다는 문제를 해결합니다. 그러나 아래에 소개된 특정 호환성 문제가 있습니다.
1).IE 브라우저:
IE 브라우저에서는 AttachEvent(), detachEvent() 메소드를 사용하여 지정된 객체에 대한 이벤트 처리 함수를 등록하고, 등록된 이벤트 처리 함수를 삭제할 수 있습니다.
구문 형식은 다음과 같습니다.
element.attachEvent("onevent",eventListener)
이 함수에는 두 개의 매개변수가 있는데 첫 번째 매개변수는 이벤트 유형의 이름이고 두 번째 매개변수는 등록할 이벤트 핸들러 함수입니다.
코드 예시는 다음과 같습니다.
<html>
<head>
<meta charset=" utf-8">
<title>javascript如何注册事件处理函数</title>
<style type="text/css">
#mydiv{
width:100px;
height:100px;
background-color:red;
}
</style>
<script type="text/javascript">
window.onload=function(){
var mydiv=document.getElementById("mydiv");
var bt=document.getElementById("bt");
bt.attachEvent("onclick",changebg);
function changebg(){
mydiv.style.backgroundColor="green";
}
}
</script>
</head>
<body>
<div id="mydiv"></div>
<button id="bt">点击查看效果</button>
</body>
</html>
위 코드는 attachmentEvent() 함수를 사용하여 버튼에 대한 onclick 이벤트 핸들러를 등록하지만 IE 브라우저에서만 유효합니다. 원래 등록된 이벤트 처리 함수를 분리하려면 detachEvent() 함수를 사용하십시오. 구문 형식은 다음과 같습니다.
element.detachEvent("onevent",eventListener)
형식은 attachmentEvent() 함수와 동일합니다.
특별 참고 사항: 첫 번째 매개변수에는 on이 포함되어야 합니다. 예를 들어 클릭 이벤트는 "onclick"으로 작성되어야 합니다.
2) 표준 브라우저:
표준 브라우저(IE9 및 IE9 이상 브라우저 포함)에서는 addEventListener(), RemoveEventListener() 함수를 사용하여 등록 처리 기능을 등록하고 삭제합니다.
구문 형식은 다음과 같습니다.
element.addEventListener('event', eventListener, useCapture);
이 함수에는 세 가지 매개변수가 있습니다. 첫 번째 매개변수는 이벤트 유형 이름이고, 두 번째 매개변수는 등록할 이벤트 처리 함수입니다. 세 번째 함수는 이벤트 전달 프로세스의 캡처 단계에서 이 처리 함수를 호출할지 여부를 지정합니다. 단계가 호출됩니다. 기본 조건에서 이 속성의 값은 false입니다. 즉, 버블링 단계 중에 이벤트 핸들러가 호출됩니다.
특별 참고 사항: 첫 번째 매개변수는 on을 포함할 수 없습니다. 예를 들어 클릭 이벤트는 "onclick"으로 쓸 수 없지만 "click"으로 써야 합니다.
코드 예시는 다음과 같습니다.
<html>
<head>
<meta charset=" utf-8">
<title>javascript如何注册事件处理函数</title>
<style type="text/css">
#mydiv{
width:100px;
height:100px;
background-color:red;
}
</style>
<script type="text/javascript">
window.onload=function(){
var mydiv=document.getElementById("mydiv");
var bt=document.getElementById("bt");
bt.addEventListener("click",changebg);
function changebg(){
mydiv.style.backgroundColor="green";
}
}
</script>
</head>
<body>
<div id="mydiv"></div>
<button id="bt">点击查看效果</button>
</body>
</html>
以上代码在IE9和IE9以上或者其他标准浏览器中，点击按钮可以将div的背景颜色设置为绿色。使用removeEventListener()函数可以解除原来注册的事件处理函数，语法格式如下:
element.removeEventListener('event', eventListener, useCapture);
格式和addEventListener()函数式一样的。
跨浏览器注册事件处理函数:
只要加个判断语句即可，代码如下:
var EventUtil={
//注册
addHandler: function(element, type, handler){
if (element.addEventListener){
element.addEventListener(type, handler, false);
} else if (element.attachEvent){
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
//移除注册
removeHandler: function(element, type, handler){
if (element.removeEventListener){
element.removeEventListener(type, handler, false);
} else if (element.detachEvent){
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
};以上就是本文的详细内容，希望对大家的学习有所帮助。
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7388
15
1630
14
1357
52
1267
25
1216
29
Xiaohongshu에 여러 계정을 등록하는 방법은 무엇입니까? 여러 계정을 등록하면 발각되나요?
Mar 25, 2024 am 09:41 AM
소셜 네트워킹과 전자상거래를 통합한 플랫폼인 Xiaohongshu는 점점 더 많은 사용자를 끌어들이고 있습니다. 일부 사용자는 Xiaohongshu와 더 나은 상호 작용 경험을 위해 여러 계정을 등록하기를 원합니다. 그렇다면 Xiaohongshu에 여러 계정을 등록하는 방법은 무엇입니까? 1. Xiaohongshu에 여러 계정을 등록하는 방법은 무엇입니까? 1. 다른 휴대폰 번호를 사용하여 등록합니다. 현재 Xiaohongshu는 주로 휴대폰 번호를 사용하여 계정을 등록합니다. 사용자들은 때때로 여러 개의 휴대폰 번호 카드를 구입하여 여러 개의 Xiaohongshu 계정을 등록하는 데 사용하려고 합니다. 그러나 이 방법에는 여러 장의 휴대폰 번호 카드를 구입하는 것이 번거롭고 비용이 많이 들기 때문에 몇 가지 제한 사항이 있습니다. 2. 이메일을 사용하여 등록하세요. 휴대폰 번호 외에도 이메일을 사용하여 Xiaohongshu 계정을 등록할 수 있습니다. 사용자는 여러 개의 이메일 주소를 준비한 후 해당 이메일 주소를 사용하여 계정을 등록할 수 있습니다. 하지만
Manwa Comics 계정 등록 방법
Feb 28, 2024 am 08:00 AM
Manwa Comics 플랫폼에는 모든 사람이 탐색할 수 있는 풍부한 만화 리소스가 있습니다. 만와코믹스 공식 플랫폼에 쉽게 들어오시면 온갖 종류의 멋진 만화 작품을 감상하실 수 있습니다. 각 친구는 자신이 좋아하는 만화를 쉽게 찾아 자신의 취향에 따라 읽을 수 있습니다. 그렇다면 Manwa Comics의 공식 계정을 등록하는 방법은 무엇입니까? 이 웹사이트의 편집자는 도움이 필요한 모든 사람에게 도움이 되기를 바라며 이 상세한 튜토리얼 가이드를 제공할 것입니다. 만와 코믹스 - 공식 입구: https://fuw11.cc/mw666 만와 코믹스 앱 다운로드 주소: https://www.siemens-home.cn/soft/74440.html 만와 코믹스 비본토 지역 입구: https: /
Xiaohongshu 계정을 등록하는 방법은 무엇입니까? Xiaohongshu 계정을 등록하려면 무엇이 필요합니까?
Mar 22, 2024 am 10:16 AM
생활, 엔터테인먼트, 쇼핑, 공유를 통합한 소셜 플랫폼인 Xiaohongshu는 많은 젊은이들의 일상생활에서 없어서는 안 될 부분이 되었습니다. 그렇다면 Xiaohongshu 계정을 등록하는 방법은 무엇입니까? 1. Xiaohongshu 계정을 등록하는 방법은 무엇입니까? 1. Xiaohongshu 공식 웹사이트를 열거나 Xiaohongshu 앱을 다운로드하세요. 아래의 "등록" 버튼을 클릭하면 다양한 등록 방법을 선택할 수 있습니다. 현재 Xiaohongshu는 휴대폰 번호, 이메일 주소 및 제3자 계정(예: WeChat, QQ, Weibo 등) 등록을 지원합니다. 3. 관련 정보를 입력하세요. 선택한 등록 방법에 따라 해당 휴대폰 번호, 이메일 주소 또는 제3자 계정 정보를 입력하세요. 4. 비밀번호를 설정하세요. 계정을 안전하게 보호하려면 강력한 비밀번호를 설정하세요. 5. 인증을 완료합니다. 안내에 따라 휴대폰 인증 또는 이메일 인증을 완료하세요. 6. 개인을 온전케 하라
휴대폰번호에 등록된 내용을 확인하는 방법 '자세한 설명 : 휴대폰번호 등록을 위한 APP조회 방법'
Feb 07, 2024 am 08:24 AM
여러분도 이런 경험이 있으실지 모르겠습니다. 여러분의 휴대폰은 종종 알 수 없는 문자 메시지나 일부 웹사이트의 등록 정보 또는 기타 인증 정보를 수신합니다. 모르시더라도 오늘 제가 여러분과 공유할 내용은 한 번의 클릭으로 익숙하지 않은 모든 웹사이트의 바인딩을 해제하는 방법을 가르치는 것입니다. 1단계: 번호 서비스 플랫폼을 엽니다. 이 기술은 매우 실용적입니다. 단계는 다음과 같습니다. 위챗을 열고 검색창에서 더하기 아이콘을 클릭한 후 친구 추가를 선택한 후 검색할 서비스 플랫폼 코드번호를 입력하세요. 물론 공공기관에 속해 있으며 국립정보통신기술원에서 출시한 번호 서비스 플랫폼이 있다는 것을 알 수 있습니다. 클릭 한 번으로 누구나 휴대전화 번호 정보를 해제할 수 있습니다. 2단계: 휴대전화가 나에게 표시되었는지 확인
163 이메일 등록 방법
Feb 14, 2024 am 09:20 AM
일부 사용자는 163 메일함을 사용하려고 할 때 계정이 없다는 것을 알게 됩니다. 그러면 이때 계정을 등록해야 하는 경우 어떻게 해야 합니까? 이제 편집자가 가져온 163 이메일 등록 방법을 살펴보겠습니다. 1. 먼저 브라우저에서 163 이메일 공식 웹사이트를 검색하고 해당 페이지에서 [새 계정 등록]을 클릭합니다. 2. 그런 다음 [무료 이메일] 또는 [VIP 이메일]을 선택합니다. 3. 마지막으로 선택 후 정보를 입력합니다. [지금 바로 등록]을 클릭하세요.
Xiaohongshu 계정을 등록하는 방법은 무엇입니까? 계정이 비정상인 경우 어떻게 복구하나요?
Mar 21, 2024 pm 04:57 PM
세계에서 가장 인기 있는 라이프스타일 공유 플랫폼 중 하나인 Xiaohongshu는 수많은 사용자를 끌어 모았습니다. 그렇다면 Xiaohongshu 계정을 등록하는 방법은 무엇입니까? 이번 글에서는 Xiaohongshu 계정 등록 과정을 자세히 소개하고, Xiaohongshu 계정 이상 현상을 복구하는 방법에 대한 질문에 답변해 드리겠습니다. 1. Xiaohongshu 계정을 등록하는 방법은 무엇입니까? 1. Xiaohongshu 앱 다운로드: 모바일 앱 스토어에서 Xiaohongshu 앱을 검색하여 다운로드하고 설치가 완료된 후 엽니다. 2. 계정 등록: Xiaohongshu 앱을 연 후 홈페이지 오른쪽 하단에 있는 '나' 버튼을 클릭한 후 '등록'을 선택하세요. 3. 등록 정보 입력: 프롬프트에 따라 휴대폰 번호, 비밀번호, 인증 코드 및 기타 등록 정보를 입력합니다. 4. 개인정보 입력: 등록이 완료되면 안내에 따라 이름, 성별, 생일 등 개인정보를 입력하세요. 5. 설정
qooapp 계정 등록 방법
Mar 19, 2024 pm 08:58 PM
qooapp은 많은 게임을 다운로드할 수 있는 소프트웨어인데 계정을 등록하는 방법은 무엇입니까? 아직 패스가 없는 경우 "등록" 버튼을 클릭한 후 등록 방법을 선택해야 합니다. 이 계정 등록 방법 소개는 사용법을 설명하기에 충분합니다. 다음은 자세한 소개이므로 살펴보십시오. qooapp 계정을 등록하는 방법 답변: 등록을 클릭한 후 등록 방법을 선택하세요. 구체적인 방법: 1. 로그인 인터페이스에 들어간 후 아직 패스가 없습니까? 2. 그런 다음 필요한 로그인 방법을 선택하십시오. 3. 그 후 바로 사용하시면 됩니다. 공식 웹사이트 등록: 1. 웹사이트 https://apps.ppaooq.com/을 열고 오른쪽 상단을 클릭하여 등록합니다. 2. 등록 선택
하나의 휴대폰 번호로 두 개의 B 사이트 번호를 등록하는 방법은 무엇입니까? 스테이션 B는 휴대폰 바인딩을 어떻게 해제합니까?
Mar 21, 2024 pm 10:10 PM
Bilibili(빌리빌리)는 중국 젊은이들 사이에서 큰 인기를 얻고 있는 동영상 공유 웹사이트로 많은 사용자를 유치하고 있습니다. 일부 사용자는 별도로 관리하고 사용할 수 있도록 두 개의 Bilibili 계정을 갖고 싶어합니다. 그렇다면 하나의 휴대폰 번호로 두 개의 B 사이트 번호를 등록하는 방법은 무엇입니까? 이 기사에서는 이 문제와 휴대폰 바인딩을 해제하는 방법에 중점을 둘 것입니다. 1. 하나의 휴대폰 번호로 두 개의 B 사이트 번호를 등록하는 방법은 무엇입니까? 1. 새 계정 등록: 먼저 휴대폰에서 Bilibili 앱을 열거나 공식 웹사이트에 로그인한 후 "등록" 버튼을 클릭하고 휴대폰 번호, 이메일 또는 제3자를 사용하여 등록 방법을 선택할 수 있습니다. 당사자 계정(예: WeChat, QQ 등)을 등록합니다. 2. 계정 등록 시 시스템 안내에 따라 휴대전화 번호, 인증번호, 비밀번호 설정 등 필요한 정보를 입력하세요. 반드시 다른 계정을 사용하세요
