자바스크립트 이벤트

前言：原本这篇文章是打算6号书写出来的，但是基于某些私人原因，希望能够通过这篇文章尽可能的将事件讲解的更加详细和通俗易懂，因此，多花了一天时间，不多说了，接下来对“事件”来一个较为详细的介绍。
欢迎大家互相学习交流。独行冰海
需要了解事件的什么？
对于事件来讲，首先，我们需要了解这样几个概念：事件；事件处理程序；事件类型；事件流；事件冒泡；事件捕获；事件对象；事件方面的性能优化（事件委托、移除事件处理程序）；常见的浏览器兼容问题。
事件的概念
事件：指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器（或者处理程序）来预定事件，以便事件发生的时候执行相应的代码。
事件处理程序
事件处理程序：我们用户在页面中进行的点击这个动作，鼠标移动的动作，网页页面加载完成的动作等，都可以称之为事件名称，即：click、mousemove、load等都是事件的名称。响应某个事件的函数则称为事件处理程序，或者叫做事件侦听器。
接下来我们用一段代码来再说明一下上面这两个抽象的概念，具体解释见代码注释：



   
   


   

理解事件的基本概念

<script><br> var main = document.getElementById('main');<br> // 여기를 클릭하면 클릭이 발생한 순간의 이벤트 이름이 됩니다. 브라우저 창에서. on이라는 단어는 실제로 클릭 이벤트가 응답하도록 허용합니다. 따라서 onclick을 이벤트 핸들러라고 합니다. 다음 코드에서는 핸들러(onclick)를 통해 기본 요소에 대한 클릭을 예약하여 클릭이 발생하면 함수의 코드가 실행됩니다(대화 상자 팝업). <br> main.onclick = function(){<br> Alert('여기를 클릭했습니다!');<br> }<br></script>

이벤트 핸들러 정보 초기 개발부터 현재까지 여러 가지 변화를 겪었습니다.
이벤트 핸들러 이름이 "on"으로 시작하므로 클릭 이벤트 핸들러는 onclick입니다. 처음에는 HTML 이벤트 핸들러가 사용되었습니다. 즉, 요소(예: div)가 지원하는 각 이벤트는 해당 이벤트 핸들러(즉, 태그의 속성)와 동일한 이름을 가진 HTML 속성을 사용하여 지정할 수 있었습니다. 에서 이 속성의 값은 실행될 수 있는 JavaScript 코드입니다. 예:







 

HTML 이벤트 핸들러

< ;/body>

물론 onclick=""에서 함수를 호출할 수도 있습니다.
그러나 어떤 방법을 사용하든 HTML 이벤트 핸들러의 많은 문제점이 노출됩니다.
우선 업데이트할 때 HTML 코드 도메인과 JavaScript 코드가 긴밀하게 결합되어 서로 분리되지 않습니다. 코드를 유지하는 것도 그 당시에는 굉장히 어려운 일 같았어요.
둘째, 이벤트 핸들러의 범위 체인을 확장하면 브라우저마다 결과가 달라집니다.
셋째, 함수를 호출하는 방식을 사용하지 않고 예시처럼 직접 코드를 작성하게 되면 코드의 범용성이 떨어지게 되어 사이트 전체의 코드가 커지고 범용성이 떨어지게 됩니다. 이를 추출하여 함수에 저장하면 또 다른 문제에 직면하게 됩니다. 함수가 정의되지 않았지만 HTML 및 CSS 코드가 로드되어 사용자가 클릭하면 전혀 응답이 없는 경우입니다.

위 문제를 토대로 사람들은 점차 이벤트 핸들러를 개선해 나갔고 이때 DOM0 수준의 이벤트 핸들러가 등장했습니다. (4세대 WEB 브라우저에 등장)
DOM 레벨 0 이벤트 핸들러는 어떤 모습인가요? 실제로 이는 다음 예와 같이 가장 일반적으로 사용되는 이벤트 바인딩입니다.

DOM 레벨 0 이벤트 핸들러

