javascript相关事件的几个概念

2024-05-06 16:20:40

字体：大中小

来源：转载

供稿：网友

对于事件来讲，首先，我们需要了解这样几个概念：事件;事件处理程序;事件类型;事件流;事件冒泡;事件捕获;事件对象;事件方面的性能优化(事件委托、移除事件处理程序);常见的浏览器兼容问题。

客户端javascript程序采用了异步事件驱动编程模型。

相关事件的几个概念：

事件类型（event type）：

用来说明发生什么类型事件的字符串;

事件目标（event target）：

发生事件的对象;

事件处理程序（event handler）：

处理或响应事件的函数;

事件对象（event object）：

与特定事件相关且包含有关该事件详细信息的对象;

事件传播（event propagation）：

浏览器决定哪个对象出发其事件处理程序的过程;

注册事件处理程序：

1、设置javascript对象属性;

2、设置html标签属性

3、addEventListener或attachEvent(后者为IE的)

function addEvent(target,type,handler){

if(target.addEventListener){

target.addEventListener(type,handler,false);

}else{

target.attachEvent("on"+type,function(event){return handler.call(target,event)});

}

}

事件传播的三个阶段：

1、发生在目标处理函数之前，称为‘捕获'阶段;

2、对象本身的处理事件的调用;

3、事件的冒泡阶段;

为某个元素指定事件

在javascript中，可以，有以下三种：

1、在html中，使用onclick属性

2、在javascript中，使用onclick属性

3、在javascipt中，使用addEvenListener()方法

三种方法的比较

(1)在第二、三种方法中，可以向函数传入一个event对象，并读取其相应属性，而方法一不可以。

(2)首选第二、三种，第一种不利于将内容与事件分离，也不能使用event对象的相关内容。

一些语法细节

(1)在第一种方法中，onclick大小写无关，但在第二种方法中，必须使用小写。因为HMTL对大小写不敏感，而JS则会区分大小写。

(2)在第二、三种方法中，指定函数名时没有双引号，而第一种作为一个HTML属性，需要双引号。

(3)第一种方法需要括号，第二、三种不需要。

onclick="clickHandler()"

document.getElementById("jsOnClick").onclick = clickHandler2;

document.getElementById("addEventListener").addEventListener("click", clickHandler2);

完整代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Even Deom</title>

</head>

<body>

<button id="htmlOnClick" onclick="clickHandler()">htmlOnClick</button>

<button id="jsOnClick">jsOnClick</button>

<button id="addEventListener">addEventListener</button>

<script defer>

function clickHandler() {

alert("onclick attribute in html");

}

function clickHandler2(e) {

alert(e.target.innerHTML);

}

document.getElementById("jsOnClick").onclick = clickHandler2;

document.getElementById("addEventListener").addEventListener("click",

clickHandler2);

</script>

</body>

</html>