JS 이벤트 바인딩 및 이벤트 흐름 모델 사례 분석-JS 튜토리얼-php.cn

2. 이벤트 바인딩 모델 " > 2. 이벤트 바인딩 모델

집

웹 프론트엔드

JS 튜토리얼

JS 이벤트 바인딩 및 이벤트 흐름 모델 사례 분석

php中世界最好的语言

May 22, 2018 am 09:52 AM

javascript 사례 연구 모델

이번에는 JS 이벤트 바인딩 및 이벤트 흐름 모델에 대한 사례 분석을 가져오겠습니다. JS 이벤트 바인딩 및 이벤트 흐름 모델을 사용할 때 주의 사항은 무엇입니까?

1. JS 이벤트

(1) JS 이벤트 분류

1. 마우스 이벤트:

click/dbclick/mouseover/mouseout

로그인 후 복사

2. HTML 이벤트:

 onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll

로그인 후 복사

3. 키보드 이벤트:

keydown: 키보드 누름 Triggered when
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를 사용하여 로딩을 완료한 후 바인딩합니다.

window.onload =function(){//事件}

②몸체 뒤쪽에 위치시켜 바인딩합니다.

//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의 분리를 구현합니다.
단점: 동일한 노드는 동일한 유형의 이벤트를 한 번만 추가할 수 있습니다. 여러 번 추가하면 마지막 이벤트가 적용됩니다.

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 도구

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)

뜨거운 주제

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

7333

자바 튜토리얼

1627

Cakephp 튜토리얼

1351

라라벨 튜토리얼

1262

PHP 튜토리얼

1209

Related knowledge

세계에서 가장 강력한 오픈 소스 MoE 모델이 여기에 있습니다. 중국의 기능은 GPT-4와 비슷하며 가격은 GPT-4-Turbo의 거의 1%에 불과합니다. May 07, 2024 pm 04:13 PM

기존 컴퓨팅을 능가할 뿐만 아니라 더 낮은 비용으로 더 효율적인 성능을 달성하는 인공 지능 모델을 상상해 보세요. 이것은 공상과학 소설이 아닙니다. DeepSeek-V2[1], 세계에서 가장 강력한 오픈 소스 MoE 모델이 여기에 있습니다. DeepSeek-V2는 경제적인 훈련과 효율적인 추론이라는 특징을 지닌 전문가(MoE) 언어 모델의 강력한 혼합입니다. 이는 236B 매개변수로 구성되며, 그 중 21B는 각 마커를 활성화하는 데 사용됩니다. DeepSeek67B와 비교하여 DeepSeek-V2는 더 강력한 성능을 제공하는 동시에 훈련 비용을 42.5% 절감하고 KV 캐시를 93.3% 줄이며 최대 생성 처리량을 5.76배로 늘립니다. DeepSeek은 일반 인공지능을 연구하는 회사입니다.

MLP를 대체하는 KAN은 오픈소스 프로젝트를 통해 컨볼루션으로 확장되었습니다. Jun 01, 2024 pm 10:03 PM

이달 초 MIT와 기타 기관의 연구자들은 MLP에 대한 매우 유망한 대안인 KAN을 제안했습니다. KAN은 정확성과 해석성 측면에서 MLP보다 뛰어납니다. 그리고 매우 적은 수의 매개변수로 더 많은 수의 매개변수를 사용하여 실행되는 MLP보다 성능이 뛰어날 수 있습니다. 예를 들어 저자는 KAN을 사용하여 더 작은 네트워크와 더 높은 수준의 자동화로 DeepMind의 결과를 재현했다고 밝혔습니다. 구체적으로 DeepMind의 MLP에는 약 300,000개의 매개변수가 있는 반면 KAN에는 약 200개의 매개변수만 있습니다. KAN은 MLP와 같이 강력한 수학적 기반을 가지고 있으며, KAN은 Kolmogorov-Arnold 표현 정리를 기반으로 합니다. 아래 그림과 같이 KAN은

안녕하세요, 일렉트릭 아틀라스입니다! 보스턴 다이나믹스 로봇 부활, 180도 이상한 움직임에 겁먹은 머스크 Apr 18, 2024 pm 07:58 PM

Boston Dynamics Atlas가 공식적으로 전기 로봇 시대에 돌입했습니다! 어제 유압식 Atlas가 역사의 무대에서 "눈물을 흘리며" 물러났습니다. 오늘 Boston Dynamics는 전기식 Atlas가 작동 중이라고 발표했습니다. 상업용 휴머노이드 로봇 분야에서는 보스턴 다이내믹스가 테슬라와 경쟁하겠다는 각오를 다진 것으로 보인다. 새 영상은 공개된 지 10시간 만에 이미 100만 명이 넘는 조회수를 기록했다. 옛 사람들은 떠나고 새로운 역할이 등장하는 것은 역사적 필연이다. 올해가 휴머노이드 로봇의 폭발적인 해라는 것은 의심의 여지가 없습니다. 네티즌들은 “로봇의 발전으로 올해 개막식도 인간처럼 생겼고, 자유도도 인간보다 훨씬 크다. 그런데 정말 공포영화가 아닌가?”라는 반응을 보였다. 영상 시작 부분에서 아틀라스는 바닥에 등을 대고 가만히 누워 있는 모습입니다. 다음은 입이 떡 벌어지는 내용이다

Google은 열광하고 있습니다. JAX 성능이 Pytorch와 TensorFlow를 능가합니다! GPU 추론 훈련을 위한 가장 빠른 선택이 될 수 있습니다. Apr 01, 2024 pm 07:46 PM