<script><br> var btn = document.getElementById('btn');<br> btn.onclick = function( ) {<br> Alert(this.innerHTML);<br> }<br></script>

DOM0 레벨 이벤트 핸들러 출시 이후 널리 사용되었습니다. 그러나 동일한 유형의 여러 이벤트를 동일한 요소/라벨에 바인딩하려는 경우(예: 위의 p 태그에 3개의 클릭 이벤트 바인딩) 허용되지 않습니다. 그러다가 이때 또 다른 유형의 이벤트 핸들러인 DOM2 레벨 이벤트 핸들러가 등장했습니다. DOM2 레벨에는 이벤트 핸들러를 지정(바인딩)하는 작업과 삭제하는 작업을 각각 처리하는 두 가지 기본 메소드가 정의되어 있습니다. ) 및 RemoveEventListener(), IE9+, FireFox, Safari, Chrome 및 Opera는 모두 DOM2 수준 이벤트 핸들러를 지원합니다. IE8-의 경우 IE의 독점 이벤트 핸들러인 두 가지 유사한 메소드(attachEvent() 및 detachEvent())가 사용됩니다.
구체적인 예시 코드는 다음과 같습니다. (addEventListener를 예로 들어 작성 방법 2가지 제공)



Meta charset="UTF-8">

DOM 레벨 0 이벤트 핸들러

<script><br> var btn = document.getElementById('btn');<br> btn. addEventListener("click", test, false);<br>    function test(){<br>        alert(this.innerHTML);<br>    }<br></script>




   
   


   

DOM0级事件处理程序

<script><br>    var btn = document.getElementById('btn');<br>    btn.addEventListener("click", function(){<br>        alert(this.innerHTML);        <br>    }, false);<br></script>

addEventListener()和removeEventListener()中的第三个参数，表示的是在哪个事件阶段进行事件处理，如果是false，则指的是冒泡阶段；如果是true，则指的是捕获阶段。
在事件方面，IE与FF存在着一系列的兼容问题，具体问题可查看博文《IE浏览器与FF火狐浏览器在事件上的兼容问题》
关于如何创建一个兼容全部浏览器的事件侦听器，我们在下一篇博文《跨浏览器的事件处理函数——处理DOM2级事件兼容 》当中再做详细的介绍和代码示范。
事件类型
之前在课程的讲解当中，我们把事件分为了三大类，分别是一般事件、表单事件和页面事件。当前我们可以再做细分：
UI事件：如load、unload、error、resize、scroll、select、DOMActive，是用户与页面上的元素交互时触发的。
焦点事件：如blur、DOMFocusIn、DOMFocusOut、focus、focusin、focusout，在元素获得或失去焦点的时候触发，这些事件当中，最为重要的是blur和focus，有一点需要引起注意，这一类事件不会发生冒泡！
鼠标与滚轮事件：如click、dblclick、mousedown、mouseenter、mouseleave、mousemove、mouseout、mouseover、mouseup，是当用户通过鼠标在页面执行操作时所触发的。
滚轮事件：mousewheel（IE6+均支持）、DOMMouseScroll（FF支持的，与mousewheel效果一样）。是使用鼠标滚轮时触发的。
文本事件：textInput，在文档中输入文本触发。
键盘事件：keydown、keyup、keypress，当用户通过键盘在页面中执行操作时触发。
合成事件：DOM3级新增，用于处理IME的输入序列。所谓IME，指的是输入法编辑器，可以让用户输入在物理键盘上找不到的字符。compositionstart、compositionupdate、compositionend三种事件。
变动事件：DOMsubtreeModified、DOMNodeInserted、DOMNodeRemoved、DOMAttrModified、DOMCharacterDataModified等，当底层DOM结构发生变化时触发。IE8-不支持。
变动名称事件：指的是当元素或者属性名变动时触发，当前已经弃用！
对于事件的基本类型，随着HTML5的出现和发展，又新增了HTML5事件、设备事件、触摸事件、手势事件等各种事件，在后面我们再详细介绍。
事件流
事件流：描述的是从页面中接收事件的顺序。
IE与原来的NetScape(网景)，对于事件流提出的是完全不同的顺序。IE团队提出的是事件冒泡流；NetScape的事件流是事件捕获流。
事件冒泡
事件冒泡：表示的是，事件开始的时候由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。
事件捕获
事件捕获：表示的是，事件开始的时候由最不具体的节点接收，然后逐级向下传播到最具体的节点。
来看一个实例：



   
   


   

       

