JS 이벤트 바인딩 및 이벤트 흐름 모델을 사용하는 방법-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JS 이벤트 바인딩 및 이벤트 흐름 모델을 사용하는 방법

php中世界最好的语言

May 30, 2018 am 10:49 AM

javascript 이벤트 제본

이번에는 JS 이벤트 바인딩 및 이벤트 흐름 모델을 사용하는 방법과 JS 이벤트 바인딩 및 이벤트 흐름 모델을 사용할 때 주의 사항이 무엇인지 보여드리겠습니다.

1. JS 이벤트 j (1) JS 이벤트 분류

1 /onresize/onchange/onfoucs/onscroll

3. 키보드 이벤트:

keydown: 키보드를 눌렀을 때 트리거됩니다.

keypress: 키보드를 누르고 떼는 순간에 트리거됩니다.

keyup: 키보드를 올릴 때 트리거

[주의사항]

①실행 순서: keydown 키누름 keyup

②키누름은 숫자, 문자, 기호 키만 캡처할 수 있으며 기능 키는 캡처할 수 없습니다.

3keydown 주기--길게 누를 때 키 누르기

4keydown이 있지만 반드시 keyup은 아닙니다. 길게 눌렀을 때 포커스가 사라지면 keyup이 더 이상 실행되지 않습니다.

⑤keypress는 대소문자를 구분하며 keydown, kewup은 다르지 않습니다.

4. 이벤트 요소:

이벤트가 실행되면 해당 이벤트가 호출하는 함수에 기본적으로 매개변수가 전달됩니다.

이 매개변수는 이벤트에 대한 다양한 세부 정보가 포함된 이벤트 요소입니다. .

 document.onkeydown=function(e){
 console.log(e);
 }
document.onkeydown=function(){
console.log(window.event);
}

로그인 후 복사

//兼容浏览器的写法：
document.onkeydown=function(e){
e==e||Window.event;
var Code=e.keyCode||e.which||e.charCode;
if(code==13){
//回车
}
}

로그인 후 복사

5. 키보드 키를 결정하는 방법은 무엇입니까?

①재시작 기능에서 이벤트 인자 e를 받습니다.

② e.key를 사용하여 누른 키 문자로 직접 이동할 수 있습니다(권장하지 않음).

3keyCode/which/charCode를 사용하여 키의 ASCII 코드 값을 가져올 수 있습니다.

(다양한 브라우저의 작성 방식과 호환)

 var Code=e.keyCode||e.which||e.charCode;
//判断组合键
var isAlt=0,isEnt=0;
document.onkeyup=function(e){
if(e.keyCode==18){
isAlt=1;
}      
if(e.keyCode==13){
isEnt=1;
}    
if(isAlt==1&&isEnt==1){
alert("同时按下Alt和Enter键");
}
}
document.onkeyup=function(){
console.log("keyup");
}
document.onkeypress=function(){
console.log("keypress");
}
document.onkeydown=function(){
console.log("keydown");
}
document.onkeypress=function(){
console.log(window.event);
}
//判断是否按下了回车键
document.onkeydown=function(e){
var code=e.keyCode;
if(code==13){
alert("你输入的是回车键");
}
}

로그인 후 복사

2. 이벤트 바인딩 모델

(1) DOM0 이벤트 모델

바인딩 참고 사항:

①window.onload를 사용하여 로딩을 완료한 후 바인딩합니다. ②몸체 뒤쪽에 위치시켜 바인딩합니다.

//body内容
<body>
  <button onclick="func()">内联模型绑定</button>
  <button id="btn1">哈哈哈哈</button>
  <button id="btn2">DOM2模型绑定</button>
  <button id="btn3">取消DOM2</button>
</body>

로그인 후 복사

1. 인라인 모델(인라인 바인딩): html 태그에서 속성의 속성 값으로 함수 이름을 직접 사용합니다.

<button onclick="func()">内联模型绑定</button>

로그인 후 복사

단점: 콘텐츠와 동작의 분리에 대한 w3c의 기본 사양을 준수하지 않습니다.

2. 스크립트 모델(동적 바인딩): JS에서 노드를 선택한 다음 onclick 속성을 노드에 추가합니다.

document.getElementById("btn1")=function(){}

로그인 후 복사

