JS事件挂接(详细) - 360文档中心

JavaScript事件详细讲解

事件的概念事件：指的是文档或者浏览器窗口中发生的一些特定交互瞬间。

我们可以通过侦听器（或者处理程序）来预定事件，以便事件发生的时候执行相应的代码。

一、事件流1.事件流：描述的是在页面中接受事件的顺序2.事件冒泡:由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点（文档）3.事件捕获：最不具体的节点先接收事件，而最具体的节点应该最后接收事件二、事件处理1.HTML事件处理：直接添加到HTML结构中2.DOM0级事件处理：把一个函数赋值给一个事件处理程序属性3.DOM2级事件处理：addEventListener("事件名","事件处理函数",布尔值)true:事件捕获false:事件冒泡removeEventListener();4.IE事件处理程序attachEventdetachEvent<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><div id="div"><button id="btn1">按钮</button></div><script>var btn1 = document.getElementById("btn1");if(btn1.addEventListener){btn1.addEventListener("click",demo);}else if(btn1.attachEvent){btn1.attachEvent("onclick",demo)}else{btn1.onclick = demo();}function demo(){alert("Hello");}</script></body></html>三、事件对象1、事件对象：在触发DOM事件的时候都会产生一个对象2、事件对象event:type:获取事件类型target：获取事件目标stopPropagation():阻止事件冒泡preventDefault():阻止事件默认行为<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><div id="div"><button id="btn1">按钮</button><a href="" id="aid">百度</a></div><script>document.getElementById("btn1").addEventListener("click",showType); document.getElementById("div").addEventListener("click",showDiv); document.getElementById("aid").addEventListener("click",showA); function showType(event){// alert(event.type);alert(event.target);event.stopPropagation();//阻止事件冒泡}function showDiv(){alert("div")}function showA(event){// event.stopPropagation();// event.preventDefault();}</script></body></html>。

js动态添加事件的方法

js动态添加事件的方法在JavaScript中，有多种方法可以动态添加事件。

下面将介绍一些常用的方法：1. 使用addEventListener(方法：addEventListener(方法是DOM中最常用的方法之一，它可以在指定的元素上添加事件监听器。

此方法可以接收三个参数：事件类型、回调函数和一个布尔值（可选参数，用于指定事件是在捕获阶段还是冒泡阶段触发，默认为false表示冒泡阶段）。

```javascriptvar element = document.getElementById("myButton");element.addEventListener("click", functionconsole.log("Button clicked!");});```2.直接赋值事件处理程序：可以直接将事件处理程序赋值给元素的属性。

这种方法比较简单，适用于简单的事件处理。

```javascriptvar element = document.getElementById("myButton");element.onclick = functionconsole.log("Button clicked!");};```3. 使用onclick属性：可以使用元素的onclick属性来动态添加事件处理程序。

这种方法只能添加一个事件处理程序，并且会覆盖之前的处理程序。

```javascriptvar element = document.getElementById("myButton");element.onclick = functionconsole.log("Button clicked!");};```4.使用匿名函数：可以使用匿名函数来动态添加事件处理程序。

Javascript添加事件的addEventListener（）及attachEvent。。。

Javascript添加事件的addEventListener（）及attachEvent。

Mozilla中：addEventListener的使⽤⽅式：target.addEventListener(type, listener, useCapture);target：⽂档节点、document、window 或 XMLHttpRequest。

type：字符串，事件名称，不含“on”，⽐如“click”、“mouseover”、“keydown”等。

listener ：实现了 EventListener 接⼝或者是 JavaScript 中的函数。

useCapture ：是否使⽤捕捉，⼀般⽤ false 。

例如：document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);IE中：target.attachEvent(type, listener);target：⽂档节点、document、window 或 XMLHttpRequest。

type：字符串，事件名称，含“on”，⽐如“onclick”、“onmouseover”、“onkeydown”等。

listener ：实现了 EventListener 接⼝或者是 JavaScript 中的函数。

例如：document.getElementById("txt").attachEvent("onclick",function(event) {alert(event.keyCode);});W3C 及 IE 同时⽀持移除指定的事件, ⽤途是移除设定的事件, 格式分别如下:W3C格式:removeEventListener(event,function,capture/bubble);Windows IE的格式如下:detachEvent(event,function);target.addEventListener(type, listener, useCapture);target ⽂档节点、document、window 或 XMLHttpRequest。

js事件委托的语法

js事件委托的语法JavaScript事件委托是一种常用的编程技巧，它允许我们通过将事件处理程序绑定到父元素上来管理子元素的事件。

这种编码方式在开发过程中非常有用，因为它不仅可以提高程序的性能，还能简化代码逻辑并改善代码的维护性。

事件委托的语法非常简单。

我们需要先选择一个合适的父元素作为事件触发的代理，并给它绑定相应类型的事件监听器。

例如，我们可以选择文档的body元素作为父元素，然后给它绑定click事件的监听器。

```javascriptdocument.body.addEventListener('click', function(event) { // 在这里处理事件逻辑});```在事件处理函数中，我们需要判断事件触发的具体元素是哪个子元素，并根据需要执行相应的操作。

这可以通过JavaScript中的事件对象（event）来实现。

事件对象包含了事件的相关信息，比如事件类型、触发的元素等。

为了判断事件是由哪个子元素触发的，我们可以通过事件对象的target属性进行判断。

target属性指向了实际触发事件的元素。

通过判断target元素的一些特定属性或者通过类名、标签名等来进行更具体的判断。

使用事件委托可以减少重复的事件绑定操作，尤其在涉及动态添加或删除子元素的情况下非常有用。

比如，当我们需要监听动态加载的列表项的点击事件时，如果使用事件委托，只需要给父元素绑定监听器一次即可，而不需要为每个列表项都重复绑定。

此外，事件委托还能提高程序的性能。

因为它利用了事件冒泡机制，事件在DOM树上冒泡，当事件到达父元素时触发监听器。

这意味着事件的冒泡只需要经过少量节点而不是每个子元素都会触发一次监听器。

这就大大减少了事件处理函数的数量，从而提高了页面的性能。

在开发过程中，我们还可以运用事件委托来实现更多的功能。

比如，我们可以通过事件委托来批量处理子元素的某些公共操作，或者实现一些高级功能，比如事件代理、事件过滤等。

JS如何为一个元素怎么绑定多个事件

JS如何为一个元素怎么绑定多个事件addEventListener是一个DOM方法，它接受三个参数：事件类型，事件处理函数和一个可选的布尔值。

以下是如何使用addEventListener 方法为元素绑定多个事件的示例：```javascript//获取元素var element = document.getElementById('myElement');//绑定多个事件element.addEventListener('click', functioconsole.log('点击事件');});element.addEventListener('mouseover', functioconsole.log('鼠标悬停事件');});element.addEventListener('mouseout', functioconsole.log('鼠标离开事件');});```在上面的代码中，我们首先使用getElementById方法获取一个具有id为"myElement"的元素。

然后，我们使用addEventListener方法为该元素绑定了三个事件：click，mouseover和mouseout。

每个事件都有一个相应的事件处理函数。

在这个例子中，当单击元素时，控制台将会输出"点击事件"，当鼠标悬停在元素上时，控制台输出"鼠标悬停事件"，当鼠标离开元素时，控制台输出"鼠标离开事件"。

通过使用addEventListener方法，您可以为一个元素绑定任意数量的事件。

这对于需要处理多个事件的交互和动态网页非常有用。

如果您需要为同一个元素绑定多个同类型的事件处理函数，您可以多次调用addEventListener方法并传递相同的事件类型。

js中的事件委托（事件代理）详解

js中的事件委托（事件代理）详解本⽂转载：js中的事件冒泡、事件委托是js 中⼀些需要注意的⼩知识点，这⾥结合转载⽂章总结⼀下：事件冒泡：JS中当出发某些具有冒泡性质的事件是，⾸先在触发元素寻找是否有相应的注册事件，如果没有再继续向上级⽗元素寻找是否有相应的注册事件作出相应，这就是事件冒泡。

事件委托：利⽤事件冒泡的特性，将本应该注册在⼦元素上的处理事件注册在⽗元素上，这样点击⼦元素时发现其本⾝没有相应事件就到⽗元素上寻找作出相应。

这样做的优势有：1.减少DOM操作，提⾼性能。

2.随时可以添加⼦元素，添加的⼦元素会⾃动有相应的处理事件。

转载⽂章内容：起因：1、这是前端⾯试的经典题型，要去找⼯作的⼩伙伴看看还是有帮助的；2、其实我⼀直都没弄明⽩，写这个⼀是为了备忘，⼆是给其他的知其然不知其所以然的⼩伙伴们以参考；概述：那什么叫事件委托呢？它还有⼀个名字叫事件代理，JavaScript⾼级程序设计上讲：事件委托就是利⽤事件冒泡，只指定⼀个事件处理程序，就可以管理某⼀类型的所有事件。

那这是什么意思呢？⽹上的各位⼤⽜们讲事件委托基本上都⽤了同⼀个例⼦，就是取快递来解释这个现象，我仔细揣摩了⼀下，这个例⼦还真是恰当，我就不去想别的例⼦来解释了，借花献佛，我摘过来，⼤家认真领会⼀下事件委托到底是⼀个什么原理：有三个同事预计会在周⼀收到快递。

为签收快递，有两种办法：⼀是三个⼈在公司门⼝等快递；⼆是委托给前台MM代为签收。

现实当中，我们⼤都采⽤委托的⽅案（公司也不会容忍那么多员⼯站在门⼝就为了等快递）。

前台MM收到快递后，她会判断收件⼈是谁，然后按照收件⼈的要求签收，甚⾄代为付款。

这种⽅案还有⼀个优势，那就是即使公司⾥来了新员⼯（不管多少），前台MM也会在收到寄给新员⼯的快递后核实并代为签收。

这⾥其实还有2层意思的：第⼀，现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的；第⼆，新员⼯也是可以被前台MM代为签收的，即程序中新添加的dom节点也是有事件的。

关于js的addEventListener和一些常用事件

关于js的addEventListener和⼀些常⽤事件element.addEventListener(<event-name>, <callback>, <use-capture>);document.addEventListener("touchstart", function(){}, true)el.addEventListener('click',function(){},false);addEventListener⾥最后⼀个参数决定该事件的响应顺序；如果为true事件执⾏顺序为 addEventListener ---- 标签的onclick事件 ---- document.onclick　如果为false事件的顺序为标签的onclick事件 ---- document.onclick ---- addEventListener分别解释:event-name(string)这是你想监听的事件的名称或类型。

它可以是任何的标准DOM事件（click, mousedown, touchstart, transitionEnd,等等），当然也可以是你⾃⼰定义的事件名称callback(function)（回调函数）这个函数会在事件触发的时候被调⽤。

相应的事件(event)对象，以及事件的数据，会被作为第⼀个参数传⼊这个函数use-capture(boolean)这个参数决定了回调函数(callback)是否在“捕获(capture)”阶段被触发var element = document.getElementById('element');function callback() {alert('Hello');}// Add listenerelement.addEventListener('click', callback);移除事件监听element.removeEventListener(<event-name>, <callback>, <use-capture>);注意:移除时必须要有这个被绑定的回调函数的引⽤。

js事件捕获，事件冒泡，事件委托以及DOM事件流

js事件捕获，事件冒泡，事件委托以及DOM事件流⼀：DOM事件流：事件流是从页⾯接收事件的顺序，DOM2级事件规定事件流包括三个阶段：①事件捕获阶段：⽤意在于事件达到⽬标之前捕获它，在事件捕获阶段事件流模型：document→html→body→div②处于⽬标阶段2：实际的⽬标到事件③事件冒泡阶段：由最具体的元素接收到事件，然后向上传播到较为不具体的节点。

事件流模型：div →body→ html→ document⼆：事件委托事件委托顾名思义：将事件委托给另外的元素。

其实就是利⽤DOM的事件冒泡原理，将事件绑定到⽬标元素的⽗节点。

如果要为⼤量的元素节点绑定事件，完美可以⽤事件委托完美解决，直接将事件绑定在这些元素的⽗节点上，只需要绑定⼀次，就可以在所有⼦节点触发事件。

三：常见的事件绑定：（1）bind()缺点：只能给调⽤它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件，⽐如内容很多的时候，⽹页中很多内容需要点击“下⼀页”的时候才会被加载，则这时新加载出的元素bind则没有给他们绑定事件。

bind（）不能使⽤的情况：①为DOM中的很多元素绑定相同事件；②为DOM中尚不存在的元素绑定事件；解决⽅法：使⽤live（）⽅法(2)live()⽅法会把click事件绑定到$(document)对象，⽽且只需要给$(document)绑定⼀次（不是50次，更不是5000次），然后就能够处理后续动态加载的节点的事件。

在接收到任何事件时，$(document)对象都会检查事件类型和事件⽬标，如果是click事件且事件⽬标是td，那么就执⾏委托给它的处理程序。

缺点：①$()函数会找到当前页⾯中的所有⽬标元素并创建jQuery对象，但在确认事件⽬标时却不⽤这个集合，⽽是使⽤选择符表达式与event.target 或其祖先元素进⾏⽐较，因⽽⽣成这个jQuery对象会造成不必要的开销；②默认把事件绑定到$(document)元素，如果DOM嵌套结构很深，事件冒泡通过⼤量祖先元素会导致性能损失；③只能放在直接选择的元素后⾯，不能在连缀的DOM遍历⽅法后⾯使⽤，即$("#info_table td").live...可以，但$("#info_table").find("td").live...不⾏；④收集⽬标元素并创建jQuery对象，但实际操作的却是$(document)对象，令⼈费解。