理解事件的基本概念

   

如果单击了p标签，那么，如果是事件冒泡流的事件流机制，则click事件将按照如下顺序进行执行：p —— div —— body —— html —— document。
如果采用捕获流的事件流机制，则click事件的执行顺序为：document —— html —— body —— div —— p
对于冒泡流的事件流机制，存在如下的兼容问题：
<=IE5.5 p -> div -> body -> document
>=IE6.0        p -> div -> body -> html ->　document
>=Mozilla 1.0    p -> div -> body -> html ->　document -> window
欢迎大家互相学习交流。独行冰海
事件对象
事件对象：在触发DOM上的某个事件的时候，会产生一个事件对象event，而在这个对象当中会包含着所有与事件有关的信息。我们书写如下基本代码：



   
   


   

理解事件的基本概念

<script><br>    var main = document.getElementById('main');<br>    main.onclick = function(event){<br>        console.log(event);<br>    }<br></script>

使用console.log打印出的结果如下图。
JavaScript事件 详细讲解 - 独行冰海 - 独行冰海

其中有两个信息，我们最为常用，分别是type和target。
type表示的是被触发事件的类型；
target表示的是事件的目标。
其他信息，如：
bubbles：表示事件是否冒泡
cancelable：表示是否可以取消事件的默认行为
currentTarget：表示事件处理程序当前正在处理事件的那个元素
defaultPrevented：表示是否调用了preventDefault()
detail：表示的是与事件相关的细节信息
eventPhase：调用事件处理处理程序的阶段：1表示捕获阶段、2表示处于目标、3表示冒泡阶段
在其中还有一些其他信息，在此就不再一一列举了。
事件方面性能优化
谈一谈事件方面如何优化性能——事件委托和事件处理程序的移除
在JavaScript代码当中，添加到页面中的事件越多，页面的性能也就越差。导致这一问题的原因主要有：
每个函数都是对象，都会占用内存。内存中对象越多，性能也就越差。
必须事先指定所有事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。
为了进行页面的性能优化，因此我们会采用两种方法，就是上面提到的——事件委托和事件处理程序的移除。
事件委托
很多人问我，什么时候使用事件委托，其实，简单来说，当时一个页面事件处理程序比较多的时候，我们通常情况下会使用它。
事件委托主要利用了事件冒泡，只指定一个事件处理程序，就可以管理一个类型的所有事件。例如：我们为整个一个页面制定一个onclick事件处理程序，此时我们不必为页面中每个可点击的元素单独设置事件处理程序（onclick）。还是，看一个例子。
效果：点击不同的元素执行不同的操作。
不使用事件委托：



   
   
   


   

        左
        1
        2
        3
        右
   

<script><br>    var left = document.getElementById('left');<br>    var first = document.getElementById('first');<br>    var second = document.getElementById('second');<br>    var third = document.getElementById('third');<br>    var right = document.getElementById('right');<br>    left.addEventListener("click", function(){<br>        alert('点击的是左这个字，执行相关操作');        <br>    }, false);<br>    first.addEventListener("click", function(){<br>        alert('要执行第一个序号对应的相关操作');        <br>    }, false);<br>    second.addEventListener("click", function(){<br>        alert('要执行第二个序号对应的相关操作');        <br>    }, false);<br>    third.addEventListener("click", function(){<br>        alert('要执行第三个序号对应的相关操作');        <br>    }, false);<br>    right.addEventListener("click", function(){<br>        alert('点击的是右这个字，执行相关操作');        <br>    }, false);<br></script>