장점: 콘텐츠와 동작의 분리에 관한 w3c의 기본 사양을 준수하고 html과 js의 분리를 구현합니다. window.onload =function(){//事件} 단점: 동일한 노드는 동일한 유형의 이벤트를 한 번만 추가할 수 있습니다. 여러 번 추가하면 마지막 이벤트가 적용됩니다.

document.getElementById("btn1").onclick=function(){
  alert(1234);  
}
document.getElementById("btn1").onclick=function(){
  alert(234);  
}//重复的只能出现最近的一次

로그인 후 복사

3.DOM0에는 공통적인 단점이 있습니다. DOM0을 통해 바인딩된 이벤트는 바인딩되면 취소할 수 없습니다.

document.getElementById("btn3").onclick=function(){//不能取消匿名函数
  if(btn.detachEvent){
    btn.detachEvent("onclick",func1);
  }else{
    btn.removeEventListener("click",func1);
  }
    alert("取消DOM2");
}

로그인 후 복사

(2) DOM2 이벤트 모델

1. DOM2 이벤트 바인딩 추가:

①IE8 이전에는 .attachEvent("onclick", function) 사용

②IE8 이후에는 .addEventListener("click", function, true / false);

매개변수 3: false(기본값)는 이벤트 버블링을 의미하고, true를 전달하면 이벤트 캡처를 의미합니다.
③ 모든 브라우저 처리 방식과 호환 가능:

 var btn=document.getElementById("btn1");
 if(btn.attachEvent){
 btn.attachEvent("onclick",func1);//事件，事件需要执行的函数IE8可以
 }else{
 btn.attachEventListener("click",func1);
 }

로그인 후 복사

2. DOM2 바인딩의 장점:

① DOM2를 사용하여 동일한 노드가 동일한 유형의 여러 이벤트에 바인딩될 수 있습니다.

②DOM2를 사용하여 바인딩된 이벤트는 특수 기능을 사용하여 취소할 수 있습니다.

3. 이벤트 바인딩 취소:

① 바인딩하려면 attachmentEvent를 사용하고, 취소하려면 detachevent를 사용합니다.

② 바인딩하려면 AttachEventListener를 사용하고, 취소하려면 RemoveEventListenter를 사용하세요.
참고: DOM2에 바인딩된 이벤트를 취소해야 하는 경우 이벤트를 바인딩할 때
콜백 함수
는 함수 이름이어야 하며

익명 함수일 수 없습니다. 이벤트 취소 시 전달된 함수 이름은 다음과 같기 때문입니다. 취소.

3. JS 이벤트 흐름 모델

(1) JS의 이벤트 흐름 모델

1. 事件冒泡(fasle/不写)：当触发一个节点的事件是，会从当前节点开始，依次触发其祖先节点的同类型事件，直到DOM根节点。
2. 事件捕获(true)：当初发一个节点的事件时，会从DOM根节点开始，依次触发其祖先节点的同类型事件，直到当前节点自身。
3. 什么时候事件冒泡？什么时候事件捕获？
① 当使用addEventListener绑定事件，第三个参数传为true时表示事件捕获；
② 除此之外的所有事件绑定均为事件冒泡。

4. 阻止事件冒泡：

① IE10之前，e.cancelBubble = true;
② IE10之后，e.stopPropagation();

5. 阻止默认事件：

① IE10之前：e.returnValue = false;
② IE10之后：e.preventDefault();

//css
#p1{
  width: 300px;;
  height: 300px;
  background-color: powderblue;
}
#p2{
  width: 200px;
  height: 200px;
  background-color: deeppink;
}
#p3{
  width: 100px;
  height: 100px;
  background-color:#A9A9A9;
}
//html
<p id="p1">
  <p id="p2">
    <p id="p3"></p>
  </p>
</p>
<a href="01-事件笔记.html" rel="external nofollow" onclick="func()">超链接</a>
p1.addEventListener("click",function(){
  console.log("p1 click");
},false);
p2.addEventListener("click",function(){
  console.log("p2 click");
},false);
p3.addEventListener("click",function(){ //原来的顺序是：3-->2-->1。
//  myParagraphEventHandler(); //截获事件流后，只触发3.但是从2开始依然会冒泡；
  console.log("p3 click");
},false);

로그인 후 복사

结果（事件冒泡）（由小到大p3-》p2-》p1）：

p1.addEventListener("click",function(){
  console.log("p1 click");
},true);
p2.addEventListener("click",function(){
  console.log("p2 click");
},true);
p3.addEventListener("click",function(){ 
//  myParagraphEventHandler(); //截获事件流后，只触发3.但是从2开始依然会冒泡；
  console.log("p3 click");
},true);

로그인 후 복사

结果(事件捕获)（由小到大p3-》p2-》p1）：

