기능 이벤트 요약-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

기능 이벤트 요약

jacklove

May 21, 2018 pm 03:42 PM

js이벤트기능

함수를 학습하다 보면 많은 함수 이벤트를 접하게 됩니다. 이 글에서는 이에 대해 자세히 설명하겠습니다.

이벤트란 무엇인가요?

JavaScript와 HTML 간의 상호 작용은 이벤트를 통해 이루어집니다. 이벤트는 문서나 브라우저 창에서 발생하는 특정 상호 작용 순간입니다. 이벤트가 발생할 때 적절한 코드가 실행되도록 리스너(또는 핸들러)를 사용하여 이벤트를 예약할 수 있습니다. 전통적인 소프트웨어 엔지니어링에서 관찰자 패턴으로 알려진 이 모델은 페이지 동작(JavaScript)과 페이지 모양(HTML 및 CSS) 간의 느슨한 결합을 지원합니다.

이벤트 흐름

이벤트 흐름은 페이지에서 이벤트가 수신되는 순서를 설명합니다. 다음 코드를 가정해 보세요.

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body>
    <div id="div1"></div></body></html>

div를 클릭하세요. 이 클릭은 div에서만 발생하는 것이 아니라 해당 상위 컨테이너 본문도 클릭됩니다. 그렇다면 누가 먼저 클릭을 했고, 이벤트가 어떻게 확산됐을까요? 이벤트 스트림은 이러한 이벤트 수신 순서를 설명합니다.

IE 이벤트 흐름(이벤트 버블링)

IE 이벤트 흐름은 이벤트 버블링이라고도 합니다. 즉, 이벤트는 처음에 가장 구체적인 요소(문서에서 가장 깊은 중첩 레이어가 있는 노드)에 의해 수신된 다음 다음으로 전파됩니다. 덜 구체적인 요소를 단계별로 구체적인 노드(문서)로 만듭니다.
위 코드를 예로 들면, div 요소를 클릭하면 다음과 같은 순서로 클릭 이벤트가 전파됩니다.

1.<div>
2.<body>
3.<html>
4.document

즉, 클릭 이벤트는 div 요소에서 먼저 발생하고, 요소는 우리가 클릭한 요소이며, 클릭 이벤트는 DOM 트리 위로 전파되어 문서 객체로 전파될 때까지 노드의 각 수준에서 발생합니다.

모든 최신 브라우저는 이벤트 버블링을 지원하지만 몇 가지 차이점이 있습니다. IE5.5 및 이전 버전의 이벤트 버블링은 html 요소를 건너뛰고 본문에서 문서로 직접 이동합니다. IE9, Firefox, Chrome 및 Safari는 이벤트를 창 개체까지 버블링합니다. (기존 IE 브라우저는 이벤트 버블링만 지원합니다.)

이벤트 캡처

이벤트 캡처의 개념은 덜 구체적인 노드가 이벤트를 더 일찍 수신하고 특정 노드가 마지막에 이벤트를 수신해야 한다는 것입니다. 이는 이벤트 버블링의 정반대입니다. 위의 예를 다시 살펴보면 div를 클릭합니다. , 이벤트 캡처의 이벤트 트리거 순서는 다음과 같습니다.

1.document
2.<html>
3.<body>
4.<div>

이벤트 캡처 프로세스 중에 문서 객체는 먼저 클릭 이벤트를 수신한 다음 이벤트가 실제 대상에 도달할 때까지 DOM 트리를 따라 아래쪽으로 전파됩니다. 이벤트.

IE9, Firefox, Chrome, Safari 및 Opera는 모두 이벤트 캡처를 지원합니다. DOM2 수준 이벤트 사양에서는 이벤트가 문서 개체에서 전파되기 시작해야 한다고 요구하지만 이러한 브라우저는 창 개체에서 이벤트 캡처를 시작합니다.

DOM 이벤트 흐름

DOM 레벨 2 이벤트에 지정된 이벤트 흐름에는 이벤트 캡처 단계, 대상 단계 및 이벤트 버블링 단계의 세 단계가 포함됩니다. 가장 먼저 일어나는 일은 이벤트 캡처로, 이벤트를 가로챌 수 있는 기회를 제공합니다. 그런 다음 실제 대상이 이벤트를 수신합니다. 마지막 단계는 이벤트에 응답할 수 있는 버블링 단계입니다.