Google이 추진하는 JAX의 성능은 최근 벤치마크 테스트에서 Pytorch와 TensorFlow를 능가하여 7개 지표에서 1위를 차지했습니다. 그리고 JAX 성능이 가장 좋은 TPU에서는 테스트가 이루어지지 않았습니다. 개발자들 사이에서는 여전히 Tensorflow보다 Pytorch가 더 인기가 있습니다. 그러나 앞으로는 더 큰 모델이 JAX 플랫폼을 기반으로 훈련되고 실행될 것입니다. 모델 최근 Keras 팀은 기본 PyTorch 구현을 사용하여 세 가지 백엔드(TensorFlow, JAX, PyTorch)와 TensorFlow를 사용하는 Keras2를 벤치마킹했습니다. 첫째, 그들은 주류 세트를 선택합니다.

AI가 수학적 연구를 전복시킨다! 필즈상 수상자이자 중국계 미국인 수학자, Terence Tao가 좋아하는 11개 논문 발표 | Apr 09, 2024 am 11:52 AM

AI는 실제로 수학을 변화시키고 있습니다. 최근 이 문제에 주목하고 있는 타오저쉬안(Tao Zhexuan)은 '미국수학회지(Bulletin of the American Mathematical Society)' 최신호를 게재했다. '기계가 수학을 바꿀 것인가?'라는 주제를 중심으로 많은 수학자들이 그들의 의견을 표현했습니다. 저자는 필즈상 수상자 Akshay Venkatesh, 중국 수학자 Zheng Lejun, 뉴욕대학교 컴퓨터 과학자 Ernest Davis 등 업계의 유명 학자들을 포함해 강력한 라인업을 보유하고 있습니다. AI의 세계는 극적으로 변했습니다. 이 기사 중 상당수는 1년 전에 제출되었습니다.

FisheyeDetNet: 어안 카메라를 기반으로 한 최초의 표적 탐지 알고리즘 Apr 26, 2024 am 11:37 AM

표적 탐지는 자율주행 시스템에서 상대적으로 성숙한 문제이며, 그 중 보행자 탐지는 가장 먼저 배포되는 알고리즘 중 하나입니다. 대부분의 논문에서 매우 포괄적인 연구가 수행되었습니다. 그러나 서라운드 뷰를 위한 어안 카메라를 사용한 거리 인식은 상대적으로 덜 연구되었습니다. 큰 방사형 왜곡으로 인해 표준 경계 상자 표현은 어안 카메라에서 구현하기 어렵습니다. 위의 설명을 완화하기 위해 확장된 경계 상자, 타원 및 일반 다각형 디자인을 극/각 표현으로 탐색하고 인스턴스 분할 mIOU 메트릭을 정의하여 이러한 표현을 분석합니다. 제안된 다각형 형태의 모델 fisheyeDetNet은 다른 모델보다 성능이 뛰어나며 동시에 자율 주행을 위한 Valeo fisheye 카메라 데이터 세트에서 49.5% mAP를 달성합니다.

공장에서 일하는 테슬라 로봇, 머스크 : 올해 손의 자유도가 22도에 달할 것! May 06, 2024 pm 04:13 PM

테슬라의 로봇 옵티머스(Optimus)의 최신 영상이 공개됐는데, 이미 공장에서 작동이 가능한 상태다. 정상 속도에서는 배터리(테슬라의 4680 배터리)를 다음과 같이 분류합니다. 공식은 또한 20배 속도로 보이는 모습을 공개했습니다. 작은 "워크스테이션"에서 따고 따고 따고 : 이번에 출시됩니다. 영상에는 옵티머스가 공장에서 이 작업을 전 과정에 걸쳐 사람의 개입 없이 완전히 자율적으로 완료하는 모습이 담겨 있습니다. 그리고 Optimus의 관점에서 보면 자동 오류 수정에 중점을 두고 구부러진 배터리를 집어 넣을 수도 있습니다. NVIDIA 과학자 Jim Fan은 Optimus의 손에 대해 높은 평가를 했습니다. Optimus의 손은 세계의 다섯 손가락 로봇 중 하나입니다. 가장 능숙합니다. 손은 촉각적일 뿐만 아니라

Yolov10: 자세한 설명, 배포, 적용이 모두 한곳에! Jun 07, 2024 pm 12:05 PM

1. 소개 지난 몇 년 동안 YOLO는 계산 비용과 감지 성능 간의 효과적인 균형으로 인해 실시간 객체 감지 분야에서 지배적인 패러다임이 되었습니다. 연구원들은 YOLO의 아키텍처 설계, 최적화 목표, 데이터 확장 전략 등을 탐색하여 상당한 진전을 이루었습니다. 동시에 사후 처리를 위해 NMS(비최대 억제)에 의존하면 YOLO의 엔드투엔드 배포가 방해되고 추론 대기 시간에 부정적인 영향을 미칩니다. YOLO에서는 다양한 구성 요소의 설계에 포괄적이고 철저한 검사가 부족하여 상당한 계산 중복이 발생하고 모델 기능이 제한됩니다. 이는 최적이 아닌 효율성을 제공하며 성능 향상을 위한 상대적으로 큰 잠재력을 제공합니다. 이 작업의 목표는 사후 처리와 모델 아키텍처 모두에서 YOLO의 성능 효율성 경계를 더욱 향상시키는 것입니다. 이를 위해

See all articles

JS 이벤트 바인딩 및 이벤트 흐름 모델 사례 분석

2. 이벤트 바인딩 모델

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제