웹 프론트엔드 JS 튜토리얼 마우스 이벤트를 조작하는 Js 프로세스

마우스 이벤트를 조작하는 Js 프로세스

Nov 28, 2017 pm 02:48 PM
javascript 이벤트 프로세스

실제 프로젝트에서는 마우스 이벤트를 조작하기 위해 자바스크립트를 사용해야 하는 경우가 많습니다. 그래서 오늘은 JS로 마우스 이벤트를 조작하는 과정과 JS를 이용해 마우스 이벤트를 조작하는 방법을 자세히 알려드리겠습니다.

onmouseover 및 onmouseout은 한 번만 실행되고 onmousemove는 여러 번 실행됩니다.

Onmousedown도 클릭당 한 번만 실행되며 달리 계속 실행되지 않습니다. onkeydown과 onkeypress는 다릅니다. 이것은 마우스 이벤트가 무엇입니까? ? ?

Firefox에서는 정의되지 않은 것으로 표시됩니다

IE에서는 정의되지 않은 것으로 표시됩니다

하지만 Google에서는 위의 표시가 정상입니다. 이제 IE 및 Firefox와 호환되게 만들어야 합니다

여기서 질문이 있습니다. 별도의 콘솔에서 .log(window)에는 보이는 이벤트 속성이 정의되어 있지 않은데, console.log(window.event)에는 원하는 효과가 표시되는 이유는 무엇일까요?

여기서 선생님이 고생하시는데 왜 이런지 모르겠네요

위의 분석은 구글에서는 e, window.event 둘 다 지원되고, 파이어폭스는 e만 지원하고, 구글은만 지원한다는게 잘못된 내용입니다. window.event

동적 속성 생성에 참여하기 위해 전달됩니다

e.pageX 및 e.pageY 속성은 하위 버전의 IE에서 지원되지 않으므로(IE의 하위 버전에서는 표시됨) 시각적 개체의 마우스 위치 영역 + 스크롤 막대 컬 높이를 사용하여 콘텐츠 영역을 기반으로 마우스 위치를 얻습니다.

문서가 창 위에 있습니다.

이벤트 캡처는 콘텐츠를 이해하기 위한 것입니다.

이벤트 처리 기능은 지원되지 않습니다. IE. 레벨 0 이벤트 이후의 이벤트는 이전 이벤트를 덮어쓰게 됩니다. 이것은 매우 중요합니다.

창을 생략할 수 있으며 위 코드는 의미가 없습니다.

버블링: 특정 노드에서 비특정 노드로

이제는 캡처를 나타냅니다. 이제 버블링과 동일합니다. 동일한

캡처: 불특정 노드에서 특정 노드까지

는 함수 실행 컨텍스트와 동일한 효과를 얻습니다. addEventListener()는 IE 브라우저

에서 지원되지 않습니다. 위는 DOM 레벨 0 이벤트를 언로드하는 방법입니다(언로드 이벤트, 인터페이스가 다시 새로고침되면 이벤트 처리 기능이 계속 실행됩니다)

사실 DOM 레벨 0 이벤트를 제거하는 것과 같은 효과가 있습니다

IE DOM 레벨 2 이벤트 추가

최신 버전의 IE인 IE11은 attachmentEvent 속성을 지원하지 않습니다

IE는 DOM 레벨 2 이벤트를 언로드합니다

다음은 캡슐화 기능입니다.

이러한 작성 방식은 다음에서 비어 있는 것으로 표시됩니다. IE

이러한 작성 방식은 IE가 아닌 경우 오류를 직접 보고합니다.

IE가 아닌 경우에는 함수로 표시되며 IE에서는 정의되지 않은 상태로 표시됩니다. 다음 함수 캡슐화는 이 원칙을 기반으로 합니다.

이벤트 캡처는 거의 사용되지 않으므로 네 번째 값은 대개 false입니다. 별도의 매개 변수를 전달할 필요가 없으며 직접 작성하면 됩니다.

제거 시 이벤트 처리 기능에서는 사용할 수 없습니다.

익명 기능

주의하세요. IE 버전의 실행 순서

DOMContentLoaded 이제 내용을 이해하고 개념에 주목해야 합니다: 이벤트 처리 기능


이 사례를 읽으신 후 마스터하셨을 거라 믿습니다. 더 흥미로운 방법을 원하시면 결제하세요. PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!

관련 읽기:

DIV에 적응형 높이를 만드는 방법

CSS를 사용하여 이미지 배경의 텍스트 내용을 숨기는 방법

프런트 엔드 프로젝트를 시작하기 전에 CSS를 초기화해야 하는 필요성

위 내용은 마우스 이벤트를 조작하는 Js 프로세스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

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

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 Dec 17, 2023 pm 02:54 PM

WebSocket 및 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 소개: 지속적인 기술 개발로 음성 인식 기술은 인공 지능 분야의 중요한 부분이 되었습니다. WebSocket과 JavaScript를 기반으로 한 온라인 음성 인식 시스템은 낮은 대기 시간, 실시간, 크로스 플랫폼이라는 특징을 갖고 있으며 널리 사용되는 솔루션이 되었습니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법을 소개합니다.

WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 Dec 17, 2023 pm 05:30 PM

WebSocket과 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술