DOM 이벤트 흐름에서 실제 대상은 캡처 단계 동안 이벤트를 수신하지 않습니다. 이는 캡처 단계 동안 문서에서 HTML, 본문까지의 이벤트가 중지됨을 의미합니다. 다음 단계는 대상 단계에 있으므로 이벤트는 div에서 발생하고 이벤트 처리에서 버블링 단계의 일부로 간주됩니다. 그런 다음 버블링 단계가 발생하고 이벤트가 문서로 다시 전달됩니다.
그러나 실제로 IE9, Firefox, Chrome, Safari 및 Opera9.5 이상에서는 캡처 단계 중에 이벤트 개체에서 이벤트를 트리거합니다. 결과적으로 대상 개체에 대한 이벤트를 조작할 수 있는 기회가 두 번 있습니다. (IE8 이하 버전은 DOM 이벤트 스트리밍을 지원하지 않습니다.)

이벤트 핸들러

이벤트는 사용자나 브라우저 자체가 수행하는 작업입니다. 클릭, 로드, 마우스 오버 등은 모두 이벤트 이름입니다. 이벤트에 응답하는 함수를 이벤트 핸들러(이벤트 리스너)라고 합니다. 이벤트 핸들러의 이름은 "on"으로 시작하므로 클릭 이벤트에 대한 이벤트 핸들러는 onclick이고 로드 이벤트에 대한 핸들러는 onload입니다. 이벤트 처리기를 지정하는 방법에는 여러 가지가 있습니다.

HTML 이벤트 핸들러

요소가 지원하는 각 이벤트는 해당 이벤트 핸들러와 동일한 이름을 가진 HTML 속성을 사용하여 지정할 수 있습니다. 이 속성의 값은 실행될 수 있는 JavaScript 코드여야 합니다. 예:

<button id="myButton" onclick="alert(&#39;Clicked&#39;)">Click Me</button>//定义了一个按钮，点击时会显示一个警告框；

HTML에서 이벤트 핸들러를 정의하면 수행할 특정 작업이 포함될 수 있거나 페이지의 다른 곳에 정의된 스크립트를 호출할 수 있습니다. 예:

<button id="myButton" onclick="showMsg()">Click Me</button>  //点击按钮就会调用showMsg()函数；<script>
    function showMsg() {
      alert(&#39;Hello world!&#39;)
}</script>

HTML을 통해 이벤트 핸들러를 지정하면 두 가지 단점이 있습니다. 1. HTML 요소가 페이지에 나타나자마자 사용자가 해당 이벤트를 트리거할 수 있지만 이때 이벤트 핸들러에는 실행 조건이 없을 수 있기 때문에 시간 차이 문제가 있습니다. 2. HTML 및 JavaScript 코드는 Coupling과 밀접하게 관련되어 있으며, 이벤트 핸들러를 변경하려면 HTML 코드와 JavaScript 코드를 변경해야 합니다.

DOM 레벨 0 이벤트 핸들러

JavaScript를 통해 이벤트 핸들러를 지정하는 전통적인 방법은 이벤트 핸들러 속성에 함수를 할당하는 것입니다. 각 요소에는 자체 이벤트 핸들러 속성이 있으며, 이는 일반적으로 onclick과 같이 모두 소문자입니다. 이 속성의 값을 함수로 설정하면 이벤트 핸들러를 지정할 수 있습니다. 예:

 var btn = document.getElementById(&#39;myButton&#39;);
  btn.onclick = function() {
    alert("Clicked")
  }

使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此，这时候事件处理程序是在元素的作用域中运行；换句话说，程序中的this引用当前元素。
也可以通过DOM0级方法删除事件处理程序，示例：

btn.onclick = null;   //删除事件处理程序；
DOM2级事件处理程序

DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点都包含这两个方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后的布尔值如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。示例：

 var btn = document.getElementById(&#39;myButton&#39;);  //为按钮添加了click事件和处理程序；
  btn.addEventListener(&#39;click&#39;,function() {
    alert(this.id)
  }，false)

与DOM0级方法一样，这里添加的事件处理程序也是在其依附的元素的作用域中运行的。使用DOM2级方法添加事件处理程序可以添加多个事件处理程序，示例：

 var btn = document.getElementById(&#39;myButton&#39;);  //为按钮添加了多个click事件和处理程序；
  btn.addEventListener(&#39;click&#39;,function() {
    alert(this.id);
  }，false);  var btn = document.getElementById(&#39;myButton&#39;);  ；
  btn.addEventListener(&#39;click&#39;,function() {
    alert(&#39;hello world!&#39;);
  }，false);

这里为按钮添加了2个事件处理程序。这两个事件处理程序会按照添加它们的顺序触发。
通过addEventListener()添加的事件处理程序只能用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同，意味着addEventListener()添加的匿名函数无法移除：

//该代码无法运行；btn.removeEventListener(&#39;click&#39;,function() {
  alert(this.id);
}，false);
//该代码工作正常；//removeEventListener()和addEventListener()使用了相同函数；var btn = document.getElementById(&#39;myButton&#39;); 
  var function handler() {
    alert(this.id);
  }
btn.addEventListener(&#39;click&#39;,handler,false);
btn.removeEventListener(&#39;click&#39;,handler,false);

本篇对js事件进行了总结，更多相关内容请关注php中文网。

관련 기사

事件 ID 4660：已删除对象 [修复]Jul 03, 2023 am 08:13 AM

我们的一些读者遇到了事件ID4660。他们通常不确定该怎么做，所以我们在本指南中解释。删除对象时通常会记录事件ID4660，因此我们还将探索一些实用的方法在您的计算机上修复它。什么是事件ID4660？事件ID4660与活动目录中的对象相关，将由以下任一因素触发：对象删除–每当从ActiveDirectory中删除对象时，都会记录事件ID为4660的安全事件。手动更改–当用户或管理员手动更改对象的权限时，可能会生成事件ID4660。更改权限设置、修改访问级别或添加或删除人员或组时，可能会发生这种情

在iPhone锁屏上获取即将到来的日历事件Dec 01, 2023 pm 02:21 PM

在运行iOS16或更高版本的iPhone上，您可以直接在锁定屏幕上显示即将到来的日历事件。继续阅读以了解它是如何完成的。由于表盘复杂功能，许多AppleWatch用户习惯于能够看一眼手腕来查看下一个即将到来的日历事件。随着iOS16和锁定屏幕小部件的出现，您可以直接在iPhone上查看相同的日历事件信息，甚至无需解锁设备。日历锁定屏幕小组件有两种风格，允许您跟踪下一个即将发生的事件的时间，或使用更大的小组件来显示事件名称及其时间。若要开始添加小组件，请使用面容ID或触控ID解锁iPhone，长按

详解JavaScript函数如何实现可变参数？（总结分享）Aug 04, 2022 pm 02:35 PM

js是弱类型语言，不能像C#那样使用param关键字来声明形参是一个可变参数。那么js中，如何实现这种可变参数呢？下面本篇文章就来聊聊JavaScript函数可变参数的实现方法，希望对大家有所帮助！

在JavaScript中，"oninput"事件的用途是什么？Aug 26, 2023 pm 03:17 PM

当在输入框中添加值时，就会发生oninput事件。您可以尝试运行以下代码来了解如何在JavaScript中实现oninput事件-示例<!DOCTYPEhtml><html>  <body>   <p>Writebelow:</p>   <inputtype="text"

如何在PHP项目中实现日历功能和事件提醒？Nov 02, 2023 pm 12:48 PM

如何在PHP项目中实现日历功能和事件提醒？在开发Web应用程序时，日历功能和事件提醒是常见的需求之一。无论是个人日程管理、团队协作，还是在线活动安排，日历功能都可以提供便捷的时间管理和事务安排。在PHP项目中实现日历功能和事件提醒可以通过以下步骤来完成。数据库设计首先，需要设计数据库表来存储日历事件的相关信息。一个简单的设计可以包含以下字段：id：事件的唯一

jQuery中如何实现select元素的改变事件绑定Feb 23, 2024 pm 01:12 PM

jQuery是一个流行的JavaScript库，可以用来简化DOM操作、事件处理、动画效果等。在web开发中，经常会遇到需要对select元素进行改变事件绑定的情况。本文将介绍如何使用jQuery实现对select元素改变事件的绑定，并提供具体的代码示例。首先，我们需要使用标签来创建一个包含选项的下拉菜单：

Vue文档中的input框绑定事件详解Jun 21, 2023 am 08:12 AM

Vue.js是一种轻量级的JavaScript框架，具有易用、高效和灵活的特点，是目前广受欢迎的前端框架之一。在Vue.js中，input框绑定事件是一个十分常见的需求，本文将详细介绍Vue文档中的input框绑定事件。一、基础概念在Vue.js中，input框绑定事件指的是将输入框的值绑定到Vue实例的数据对象中，从而实现输入和响应的双向绑定。在Vue.j

jquery中常用的事件有哪些Jan 03, 2023 pm 06:13 PM

jquery中常用的事件有：1、window事件；2、鼠标事件，是当用户在文档上面移动或单击鼠标时而产生的事件，包括鼠标单击、移入事件、移出事件等；3、键盘事件，是用户每次按下或者释放键盘上的按键时都会产生事件，包括按下按键事件、释放按键按键等；4、表单事件，例如当元素获得焦点时会触发focus()事件，失去焦点时会触发blur()事件，表单提交时会触发submit()事件。

See all articles

핫 AI 도구

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

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

뜨거운 도구

SublimeText3 Mac 버전

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

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.