//依然遵循事件冒泡
document.onclick=function(){
  console.log("document click")
}
//截获事件流阻止事件冒泡
function myParagraphEventHandler(e) {
   e = e || window.event;
  if (e.stopPropagation) {
     e.stopPropagation(); //IE10以后 
  } else {
     e.cancelBubble = true; //IE10之前
   }
}
//截获事件流阻止事件冒泡
function myParagraphEventHandler(e) {
   e = e || window.event;
  if (e.stopPropagation) {
     e.stopPropagation(); //IE10以后 
  } else {
     e.cancelBubble = true; //IE10之前
   }
}
//阻止默认事件
function eventHandler(e) {
  e = e || window.event;
// 防止默认行为 
   if (e.preventDefault) {
     e.preventDefault(); //IE10之后
  } else {
     e.returnValue = false; //IE10之前  
  }
}

로그인 후 복사

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7694

자바 튜토리얼

1640

Cakephp 튜토리얼

1393

라라벨 튜토리얼

1287

PHP 튜토리얼

1229

Related knowledge

BTCC 튜토리얼: BTCC 교환에서 MetaMask 지갑을 바인딩하고 사용하는 방법은 무엇입니까? Apr 26, 2024 am 09:40 AM

MetaMask(중국어로 Little Fox Wallet이라고도 함)는 무료이며 호평을 받는 암호화 지갑 소프트웨어입니다. 현재 BTCC는 MetaMask 지갑에 대한 바인딩을 지원합니다. 바인딩 후 MetaMask 지갑을 사용하여 빠르게 로그인하고 가치를 저장하고 코인을 구매할 수 있으며 첫 바인딩에는 20 USDT 평가판 보너스도 받을 수 있습니다. BTCCMetaMask 지갑 튜토리얼에서는 MetaMask 등록 및 사용 방법, BTCC에서 Little Fox 지갑을 바인딩하고 사용하는 방법을 자세히 소개합니다. MetaMask 지갑이란 무엇입니까? 3천만 명 이상의 사용자를 보유한 MetaMask Little Fox Wallet은 오늘날 가장 인기 있는 암호화폐 지갑 중 하나입니다. 무료로 사용할 수 있으며 확장으로 네트워크에 설치할 수 있습니다.

Xiaohongshu에서 하위 계정을 연결하는 방법은 무엇입니까? 계정이 정상인지 어떻게 확인하나요? Mar 21, 2024 pm 10:11 PM

오늘날 정보 폭발 시대에 개인 브랜드와 기업 이미지 구축은 점점 더 중요해지고 있습니다. Xiaohongshu는 중국 최고의 패션 라이프 공유 플랫폼으로서 많은 사용자의 관심과 참여를 이끌어냈습니다. 자신의 영향력을 확대하고 콘텐츠 전파의 효율성을 높이려는 사용자에게 하위 계정 바인딩은 효과적인 수단이 되었습니다. 그렇다면 Xiaohongshu는 어떻게 하위 계정을 연결합니까? 계정이 정상인지 확인하는 방법은 무엇입니까? 이 기사에서는 이러한 질문에 대해 자세히 답변해 드립니다. 1. Xiaohongshu에서 하위 계정을 연결하는 방법은 무엇입니까? 1. 메인 계정에 로그인: 먼저 Xiaohongshu 메인 계정에 로그인해야 합니다. 2. 설정 메뉴를 엽니다. 오른쪽 상단 모서리에 있는 "나"를 클릭한 다음 "설정"을 선택합니다. 3. 계정 관리 입력: 설정 메뉴에서 "계정 관리" 또는 "계정 도우미" 옵션을 찾아 클릭하세요.

Toutiao에서 Douyin을 바인딩하는 단계 및 방법 Mar 22, 2024 pm 05:56 PM

1. 터우티아오를 엽니다. 2. 오른쪽 하단에 있는 내를 클릭하세요. 3. [시스템 설정]을 클릭하세요. 4. [계정 및 개인정보 설정]을 클릭하세요. 5. [두음] 오른쪽에 있는 버튼을 클릭하면 두음이 바인딩됩니다.

Cainiao 앱을 Pinduoduo에 바인딩하는 방법 Cainiao Wrap을 Pinduoduo 플랫폼에 추가하는 방법은 무엇입니까? Mar 19, 2024 pm 02:30 PM

