javascript事件监听

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

使用 removeEventListener() 方法来移除事件的监听。

语法:addEventListener(eventfunctionuseCapture);

useCapture 的默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。

语法:removeEventListener("mousemove", myFunction);

<span id="event">监听事件</span>
<script>
event = document.getElementById(‘event‘);
event.addEventListener(‘click‘,function(){alert(‘点击事件监听‘);});
event.addEventListener(‘click‘,function(){alert(‘第二个点击事件‘);});event.addEventListener(‘onmouseout‘,function(){alert(‘绑定鼠标离开事件‘)})
event.removeEventListener();
</script>

  

时间: 2024-10-12 09:21:18

javascript事件监听的相关文章

javascript事件监听与事件委托

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

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

事件监听 在Javascript中事件的监听是用来对某些操作做出反应的方法.例如监听一个按钮的pressdown, 或者获取鼠标左键按下时候鼠标的位置.这些都需要使用监听来完成.监听的函数很简单:addEventListener. 这里解释一下一个网页的嵌套关系:最外层:window 包含:document 包含:html 包含: body 包含:div等等... addEventListener监听方法 按钮监听事件响应 首先我们需要获取一个按钮的handle,获取的方法很简单,代码如下: v

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

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

(12)JavaScript之[事件][事件监听]

事件 1 /** 2 * 事件: 3 * onload 和 onunload 事件在用户进入或离开页面时被触发 4 * 5 * onchange事件常结合对输入字段的验证来使用 6 * onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数. 7 * 8 * onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分.首先当点击鼠标按钮时, 9 * 会触发 onmousedown 事件,当释放鼠标

javascript 兼容W3c和IE的添加(取消)事件监听方法

事件作为javascript本身的一个必备功能,在目前javascript的使用中是无处不在的,基本要只要写到javascrpt,就会用到javascript事件.下面就说说javascript中的添加事件监听和取消事件监听的方法,当然也要做到兼容W3c和IE.下面是兼容的代码: [javascript] view plain copy //添加事件监听兼容函数 function addHandler(target, eventType, handler){ if(target.addEvent

Javascript异步编程方法之------“事件监听”

Javascript异步编程方法之------“事件监听”另一种思路是采用事件驱动模式.任务的执行不取决于代码的顺序,而取决于某个事件是否发生.还是以f1和f2为例.首先,为f1绑定一个事件(这里采用的jQuery的写法).f1.on('done', f2);上面这行代码的意思是,当f1发生done事件,就执行f2.然后,对f1进行改写:function f1(){setTimeout(function () {// f1的任务代码f1.trigger('done');}, 1000);}f1.

在Javascript中监听flash事件(转)

在Javascript中监听flash事件,其实有两种做法: 1.在特定的环境下(例如专门制作的flash),大家约定一个全局函数,然后在flash的事件中用ExternalInterface.call调用这个全局函数即可.2.在非特定的环境下(例如编写通用的flash插件),是不能限制用户的函数名的,所以根本无法约定全局函数:是否可以通过类似js的回调函数的形式实现事件监听呢? 其实js与flash的通信,一般情况下可以进行一些比较简单的通信,如传递基本的数据类型.传递简单的对象.调用函数等,

JavaScript的事件监听、捕获和冒泡

在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调函数来进行相关的操作. 而JavaScript中事件监听的方法总共有三种,分别如下: element.addEventListener(type, listener[, useCapture]); //IE6~8不支持 element.attachEvent('on' + type, listener)     //支持IE6~10,IE11不支持 element['on' + type] = fu

Javascript 的事件监听函数和移除事件监听函数

<html> <head></head> <body> <div id="hello">hello world</div> <script> //w3c中使用addEventListener()函数监听事件,IE中使用attachEvent()函数监听事件 //w3c中使用 removeEventListener ()函数移除事件监听,IE中使用detachEvent()函数来移除事件监听 var do