html学习 - javascript事件监听以及addEventListener参数分析

事件监听

在Javascript中事件的监听是用来对某些操作做出反应的方法。例如监听一个按钮的pressdown, 或者获取鼠标左键按下时候鼠标的位置。这些都需要使用监听来完成。监听的函数很简单:addEventListener.

这里解释一下一个网页的嵌套关系:最外层:window 包含:document 包含:html 包含: body 包含:div等等...

addEventListener监听方法

按钮监听事件响应

首先我们需要获取一个按钮的handle,获取的方法很简单,代码如下:

var btn = document.getElementById("btnExample");

然后给btn添加事件监听:

btn.addEventListener("click", btn_click_function, false);

现在当我们对idbtn的按钮点击的时候,就会触发btn_click_function函数,这个函数可以是匿名的回调函数(假如不太懂,请百度),也可以是自己写的一个函数,在这里调用。这里说明下,这些函数都会传入一个event的参数。这个参数有很多属性,并且涉及到第三个为false的参数,我们后面讨论。

对于这两种方法我分别都放一个例子:

  1. 匿名回调函数
var exportBtn = document.getElementById("createImageData");

exportBtn.addEventListener("click",function() {
			//write function code here
		}, false);
  1. 自己命名回调函数

var exportBtn = document.getElementById("createImageData");
exportBtn.addEventListener("click", createImageDataPressed, false);

窗口事件响应

窗口事件响应,就是我们对整个窗口进行监听,并不限于按钮和输入框等。

则只需要把上面的btn改成window或者document就可以了。

addEventListener参数分析

addEventListener(type:String, listener:Function, useCaputer:Boolean(default:false),
priority:int(default:0), useWeakReference:boolean (default:false) );

在addEventListener中前三个参数比较重要,第一个参数是事件类型,例如clickpressdown pressup等等,第二个参数就是响应的时候所执行的函数,第三个是事件流的问题。第四个是优先级,第五个是强引用or弱引用,假如是强引用不会被当做垃圾回收掉。

第一个已经说完了,第二个参数在上部分已经举过例子了,第三个参数这里着重讲一下:(内容比较多,我先放百度的解释)

这里牵扯到“事件流”的概念。侦听器在侦听时有三个阶段:捕获阶段、目标阶段和冒泡阶段。顺序为:捕获阶段(根节点到子节点检查是否调用了监听函数)→目标阶段(目标本身)→冒泡阶段(目标本身到根节点)。此处的参数确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。 如果将 useCapture 设置为 true,则侦听器只在捕获阶段处理事件,而不在目标或冒泡阶段处理事件。 如果useCapture 为 false,则侦听器只在目标或冒泡阶段处理事件。 要在所有三个阶段都侦听事件,请调用两次 addEventListener,一次将
useCapture 设置为 true,第二次再将useCapture 设置为 false. (此段内容来源于百度 )。

捕获阶段就是如第一部分所说的网页嵌套关系中的,从外到里的传递过程,而冒泡阶段就是从目标到最外层的传递过程,这个参数就是告诉监听事件在什么时刻触发。

后面两个参数我用的不多,就暂时先不在这里写了。等我很明白的时候再放在这里。

时间: 2024-10-13 17:26:40

html学习 - javascript事件监听以及addEventListener参数分析的相关文章

html学习 - jquery事件监听详解

html学习 - jquery事件监听详解 html学习 - jquery事件监听详解 监听方法 监听方法参数解释 click参数 事件自动执行问题解决 bind方法 live方法 监听方法 在jquery里,监听的方法比较多,用的最多的就是简单的.click() .onchange() .pressdown() 所以这样很简单啊,直接使用就好了,只要符合参数规范就可以了.除了这个还有bind() live() 方法. 而addEventListener()同bind()方法是没有很大功能上的区

javascript事件监听

使用addEventListener() 方法用于向指定元素添加事件句柄,而且添加的事件句柄不会覆盖已存在的事件句柄,同时可以向一个元素添加多个事件句柄,可以向同个元素添加多个同类型的事件句柄,如:两个 "click" 事件.你可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素.如: window 对象. 使用 removeEventListener() 方法来移除事件的监听. 语法:addEventListener(event, function, useCapture)

Android学习按键事件监听与Command模式

Android学习按键事件监听与Command模式 - Dufresne - 博客园 ? 一 Command模式 意图: 将一个请求封装为一个对象,从而使你可用不同的请求对客户进行参数化: 对请求排队或记录请求日志,以及支持可撤销的操作. 将请求被封装成一个对象,当向某对象提交请求时,使我们可以不用去知道被具体的请求的操作或者请求的接收者, 实现了动作的请求者对象和动作的执行者对象之间的解耦合. 适用性: 使用Command模式代替callback形式的回调应用: 在不同的时刻指定.排列和执行请

javascript事件监听与事件委托

事件监听与事件委托 在js中,常用到element.addEventListener()来进行事件的监听.但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响.此时,我们可以用事件委托的方式来进行事件的监听. 每个事件都经历三个阶段 捕获 到达目标 冒泡 事件委托需要用到事件的冒泡,冒泡就是事件发生时,上层会一层一层的接收这个事件. 如下页面结构: <body> <div id="div1"> <div id="div2"

spring boot 学习 ---- 使用事件监听

spring 的事件监听 事件监听其实我们并不陌生,简单来讲,当程序达到了某个特定的条件,程序就会自动执行一段指令.在spring 中也一样,我们可以使用spring中的事件监听来实现某些特定的需求. 发布事件 既然要监听事件,首先要发布我们的事件嘛.在spring中发布事件我们可以通过继承ApplicationEvent 来发布我们的事件类. @Data public class SendEvent extends ApplicationEvent { public SendEvent(Obj

javascript事件监听中传递匿名函数(嵌套定义的命名函数)与命名函数的区别

项目中有个需求,事件第一次执行(立即执行)与后几次执行不同,但是直接传递定义好的命名函数,返回结果一样..如果通过匿名函数内再嵌套具名函数,结果就能返回正确!代码如下: 代码 <button class="button">按钮</button> (function(w) { //第一次定义需要执行的代码块 var fn = function() { console.log(1); }; var btn = document.querySelector('.but

浏览器默认事件,事件监听,事件委托

浏览器的常见默认行为 图片,文字可以脱出爱 a标签可以进行跳转 右键是菜单 submit可以进行提交 右键菜单触发,可以作为一个事件 document.oncontext=function(e){ alert(1); } 可以阻止浏览器默认行为 return false;    可以实现,但不推荐使用,老师就是这么说的. 还有就是时间对象提供的方法:e.preventDefault()   或e.returnValue=false;后者为了兼容该死的IE低版本 例: DOM,一般的事件都是0级事

js添加事件监听

1)对于大多数浏览器添加事件监听使用addEventListener(),此函数使用方式为obj.addEventListener('method','function',bool);如添加鼠标点击事件click,移动 mousemove等,第二个参数为调用的方法,第三个参数表示是否需要捕捉,是一个bool值:true表示使用capture,false表示bubbling,一般情况下都是用FALSE;此方法对于相同的函数只绑定一次,也就是说重复绑定相同的函数,只执行一次该方法.当一个对象同一种动

[JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的onclick事件也会被触发.js里称这种事件连续发生的机制为事件冒泡或者事件捕获.IE浏览器:事件从里向外发生,事件从最精确对象(target)开始触发,然后到最不精确的对象(document)触发,即事件冒泡 Netscape:事件从外向里发生,事件从最不精确的对象(document)开始触发,然后到最精确对象(