Cainiao 앱은 다양한 물류 정보를 제공할 수 있는 플랫폼입니다. 여기의 기능은 매우 강력하고 사용하기 쉽습니다. 물류 관련 문제가 있으면 여기에서 해결할 수 있습니다. -정지 서비스는 모든 것을 제 시간에 해결할 수 있습니다. 특급 배송 확인, 특급 배송 발송 등은 모두 문제없이 이루어지며 때로는 모든 정보를 쿼리할 수 있습니다. Pinduoduo에서 구매한 상품이 물류 정보를 표시할 수 없는 경우가 있습니다. 실제로 이를 달성하려면 구체적인 방법이 아래에 정리되어 있으며 누구나 확인할 수 있습니다. Cainiao를 Pinduoduo 계정에 연결하는 방법: 1. Cainiao 앱을 열고 메인 페이지로 이동합니다.

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 Jan 05, 2024 pm 06:08 PM

JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용

Cainiao 앱을 Pinduoduo에 바인딩하는 방법 Cainiao 앱을 Pinduoduo에 바인딩하는 방법 Mar 19, 2024 pm 05:16 PM

Cainiao Wrap을 사용할 때 Pinduoduo를 묶는 방법을 알고 계십니까? Cainiao Wrap 앱의 공식 버전은 이 플랫폼에서 일부 Pinduoduo의 물류 정보를 자동으로 동기화하지 않습니다. 주문 번호를 복사하거나 휴대폰에서 확인할 수 있습니다. 특급 배송 정보가 있는 경우. 물론, 이 모든 작업은 수동으로 완료해야 합니다. 자세한 내용을 알고 싶으면 와서 편집자와 함께 살펴보세요. Cainiao 앱을 Pinduoduo에 바인딩하는 방법 1. Cainiao 앱을 열고 메인 페이지 왼쪽 상단에 있는 "패키지 가이드"를 클릭합니다. 2. 인터페이스에는 다양한 쇼핑 웹사이트가 있으며, 계정을 묶을 수 있습니다. 3. 다른 전자상거래 플랫폼을 가져오려면 클릭하세요. 4. 사용자 인증: Pinduoduo를 클릭하여 인터페이스로 이동합니다.

Xiaomi 자동차 앱을 충전 파일 장치에 바인딩하는 방법 Apr 01, 2024 pm 06:52 PM

샤오미에서 출시한 최신 Mi su7 모델 자동차가 각종 핫 검색어를 휩쓸고 있습니다. 우연히 자동차를 사고 싶어하는 많은 사용자들이 샤오미 su7 모델 자동차를 선택했습니다. 그렇다면 샤오미 자동차 앱을 사용하여 자동차를 묶는 방법은 무엇입니까? 충전을 위해 가정용 충전 파일을 사용하기로 결정했다면 이 튜토리얼 가이드가 자세한 소개를 제공할 것입니다. 도움이 되기를 바랍니다. 먼저 Xiaomi 모바일 앱을 열고 오른쪽 하단에 있는 My 버튼을 클릭한 다음 My 인터페이스에서 충전 파일을 묶는 페이지에 들어간 후 스캔 코드를 클릭합니다. 아래 버튼을 누르고 충전 파일의 QR 코드를 스캔하면 QR 코드를 사용하여 충전 파일을 앱에 연결할 수 있습니다.

내 작은 블랙박스를 Steam에 바인딩할 수 없으면 어떻게 해야 하나요? Mar 12, 2024 pm 03:10 PM

Black Box가 Steam에 바인딩되지 못하는 현상은 네트워크 또는 소프트웨어 버전 문제로 인해 발생할 수 있습니다. 작은 블랙 박스는 출시 및 출시 예정인 게임의 가격, 컴퓨터 구성 요구 사항 및 리뷰, 심층적인 게임 플레이 분석 등의 정보를 제공합니다. 또한, 사용자는 언제 어디서나 모바일 기기를 통해 필요한 정보를 찾을 수 있습니다. 작은 블랙박스가 Steam에 연결되지 않는 경우 대처 방법 1. 네트워크 상태를 확인하고 해당 기기가 인터넷에 연결되어 있는지 확인하세요. 2. 리틀 블랙 박스 버전을 확인하세요. 리틀 블랙 박스 소프트웨어의 최신 버전을 사용하고 있는지 확인하고 Steam 계정을 연결해 보세요. 3. Steam 계정 설정을 확인하려면 Steam 계정에 로그인하여 개인정보 설정에서 타사 소프트웨어 바인딩 기능이 켜져 있는지 확인하세요. 4. 공식 고객 서비스에 문의 위의 단계를 수행해도 문제가 해결되지 않으면 공식 고객 서비스에 문의하여 도움을 받는 것이 좋습니다.

See all articles

JS 이벤트 바인딩 및 이벤트 흐름 모델을 사용하는 방법

①window.onload를 사용하여 로딩을 완료한 후 바인딩합니다. ②몸체 뒤쪽에 위치시켜 바인딩합니다.

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제