关于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 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); // 删除监听事件
关于js的addEventListener 和一些常用事件的更多相关文章
- jq常用事件(on,blur,focus,change),js/jq等待图片(页面)加载完毕事件,js读取文件
jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...
- js常用事件
为了便于使读者更好地运用js事件,就把常用事件大致分为以下几种: a. 表单元素事件,在表单元素中生效 onfocus ------获取焦点 onblur -------失去焦点 onsubmit ...
- JS常用事件的总结
JS常用事件的总结 outsbumit 表单提交事件 onload 页面加载事件 onclick 鼠标单击某个对象事件 ondblclick 鼠标双击某个对象事件 on ...
- JavaScript基础之常用事件
js 基础之常用事件 在js当中,事件是较为常用的内容,本篇文章来说一些常用的事件. 鼠标事件 下面是常用的鼠标事件: click 当用户按下并释放鼠标按键或其他方式"激活"元素时 ...
- js-DOM-页面元素的兼容性、常用事件、节点
页面元素的兼容性: 所谓的兼容性指的就是当前浏览器是否支持当前对象的属性或是方法,如果支持就是兼容,如果不支持就是不兼容. 举个例子: /** * 设置页面标签之间的文本内容的兼容性写法 * @par ...
- (转)js的左右滑动触屏事件
原文:http://blog.sina.com.cn/s/blog_6a0a183f0100zsfk.html (2012-01-20 08:55:53) 转载▼ 标签: 移动设备 触屏事件 杂谈 分 ...
- jQuery--引入,基本语法,以及常用事件
一.初识jQuery jQuery是一个JavaScript函数库.主要包含的功能有:HTML元素的选取.操作,CSS操作,HTML事件函数,JavaScript特效和动画,HTML DOM遍历和修改 ...
- JS - 解决鼠标单击、双击事件冲突问题(原生js实现)
由于鼠标双击时每一次触发双击事件都会引起两次单击事件和一次单击事件,原生的js不提供专门的双击事件. 因为业务原因,双击和单机都绑定了不同的业务,在双击的时候又触发了单机,影响了页面的正常显示 出现问 ...
- javaScript入门之常用事件
JS中的常用事件 onfocus/onblur:聚焦离焦事件,用于表单校验的时候比较合适. onclick/ondblclick:鼠标单击和双击事件 onkeydown/onkeypress:搜索引擎 ...
随机推荐
- py2exe安装使用
一.简介 py2exe是一个将python脚本转换成windows上的可独立执行的可执行程序(*.exe)的工具,这样,你就可以不用装python而在windows系统上运行这个可执行程序. py2e ...
- Manacher算法:求解最长回文字符串,时间复杂度为O(N)
原文转载自:http://blog.csdn.net/yzl_rex/article/details/7908259 回文串定义:"回文串"是一个正读和反读都一样的字符串,比如&q ...
- JZOJ 5913. 林下风气
Description 里口福因有林下风气,带领全国各地高校掀起了一股AK风,大家都十分痴迷于AK.里口福为了打击大家的自信心,出了一道自以为十分困难的题目.里口福有一棵树,第i个节点上有点权ai,他 ...
- G - Dreamoon and NightMarket Gym - 101234G 优先队列+思路
题目:题目链接 题意:给出n种食物,食物有自己的价格并且可以自由搭配,每天吃之前没吃过的花费最少的搭配,问第k天的花费. 思路:第k小我们考虑用优先队列处理,虽然n比较大,但由于1 ≤ K ≤ min ...
- 菜鸟教程perl总结
数据类型有: 标量$, 数组@,哈希% 数组声明 : @hits = (25, 30, 40); 或者 @sites = qw/google taobao runoob/; 数组操作 pop, ...
- python基础之生成器、三元表达式、列表生成式、生成器表达式
生成器 生成器函数:函数体内包含有yield关键字,该函数执行的结果是生成器,生成器在本质上就是迭代器. def foo(): print('first------>') yield 1 pri ...
- android stadio mapping文件的使用
mapping文件就是在对代码混淆以后,你用来查看混淆前和混淆后的对比文件. 一般用来查看线上的bug; java.lang.NullPointerException: Attempt to invo ...
- PJSIP-PJLIB(samples) (the usage of the pjlib lib) (eg:string/I/O)
Here are some samples about PJLIB! PJLIB is the basic lib of PJSIP, so we need master the lib first ...
- Kotlin将Realm提升到更高层次
作者:Víctor Manuel Pineda 时间:Feb 14, 2017 原文链接:https://antonioleiva.com/kotlin-realm-extensions/ 当有人问我 ...
- java中利用正则表达式获取a标签
// 设置新闻内容 notice.setContent(editorValue); Matcher m = Pattern.compile("<a[^>]*>([^< ...