不难看出，我们使用了5个事件侦听器，每设置一个就需要绑定一个。
使用事件委托：



   
   
   


   

        左
        1
        2
        3
        右
   

핫 AI 도구

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

더보기

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)

1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. 최고의 그래픽 설정

1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌

어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션

3 몇 주 전 By DDD

Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법

2 몇 주 전 By DDD

Will R.E.P.O. 크로스 플레이가 있습니까?

1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌

더보기

뜨거운 도구

메모장++7.3.1

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

SublimeText3 중국어 버전

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

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

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

더보기

뜨거운 주제

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

7562

15

Cakephp 튜토리얼

1384

52

Steam의 계정 이름 형식은 무엇입니까?

84

11

Win11 활성화 키 영구

60

19

NYT 연결 힌트와 답변

28

98

더보기

Related knowledge

Safari의 로컬 웹 페이지에서 맞춤형 스타일 시트가 적용되지만 Baidu 페이지에서는 그렇지 않은 이유는 무엇입니까? Apr 05, 2025 pm 05:15 PM

Safari에서 사용자 정의 스타일 시트 사용에 대한 토론 오늘 우리는 Safari 브라우저에 대한 사용자 정의 스타일 시트 적용에 대한 질문에 대해 논의 할 것입니다. 프론트 엔드 초보자 ...

CSS를 통해 크기 조정 기호를 사용자 정의하고 배경색으로 균일하게 만드는 방법은 무엇입니까? Apr 05, 2025 pm 02:30 PM

CSS에서 크기 조정 기호를 사용자 정의하는 방법은 배경색으로 통합됩니다. 매일 개발에서, 우리는 종종 조정과 같은 사용자 인터페이스 세부 정보를 사용자 정의 해야하는 상황을 발생시킵니다.

웹 페이지에 로컬로 설치된 'Jingnan Mai Round Body'를 올바르게 표시하는 방법은 무엇입니까? Apr 05, 2025 pm 10:33 PM

최근 웹 페이지에 로컬로 설치된 글꼴 파일을 사용하여 인터넷에서 무료 글꼴을 다운로드하여 시스템에 성공적으로 설치했습니다. 지금...

JavaScript 또는 CSS를 통해 브라우저 인쇄 설정에서 페이지 상단 및 끝을 제어하는 ​​방법은 무엇입니까? Apr 05, 2025 pm 10:39 PM

브라우저의 인쇄 설정에서 페이지의 상단과 끝을 제어하기 위해 JavaScript 또는 CSS를 사용하는 방법. 브라우저의 인쇄 설정에는 디스플레이가 ...인지 제어 할 수있는 옵션이 있습니다.

웹 페이지에서 로컬로 설치된 글꼴 파일을 사용하는 방법은 무엇입니까? Apr 05, 2025 pm 10:57 PM

웹 페이지에서 로컬로 설치된 글꼴 파일을 사용하는 방법 웹 페이지 개발 에서이 상황이 발생 했습니까? 컴퓨터에 글꼴을 설치했습니다 ...

부정적인 마진이 어떤 경우에는 적용되지 않는 이유는 무엇입니까? 이 문제를 해결하는 방법? Apr 05, 2025 pm 10:18 PM

어떤 경우에는 부정적인 마진이 적용되지 않는 이유는 무엇입니까? 프로그래밍 중에 CSS의 부정적인 마진 (음수 ...

CSS 및 Flexbox를 사용하여 다른 화면 크기로 이미지와 텍스트의 반응 형 레이아웃을 구현하는 방법은 무엇입니까? Apr 05, 2025 pm 06:06 PM

웹 디자인, CSS에서 다른 화면 크기에서 레이아웃 변경을 구현할 때 CSS를 사용하여 반응 형 레이아웃 구현 ...

플렉스 레이아웃 아래의 텍스트는 생략되지만 컨테이너가 열려 있습니까? 그것을 해결하는 방법? Apr 05, 2025 pm 11:00 PM

Flex 레이아웃 및 솔루션에서 텍스트를 과도하게 누락하여 컨테이너 개구부 문제가 사용됩니다 ...

See all articles