关于 js 的 addEventListener 事件绑定

最新推荐文章于 2024-02-17 12:37:41 发布

转载最新推荐文章于 2024-02-17 12:37:41 发布 · 531 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/tomJune/blog/2353999

文章标签：

#python #javascript #移动开发 #ViewUI

本文详细解析了addEventListener函数的使用方法，包括事件监听的添加与移除，事件响应顺序，以及如何正确处理事件上下文。通过实例展示了如何在长时间运行的应用中保留回调函数句柄，以及如何使用.bind()方法确保事件在正确的上下文中执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

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);    // 删除监听事件

转载于:https://my.oschina.net/tomJune/blog/2353999