여러 개의 Toutiao 계좌를 개설하는 방법은 무엇입니까? Toutiao 계정을 신청하는 절차는 무엇입니까? 여러 개의 Toutiao 계좌를 개설하는 방법은 무엇입니까? Toutiao 계정을 신청하는 절차는 무엇입니까? Mar 22, 2024 am 11:00 AM

모바일 인터넷의 인기로 인해 Toutiao는 우리나라에서 가장 인기 있는 뉴스 정보 플랫폼 중 하나가 되었습니다. 많은 사용자는 다양한 요구 사항을 충족하기 위해 Toutiao 플랫폼에 여러 계정을 갖고 싶어합니다. 그렇다면 여러 개의 Toutiao 계정을 개설하는 방법은 무엇입니까? 이번 글에서는 터우탸오(Toutiao) 계좌를 여러 개 개설하는 방법과 신청 과정을 자세히 소개하겠습니다. 1. Toutiao 계정을 여러 개 개설하는 방법은 무엇입니까? 여러 개의 Toutiao 계정을 개설하는 방법은 다음과 같습니다. Toutiao 플랫폼에서 사용자는 다양한 휴대폰 번호를 통해 계정을 등록할 수 있습니다. 각 휴대폰 번호는 하나의 Toutiao 계정만 등록할 수 있습니다. 즉, 사용자는 여러 휴대폰 번호를 사용하여 여러 계정을 등록할 수 있습니다. 2. 이메일 등록: 다른 이메일 주소를 사용하여 Toutiao 계정을 등록하세요. 휴대폰 번호 등록과 마찬가지로 각 이메일 주소도 Toutiao 계정을 등록할 수 있습니다. 3. 타사 계정으로 로그인

Douyin 수면 앵커가 되는 것이 수익성이 있습니까? 수면 라이브 스트리밍의 구체적인 절차는 무엇입니까? Douyin 수면 앵커가 되는 것이 수익성이 있습니까? 수면 라이브 스트리밍의 구체적인 절차는 무엇입니까? Mar 21, 2024 pm 04:41 PM

오늘날 빠르게 변화하는 사회에서 수면의 질 문제는 점점 더 많은 사람들을 괴롭히고 있습니다. 사용자의 수면 품질을 향상시키기 위해 Douyin 플랫폼에 특수 수면 앵커 그룹이 등장했습니다. 라이브 방송을 통해 사용자와 소통하고, 수면 팁을 공유하며, 편안한 음악과 사운드를 제공하여 시청자가 편안하게 잠들 수 있도록 도와줍니다. 그렇다면 이러한 수면 앵커는 수익성이 있습니까? 이 기사에서는 이 문제에 중점을 둘 것입니다. 1. Douyin 수면 앵커는 수익성이 있습니까? Douyin 수면 앵커는 실제로 특정 이익을 얻을 수 있습니다. 첫째, 생방송실 내 팁 기능을 통해 선물과 양도를 받을 수 있으며, 이러한 혜택은 팬 수와 시청자 만족도에 따라 달라집니다. 둘째, Douyin 플랫폼은 생방송의 조회수, 좋아요, 공유 및 기타 데이터를 기반으로 앵커에게 특정 공유를 제공합니다. 일부 수면 앵커는 또한

JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축 JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축 Dec 17, 2023 pm 05:13 PM

JavaScript 및 WebSocket: 효율적인 실시간 일기 예보 시스템 구축 소개: 오늘날 일기 예보의 정확성은 일상 생활과 의사 결정에 매우 중요합니다. 기술이 발전함에 따라 우리는 날씨 데이터를 실시간으로 획득함으로써 보다 정확하고 신뢰할 수 있는 일기예보를 제공할 수 있습니다. 이 기사에서는 JavaScript 및 WebSocket 기술을 사용하여 효율적인 실시간 일기 예보 시스템을 구축하는 방법을 알아봅니다. 이 문서에서는 특정 코드 예제를 통해 구현 프로세스를 보여줍니다. 우리

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

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

jQuery에서 선택 요소의 변경 이벤트 바인딩을 구현하는 방법 jQuery에서 선택 요소의 변경 이벤트 바인딩을 구현하는 방법 Feb 23, 2024 pm 01:12 PM

jQuery는 DOM 조작, 이벤트 처리, 애니메이션 효과 등을 단순화하는 데 사용할 수 있는 인기 있는 JavaScript 라이브러리입니다. 웹 개발에서 우리는 선택 요소에 대한 이벤트 바인딩을 변경해야 하는 상황에 자주 직면합니다. 이 기사에서는 jQuery를 사용하여 선택 요소 변경 이벤트를 바인딩하는 방법을 소개하고 특정 코드 예제를 제공합니다. 먼저 라벨을 사용하여 옵션이 포함된 드롭다운 메뉴를 만들어야 합니다.

JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법 JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법 Jan 05, 2024 pm 01:37 PM

JavaScript에서 HTTP 상태 코드를 얻는 방법 소개: 프런트 엔드 개발에서 우리는 종종 백엔드 인터페이스와의 상호 작용을 처리해야 하며 HTTP 상태 코드는 매우 중요한 부분입니다. HTTP 상태 코드를 이해하고 얻는 것은 인터페이스에서 반환된 데이터를 더 잘 처리하는 데 도움이 됩니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. HTTP 상태 코드란 무엇입니까? HTTP 상태 코드는 브라우저가 서버에 요청을 시작할 때 서비스가

See all articles