요소에 이벤트를 추가하는 방법은 무엇입니까? JS 바인딩 이벤트를 구문 분석하는 세 가지 방법
javascript作为脚本语言, 可以为页面上的元素绑定事件，用于在指定事件发生时能自动调用相应的事件处理程序处理事件。那么怎么给元素添加事件？下面本篇文章给大家介绍一下JS绑定事件三种方式，希望对大家有所帮助！
为了使浏览器在事件发生时能自动调用相应的事件处理程序处理事件，需要对事件源绑定事件处理程序（绑定事件处理程序也叫注册事件处理程序）。
绑定事件处理程序有以下 3 种方式：
在 HTML 标签中，使用事件属性（例onclick）绑定事件处理程序。该方式通过设置标签的事件属性值为事件处理程序。这种方法现在不推荐使用， html 和 js 耦合, 不利于维护。
在 js 中，使用事件源的事件属性（例onclick）绑定事件处理函数。该方式通过设置事件源对象的事件属性值为事件处理函数。
在 js 中，使用
addEventListener()方法绑定事件和事件处理函数（IE9 之前的版本则使用 attach Event() 方法）。
1、使用HTML标签的事件属性绑定处理程序
需要注意的是，使用 HTML 标签的事件属性绑定事件处理程序的方式时，事件属性中的脚本代码不能包含函数声明，但可以是函数调用或一系列使用分号分隔的脚本代码。
【例 1】使用 HTML 标签的事件属性绑定事件处理程序。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用HTML标签的事件属性绑定事件处理程序</title>
</head>
<body>
<input type="button" onclick="var name='PHP中文网';alert(name);" value="事件绑定测试"/>
</body>
</html>上述代码的 button 为 click 事件的目标对象，其通过标签的事件属性 onclick 绑定了两条脚本代码进行事件的处理。上述代码在 Chrome 浏览器的运行后，当用户单击按钮时，将弹出警告对话框，结果如下图所示。
当事件处理程序涉及的代码在 2 条以上时，如果还像示例 1 那样绑定事件处理程序，会使程序的可读性变得很差。对此，可以将事件处理程序定义为一个函数，然后在事件属性中调用该函数。
【例 2】HTML 标签的事件属性为函数调用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML标签的事件属性为函数调用</title>
<script>
function printName(){
var name = "PHP中文网";
alert(name);
}
</script>
</head>
<body>
<input type="button" onClick="printName()" value="事件绑定测试"/>
</body>
</html>上述代码的执行结果和示例 1 完全相同。从上述两个示例可以看到，标签事件属性将 JS 脚本代码和 HTML 标签混合在一起，违反了 Web 标准的 JS 和 HTML 应分离的原则。所以，使用 HTML 标签的事件属性绑定事件处理程序不好，在实际应用时应尽量避免使用。
2、使用事件源的事件属性绑定处理程序
使 HTML 和 JS 分离的其中一种方式是通过使用事件源的事件属性绑定事件处理函数，绑定格式如下：
obj.on事件名 = 事件处理函数
格式中的 obj 为事件源对象。绑定的事件程序通常为一个匿名函数的定义语句，或者是一个函数名称。
事件源的事件属性绑定处理程序示例：
oBtn.onclick = function(){//oBtn为事件源对象，它的单击事件绑定了一个匿名函数定义
alert('hi')
};【例 3】使用事件源的事件属性绑定事件处理函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用事件源的事件属性绑定事件处理函数</title>
<script>
window.onload = function(){//窗口加载事件绑定了一个匿名函数
//定义一个名为fn的函数
function fn(){
alert('hello');
}
//获取事件源对象
var oBtn1 = document.getElementById("btn1");
var oBtn2 = document.getElementById("btn2");
//绑定一个匿名函数
oBtn1.onclick = function(){
alert("hi");
}
//绑定一个函数名
oBtn2.onclick = fn;
};
</script>
</head>
<body>
<input type="button" id="btn1" value="绑定一个匿名函数">
<input type="button" id="btn2" value="绑定一个函数名">
</body>
</html>上述 JS 代码中处理了 3 个事件：文档窗口加载事件 load、两个按钮的单击事件 click。这三个事件的处理都是使用事件源的事件属性绑定事件处理函数来实现的，其中 load 事件和第一个按钮的click事件绑定的是匿名函数，而第二个按钮的click事件绑定的是一个函数名。
需要特别注意的是，不能在 oBtn2 绑定的函数名后面加“()”，否则绑定的函数变为函数调用，这样就会在 JS 引擎执行到该行代码时自动调用执行，而在事件触发时却不会执行了。
在文档所有元素加载完成后会处理窗口加载事件函数，而单击每个按钮时将会触发单击事件。单击第一个和第二个按钮后，将分别弹出显示“hi”和“hello”两个警告对话框。
3、使用addEventListener()绑定处理程序
使用事件源对象的事件属性绑定事件处理程序方式虽然简单，但其存在一个不足之处：一个事件只能绑定一个处理程序，后面绑定的事件处理函数会覆盖前面绑定的事件处理函数。实际应用中，一个事件源的一个事件可能会用到多个函数来处理。
当一个事件源需要使用多个函数来处理时，可以通过事件源调用 addEventListener()（针对标准浏览器）来绑定事件处理函数以实现此需求。一个事件源通过方法绑定多个事件函数的实现方式是：对事件源对象调用多次 addEventListener()，其中每次的调用只绑定一个事件处理函数。
addEventListener() 是标准事件模型中的一个方法，对所有标准浏览器都有效。使用 addEvent Liste ner() 绑定事件处理程序的格式如下：
事件源.addEventListener(事件名称,事件处理函数名,是否捕获);
参数“事件名称”是一个不带“on”的事件名；参数“是否捕获”是一个布尔值，默认值为 false，取 false 时实现事件冒泡，取 true 时实现事件捕获。
通过多次调用 addEventListener() 可以为一个事件源对象的同一个事件类型绑定多个事件处理函数。当对象发生事件时，所有该事件绑定的事件处理函数就会按照绑定的顺序依次调用执行。另外，需要注意的是，addEventListener() 绑定的事件处理函数中的 this 指向事件源。
addEventListener() 绑定处理程序示例：
document.addEventListener('click',fn1,false);//click事件绑定fn1函数实现事件冒泡 document.addEventListener('click',fn2,true);//click事件绑定fn2函数实现事件捕获
【例 4】使用 addEventListener() 绑定事件函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用addEventListener()/attachEvent()绑定事件函数</title>
<script>
function fn1(){
alert("fn1()");
}
function fn2(){
alert("fn2()");
}
function bindTest(){
document.addEventListener('click',fn1,false);//首先绑定fn1函数
document.addEventListener('click',fn2,false);
}
bindTest();//调用函数
</script>
</head>
<body>
</body>
</html>上述代码在浏览器中运行后，当单击文档窗口时，会依次弹出显示“fn1()”和“fn2()”的警告对话框。
【推荐学习：javascript高级教程】
위 내용은 요소에 이벤트를 추가하는 방법은 무엇입니까? JS 바인딩 이벤트를 구문 분석하는 세 가지 방법의 상세 내용입니다. 자세한 내용은 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)
뜨거운 주제
7467
15
1376
52
77
11
48
19
19
22
WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법
Dec 17, 2023 pm 02:54 PM
WebSocket 및 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 소개: 지속적인 기술 개발로 음성 인식 기술은 인공 지능 분야의 중요한 부분이 되었습니다. WebSocket과 JavaScript를 기반으로 한 온라인 음성 인식 시스템은 낮은 대기 시간, 실시간, 크로스 플랫폼이라는 특징을 갖고 있으며 널리 사용되는 솔루션이 되었습니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법을 소개합니다.
WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술
Dec 17, 2023 pm 05:30 PM
WebSocket과 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술
JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법
Dec 17, 2023 pm 12:09 PM
JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 소개: 인터넷의 대중화와 기술의 발전으로 점점 더 많은 레스토랑에서 온라인 주문 서비스를 제공하기 시작했습니다. 실시간 온라인 주문 시스템을 구현하기 위해 JavaScript 및 WebSocket 기술을 사용할 수 있습니다. WebSocket은 TCP 프로토콜을 기반으로 하는 전이중 통신 프로토콜로 클라이언트와 서버 간의 실시간 양방향 통신을 실현할 수 있습니다. 실시간 온라인 주문 시스템에서는 사용자가 요리를 선택하고 주문을 하면
WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법
Dec 17, 2023 am 09:39 AM
WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 오늘날의 디지털 시대에는 점점 더 많은 기업과 서비스에서 온라인 예약 기능을 제공해야 합니다. 효율적인 실시간 온라인 예약 시스템을 구현하는 것이 중요합니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. WebSocket이란 무엇입니까? WebSocket은 단일 TCP 연결의 전이중 방식입니다.
JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축
Dec 17, 2023 pm 05:13 PM
JavaScript 및 WebSocket: 효율적인 실시간 일기 예보 시스템 구축 소개: 오늘날 일기 예보의 정확성은 일상 생활과 의사 결정에 매우 중요합니다. 기술이 발전함에 따라 우리는 날씨 데이터를 실시간으로 획득함으로써 보다 정확하고 신뢰할 수 있는 일기예보를 제공할 수 있습니다. 이 기사에서는 JavaScript 및 WebSocket 기술을 사용하여 효율적인 실시간 일기 예보 시스템을 구축하는 방법을 알아봅니다. 이 문서에서는 특정 코드 예제를 통해 구현 프로세스를 보여줍니다. 우리
간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법
Jan 05, 2024 pm 06:08 PM
JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용
자바스크립트에서 insertBefore를 사용하는 방법
Nov 24, 2023 am 11:56 AM
사용법: JavaScript에서 insertBefore() 메서드는 DOM 트리에 새 노드를 삽입하는 데 사용됩니다. 이 방법에는 삽입할 새 노드와 참조 노드(즉, 새 노드가 삽입될 노드)라는 두 가지 매개 변수가 필요합니다.
JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법
Jan 05, 2024 pm 01:37 PM
JavaScript에서 HTTP 상태 코드를 얻는 방법 소개: 프런트 엔드 개발에서 우리는 종종 백엔드 인터페이스와의 상호 작용을 처리해야 하며 HTTP 상태 코드는 매우 중요한 부분입니다. HTTP 상태 코드를 이해하고 얻는 것은 인터페이스에서 반환된 데이터를 더 잘 처리하는 데 도움이 됩니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. HTTP 상태 코드란 무엇입니까? HTTP 상태 코드는 브라우저가 서버에 요청을 시작할 때 서비스가
