关于js的addEventListener 和一些常用事件
2015-10-13 17:40
821 查看
element.addEventListener(<event-name>, <callback>, <use-capture>);
document.addEventListener("touchstart", function(){}, true)
el.addEventListener('click',function(){},false);
[/code]
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 listener element.addEventListener('click', callback);
移除事件监听
element.removeEventListener(<event-name>, <callback>, <use-capture>);
注意:移除时必须要有这个被绑定的回调函数的引用。简单地调用
element.removeEventListener('click');是不能达到想要的效果的
所以 如果(我们在长时间运行(long-lived)的应用中需要用到),那么我们就需要保留回调函数的句柄。意思就是说,我们不能使用匿名函数作为回调函数.
//注意函数句柄执行的上下文, 否则很容易发生事件的回调函数不在你所期望的上下文中执行 //如: <p id="el"> click me!! </p> var el = document.getElementById('el'); var user = { name: 'tom', sayhi: function(){ console.log(this.name); } } el.addEventListener('click',user.sayhi); //输出undefined //why? 因为注意此时 this 实际指向的是el,而非user, 因为我们传递的只是一个函数句柄引用,而不是传过去整个函数上下文(user对象) 要改,很简单 el.addEventListener('click',function(){ user.sayhi(); }); 但是这样改有一个缺点,因为我们实际上使用了一个匿名函数来引入需要的上下文,而这个匿名函数本身没有一个句柄引用可以在 removeEventListener中引用, 也就是说 不好在需要的时候移除监听事件 所以我们可以使用另一种方式 .bind()(ECMAScript 5标准内建函数对象的原型方法) var user.sayhi = user.sayhi.bind(user); el.addEventListener('click',user.sayhi); //同时可以方便的移除对应的事件监听 el.removeEventListener('click',user.sayhi);
鼠标事件
document.addEventListener('mousedown', mouseDown); document.addEventListener('click', mouseClick); document.addEventListener('mouseup', mouseUp);
touch事件
document.addEventListener('touchstart', touchStart); document.addEventListener('touchend', touchEnd); // touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发 // touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动 // touchend事件:当手指从屏幕上离开的时候触发。 // touchcancel事件:当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间,文档中并没有具体说明,只好去猜测 (在ios设备上的表现是常按着一段时间后自动结束touchstart事件的调用)
每个touch事件自带三个属性 touches:表示当前跟踪的触摸操作的touch对象的数组。 targetTouches:特定于事件目标的Touch对象的数组。 changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组 每个touches 自带 clientX:触摸目标在视口中的x坐标。 clientY:触摸目标在视口中的y坐标。 identifier:标识触摸的唯一ID。 pageX:触摸目标在页面中的x坐标。 pageY:触摸目标在页面中的y坐标。 screenX:触摸目标在屏幕中的x坐标。 screenY:触摸目标在屏幕中的y坐标。 target:触目的DOM节点目标
支持:
iOs版Safari、Android版WebKit、bada版Dolfin、OS6+中的BlackBerry WebKit、Opera Mobile 10.1+和LG专有OS中的Phantom浏览器。目前只有iOs版Safari支持多点触摸。PC版Firefox 6+ 和Chrome也支持触摸事件
代码实例1
var gotouch=function(){ alert('touchstartok'); } document.addEventListener("touchstart", gotouch); //note: 第三个参数不写 默认为false public override function addEventListener( type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false ):void
代码实例2
function Go(){ //... } document.getElementById("testButton").addEventListener("click", Go, false); // 或者 listener 直接就是函数 document.getElementById("testButton").addEventListener("click", function () { ... }, false); document.getElementById("testButton").removeEventListener("click", Go); // 删除监听事件
相关文章推荐
- html中form表单向Jsp提交中文乱码问题基本解决办法
- 网页图片延迟加载LazyLoad.js使用方法介绍和实例
- 浏览器JSON的插件(JSON-handle)使用问题
- javascript项目实战---ajax实现无刷新分页
- javascript项目实战---ajax实现无刷新分页
- 在网页中使用javascript实现求质数
- js中写入和读取cookie
- crmjs脚步获取服务器时间
- JS中A标签模拟POST请求
- ajax技术基础详解
- 三、JavaScript程序构成
- swiper.js——一般属性、进度属性
- Js 日期操作
- 一、JavaScript教程语言概况
- js闭包
- Javascript基础知识总结一
- JSON.parse()和JSON.stringify()
- javascript 字符串操作
- 解决.Net MVC EntityFramework Json 序列化循环引用问题.
- Javascript cookie操作