js를 사용하여 이벤트 처리 모델 구현

이 글은 주로 이벤트 처리 모델을 구현하기 위해 js를 사용하는 방법을 소개합니다. 관심 있는 친구들이 참고할 수 있는 참고 가치가 있습니다.

다양한 브라우저에는 원본 이벤트 모델, 표준 이벤트 모델, IE 이벤트 모델, Netscape4 이벤트 모델 등 4가지 이벤트 모델이 있습니다. 이에 대해서는 아래에서 자세히 소개하겠습니다.

1. 현재 이벤트 처리 모델은 원본 이벤트 모델, 표준 이벤트 모델, IE 이벤트 모델, Netscape4 이벤트 모델 등 4가지가 있지만 기본적으로 무시할 수 있습니다

2. 이벤트 처리 모델은 기본으로 나눌 수 있습니다. 이벤트 처리에는 두 가지 유형이 있습니다. 원래 이벤트 모델은 기본 이벤트 처리에 속하며, 표준 이벤트 모델과 IE 이벤트 모델은 고급 이벤트 처리에 속합니다.

1. 기본 이벤트 처리:

기본 이벤트 처리. 주로 원래 이벤트 모델 이벤트 처리의 구현을 나타냅니다. 주로 다음 두 가지 유형으로 나뉩니다.

(1)

……

, onmouseover는 단지 대표일 뿐이며 다른 많은 이벤트도 포함합니다. 이 방법에서 JS 코드 문자열은 onmouseover 및 기타 이벤트 처리 함수에 할당되며 시스템은 이러한 코드 문자열을 익명 함수로 자동 래핑합니다. 태그 요소를 가리키는 this 키워드와 이벤트가 발생할 때 이벤트 객체를 나타내는 event 키워드(표준 브라우저에서 사용됨)가 있을 수 있습니다.

...

실제로 onmouseover를 함수로 간주할 수 있으며 값을 할당하기 전에는 비어 있습니다. 기능. . 여기에 js 코드를 할당한 후 빈 함수에 코드를 추가하는 것과 같습니다. onmouseover 등은 실제로 함수이기 때문에 element.onmouseover()와 같이 명시적으로 호출할 수 있지만 이로 인해 mouseover 이벤트가 실제로 발생하지는 않습니다.

이벤트 함수(예: onmouseover 등)에 false를 반환하여 기본 동작이 발생하도록 할 수 있습니다.

함수는 정의된 범위 내에서 실행되므로 이벤트 처리 함수에 js 코드를 할당하면 이 HTML 태그 환경에서 함수를 정의하는 것과 같습니다. 이 환경은 매우 특별하며 상위 수준입니다. 역할 도메인은 창 전역 개체 환경이 아닙니다. 둘 사이에 하나 이상의 범위 환경이 있습니다. <script>에 정의된 함수의 경우 상위 범위 환경은 창입니다(물론 중첩된 함수는 또 다른 문제입니다). 따라서 HTML 태그에서는 <script>에 정의된 함수에 코드를 넣은 후 이 함수 호출을 이벤트 함수, 즉 <p onmouseover="function();">에 할당하는 것이 가장 좋습니다. ...</script>

(2), javascript 속성으로 이벤트 처리 예: element.onmouseover=function(){...}

이런 방식으로 더 이상 js를 할당할 수 없습니다. 코드 문자열을 이벤트 처리 함수에 추가하되 함수 호출이 아닌 함수를 직접 할당하거나 element.onmouseover=function(){… } 또는 element.onmouseover=f와 같은 익명 함수를 할당합니다. 함수이며 여기에 추가할 수 없습니다. 대괄호

기본 이벤트 처리도 버블링의 형태로 위쪽으로 전파됩니다.

2. 고급 이벤트 처리:

고급 이벤트 처리는 표준 이벤트 모델에 의해 구현된 이벤트 처리만을 나타냅니다. IE 이벤트 모델.

【개념적 이해】 이벤트 전파는 두 가지 유형으로 나눌 수 있습니다. 하나는 캡처 전파이고 다른 하나는 버블링 전파입니다.

캡처 전파: 즉, 이벤트가 외부에서 내부로 전송되고 각 레벨에서 이벤트가 발생합니다.

버블 전파, 즉 이벤트가 내부에서 외부로 전송되고 각 레벨에서 이벤트가 발생합니다. 모든 이벤트가 발생하는 것은 아닙니다. Bubble

(1) 표준 이벤트 모델

표준 이벤트 모델은 버블링 전파와 캡처 전파가 모두 발생할 수 있습니다.

【이벤트 등록 함수】

addEventListener() 이 메소드는 세 개의 매개변수를 가지고 있습니다. 두 번째 매개변수는 접두사가 없습니다. 처리 함수(물론 익명 함수일 수도 있음) 이벤트가 발생하면 시스템은 자동으로 함수의 첫 번째 매개변수에 Event 객체를 전달합니다. 마지막 매개변수는 불리언 값입니다. true이면 이벤트 캡처 및 전파 단계에서만 사용됩니다. false이면 이벤트 버블링 전파 단계에서만 사용됩니다.

