javascript事件

yuanxin 发布于2019-08-26 13:38 / 1908人阅读

摘要：事件的本质是程序各组成之间的一种通讯方式，也是异步编程的一种实现。事件如的名称，大小写敏感。事件发生时，就会执行此函数。该对象有下列属性布尔值，表示该事件是否在捕获阶段触发监听函数。该方法主要用于移除添加的事件监听函数。

事件的本质是程序各组成之间的一种通讯方式，也是异步编程的一种实现。
----摘自JavaScript标准参考教程

1.EventTarget接口

EventTarget是接收事件监听跟出发的接口。所有的节点对象都会有这个接口。
该接口提供三个实例方法。

 addEventListener:绑定监听事件
 removeEventListener:移除监听事件
 dispatchEvent：触发事件

1.1 EventTarget.addEventListener()

   EventTarget.addEventListener()用于实现为节点或者对象绑定一个监听事件，一个对象或者节点可以绑定多个监听事件，但若每个监听事件的监听函数是同一个的话就只会执行一次，其他函数会自动被移除。

该方法接受三个参数。

target.addEventListener(type,listener[,userCapture]);

type:事件(如：click,focus)的名称，大小写敏感。
listener:监听函数（函数名）。事件发生时，就会执行此函数。
useCapture:布尔指，表示监听函数是否在捕获阶段触发，默认值：false（函数只在冒泡时触发）

example 1：

oDiv=document.querySelector(".div1"); 
function eventFun(){ 
   console.log("监听事件") 
} 
oDiv.addEventListener("click",eventFun,false);

关于参数还有另外两个情况
1.第二个参数除了监听函数，还可以是具有handleEvent方法的对象
example 2:

oDiv.addEventListener("click",
   {   handleEvent:function(){
   console.log("handleEvent方法"); 
   } 
  });

2.第三个参数除了布尔值useCapture，还可以是一个属性配置对象。该对象有下列属性

capture：布尔值，表示该事件是否在捕获阶段触发监听函数。

once：布尔值，表示监听函数只触发一次，然后自动移除。

passive：布尔值，表示监听函数不会调用事件的preventDefault方法。如果监听函数调用了，浏览器会自动忽略这个要求，并在控制台输出一行警告。

1.2 EventTarget.removeEventListener()
该方法主要用于移除addEventListener添加的事件监听函数。该方法没有返回值。用法与addEventListener()方法完全一值。

1.3 EventTarget.dispatchEvent()
EventTarget.dispatchEvent()方法在当前节点上出发指定事件，从而触发监听函数的执行。该方法返回一个布尔值，只要一个监听函数调用了Event.preventDefault()，则返回false，否则返回true。

 EventTarget.dispatchEvent(event)

example 3:

oDiv.addEventListener("click",eventFun,false);
 var event = new Event("click);
 oDiv.dispatchEvent(event);//自动执行click事件。

2.监听函数

浏览器的事件模型就是通过监听函数来对事件作出反应的，浏览器监听到这个事件就会执行对应的监听函数。
javascript中有三种方法可以为事件绑定监听函数

2.1 html的on-属性(事件名)

 
 //这样绑定的是函数名+(),这样当事件发生时就会立即执行函数

2.2元素节点的事件属性

div.onclick=function(){
  console.log("节点事件")
}

2.3 EventTarget.addEventListener()
使用方法同第一小节

2.4 总结
第一种方法违反了html与javascriot代码分离的原则，不利于代码分工，不推荐使用。
第二种方法，同一个事件只能定义一个监听函数。如果定义多次，后一次会把前面的覆盖掉。不推荐使用。
第三种是比较推荐且官方指定的监听函数方法，原因如下：

1.同一个事件可以添加多个监听函数。
2.能够指定在哪个阶段触发监听函数。
3.除了DOM节点，其他对象(比如：window,XMLHttpRequest等)也有这个接口，它等于是整个javascript统一的监听函数接口。

海外云主机云服务器 javascript事件 javascript键盘事件 javascript焦点事件 javascript事件绑定

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109219.html

浏览器下的 Event Loop

摘要：前言是以单线程的形式运行在宿主环境下，采用了回调的形式来解决异步任务。线程中步就是在浏览器下的。前言 javascript 是以单线程的形式运行在宿主环境下，javascript 采用了回调的形式来解决异步任务。为什么是单线程？ javascript 的最开始的出现是为了给 web 页面增添一些动态的效果，那么就避免不了获取页面上的元素信息，如果 javascript 是以多线程的...

forrest23 2019-08-23 16:50 评论0 收藏0
什么是JavaScript 事件循环 ?

摘要：此事件队列的美妙之处在于它只是函数等待被调用和移动到调用栈的一个临时存放区域。在事件循环不断监视调用栈是否为空现在确实是空的时候调用创建一个新的调用栈来执行代码。在执行完之后进入了一个新的状态这个状态调用栈为空事件记录表为空事件队列也为空。这篇文章是对个人认为讲解　JavaScript　事件循环比较清楚的一篇英文文章的简单翻译,原文地址是http://altitudelabs.com...

tracymac7 2019-08-20 16:15 评论0 收藏0
JavaScript 浏览器事件解析

摘要：原文浏览器事件之间的关系程序采用了异步事件驱动编程模型，维基百科对它的解释是事件驱动程序设计英语是一种电脑程序设计模型。原文：https://keelii.github.io/2016/09/29/javascript-browser-event/ JavaScript、浏览器、事件之间的关系 JavaScript 程序采用了异步事件驱动编程（Event-driven program...

spacewander 2019-08-20 11:26 评论0 收藏0
《JavaScript高级程序设计》学习笔记：JavaScript中的事件流和事件处理程序

摘要：可以使用侦听器或处理程序来预订事件，以便事件发生时执行相应的代码。响应某个事件的函数称为事件处理程序或事件侦听器。可以删除通过级方法指定的事件处理程序。 JavaScript和HTML之间的交互是通过事件实现的。事件：文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器（或处理程序来预订事件），以便事件发生时执行相应的代码。 1. 事件流事件流：从页面中接收事件的顺序。 ...

Rocko 2019-08-19 17:21 评论0 收藏0
【译】JavaScript面试问题：事件委托和this

摘要：主题来自于的典型面试问题列表。有多种方法来处理事件委托。这种方法的缺点是父容器的侦听器可能需要检查事件来选择正确的操作，而元素本身不会是一个监听器。 showImg(http://fw008950-flywheel.netdna-ssl.com/wp-content/uploads/2014/11/Get-Hired-Fast-How-to-Job-Search-Classifieds...

浠ラ箍 2019-08-21 10:32 评论0 收藏0
初窥JavaScript事件机制的实现（一）—— Node.js事件驱动实现概览

摘要：如果当前没有事件也没有定时器事件，则返回。相关资料关于的架构及设计思路的事件讨论了使用线程池异步运行代码。下一篇初窥事件机制的实现二中定时器的实现在浏览器中，事件作为一个极为重要的机制，给予JavaScript响应用户操作与DOM变化的能力；在Node.js中，事件驱动模型则是其高并发能力的基础。学习JavaScript也需要了解它的运行平台，为了更好的理解JavaScript的事...

lavor 2019-08-21 10:33 评论0 收藏0