예: element.addEventListener("click ”,f,false) //f가 함수인 경우

f 함수는 다음과 같이 정의할 수 있습니다. function f(e){...} //여기에 포함된 매개변수는 이벤트 발생 시 이벤트 객체

고급 이벤트 처리의 한 부분으로, 동일한 요소에 대해 여러 개의 이벤트 처리 함수를 등록할 수 있다는 점이 큰 장점이지만, 일반적으로 이러한 이벤트 함수가 실행되는 순서는 정할 수 없습니다. 중복된 이벤트 기능이 등록된 경우 첫 번째 기능만 실행됩니다.

removeEventListener() 이 메서드는 이벤트 등록을 취소하는 데 사용됩니다. 해당 세 가지 매개 변수는 addEventListener()와 동일합니다.

(2) IE 이벤트 모델

IE 이벤트 모델은 이벤트 버블링 전파만 지원합니다.

【이벤트 등록 기능】

attactthEvent() 이 메소드에는 2개의 매개변수만 있습니다. 하나는 이벤트 이름, 접두어 on, 두 번째는 이벤트 처리 기능입니다. 예를 들어, element.attachEvent("onclick",f)

IE 이벤트 모델의 Event 객체는 이벤트 발생 시 이벤트 처리 함수에 매개변수로 전달되지 않습니다. 해당 이벤트가 발생한 경우에만 사용됩니다.

그래서 f 함수는 다음과 같이 정의할 수 있습니다: function f(){var e=window.event;...} //여기서 e는 이벤트 객체를 얻습니다

detachEvent() 이 메서드는 이벤트 등록을 취소하는 데 사용됩니다. 그리고 매개변수는 attachmentthEvent()와 동일합니다. 동일

addEventListener()와 attachmentthEvent()의 중요한 차이점은 AttachthEvent()에 의해 등록된 이벤트 처리 함수의 this 키워드는 항상 창 객체를 가리키는 반면, addEventListener()에 의해 등록된 이벤트 처리 함수는 이벤트의 Event 객체의 요소(3), IE 및 표준 이벤트 모델입니다. altKey

true는 ALT 키를 눌렀음을 의미하고, false는

altKeyctrlKey가 없음을 의미합니다. clientXscreenX이벤트가 발생하면 마우스cancelBubble이 메소드를 호출하면 이벤트가 계속 버블링되는 것을 방지할 수 있습니다. returnValue이벤트의 기본 동작을 방지하려면 이 메서드를 호출하세요관련글 : 사용 요약 JS의 세 가지 로딩 방법

true는 ALT 키를 눌렀음을 의미합니다. false는	ctrlKey	true는	true는
shiftKey	true는 SHIFT 키를 눌렀을 때 false는 마우스 이벤트가 없음을 의미합니다. 0은 마우스 버튼을 누르지 않은 상태, 1은 왼쪽 버튼을 누른 상태, 2는 오른쪽 버튼을 누른 상태, 4는 가운데 버튼을 누른 상태, 3은 왼쪽과 오른쪽 버튼을 동시에 누른 상태를 의미합니다. 시간, 5는 왼쪽 버튼과 가운데 버튼을 누른다는 뜻, 6은 오른쪽과 가운데 버튼을 누른다는 뜻, 7은 왼쪽 버튼, 가운데 버튼, 오른쪽 버튼을 누른다는 의미다. , 1은 가운데 버튼, 2는 오른쪽 버튼	clientX	이벤트 발생 시 마우스가 브라우징 중입니다. 브라우저 창의 X 좌표(툴바, 스크롤바 등 제외)
이벤트 발생 시 브라우저 창에서 마우스의 X좌표(툴바, 스크롤바 등 제외)	clientY	상동	clientY
동일 위와 같이	screen		이벤트 이름(클릭 등)
type	이벤트 이름( 클릭 등)		srcElement	이벤트를 발생시키는 요소	target	이벤트를 발생시키는 요소
keyCode	keypress 이벤트의 경우 버튼의 유니코드 문자를 나타냅니다. keydown 및 keyup 이벤트에서 이는 버튼의 번호를 나타냅니다. Code	charCode	는 키의 유니코드 문자를 나타냅니다. 키
		값이 true이면 이벤트가 계속해서 버블링되는 것을 방지합니다.	stopPropagation
		cancelBubble	true는 이벤트가 버블링되었음을 의미합니다. 버블이 취소되었음을 의미하고, false는
		값이 false인 경우 , 이벤트의 기본 동작이 방지됩니다	preventDefault()
	오프셋 요소가 동적으로 배치되지 않은 경우 X 좌표는 동적으로 배치된 가장 가까운 상위 요소를 기준으로 하는 마우스는 이벤트를 트리거한 요소로 반환되며 상위 요소 테두리의 왼쪽 상단을 원점으로 합니다. 이벤트를 트리거하는 요소가 동적 위치 지정으로 설정된 경우 이벤트를 트리거한 요소를 기준으로 한 마우스의 X 좌표가 반환되며 요소 경계의 왼쪽 상단을 원점으로 합니다.		위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.
JSON 사용법		js html(), text() 메소드를 통해 p 태그의 표시값을 얻어와 설정

위 내용은 js를 사용하여 이벤트 처리 모델 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!