创建事件、触发事件

fastclick源码中涉及到自创建自定义事件,相关基础知识要准备:

首先,最简单的:** 创建一个事件并触发:**

// 第一种方法,但是已经不推荐了,不过fastclick上用的这种
// Create the event.
var event = document.createEvent('Event');

// Define that the event name is 'build'.
event.initEvent('build', true, true);

// Listen for the event.
elem.addEventListener('build', function (e) {
  // e.target matches elem
}, false);

// target can be any Element or other EventTarget.
elem.dispatchEvent(event);

//第二种,直接用构造函数
var event = new Event('build');

// Listen for the event.
elem.addEventListener('build', function (e) { ... }, false);

// Dispatch the event.
elem.dispatchEvent(event);

相关连接见:
https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

fastclick中的真实做法

fastclick中有一个sendclick原型方法,目的是将模拟触发targetElement的click事件。

touch = event.changedTouches[0];

// Synthesise a click event, with an extra attribute so it can be tracked
clickEvent = document.createEvent('MouseEvents');
/*2*/ clickEvent.initMouseEvent(this.determineEventType(targetElement), true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null);
/*3*/ clickEvent.forwardedTouchEvent = true;
targetElement.dispatchEvent(clickEvent);

第三行的forwardedTouchEvent是给这个事件加的标签,方便跟踪。
第二行的方法参数太多,完全可以写成更加易读的形式:

clickEvent.initMouseEvent(this.determineEventType(targetElement), //type
    true, //canBubble
    true, //canCanceled
    window, //view
    1, //detail: 点击了几次
    touch.screenX, //screenX 
    touch.screenY, //screenY
    touch.clientX,  
    touch.clientY, 
    false, //ctrlKey,
    false, //altKey
    false, //shiftKey
    false, //metaKey
    0, //mouseEvent.button 0:鼠标左键 1:鼠标中键 2:鼠标右键 
    null //相关节点,在鼠标点击事件中设为null就好了,在mousein等事件中有用
);

相关连接:
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/initMouseEvent

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 前端知识体系http://www.cnblogs.com/sb19871023/p/3894452.html 前端...
    秋风喵阅读 14,310评论 7 163
  • 一年又过去一半了 银行卡还是没怎么有太大的变化 生活各处依然如此 除了日子在一天天的过 工作没了激情,没有存在感,...
    袁慧_3c1b阅读 1,643评论 0 0
  • 你对一个人有了欲望,那叫喜欢;你为一个人忍住了欲望,那叫爱。爱是懂得珍惜,懂得克制。我忍住了,我做到了,我非常珍惜...
    一生懂你阅读 1,571评论 0 0
  • 今天是今日有所思第95天。 人工智能来了!人工智能会取代很多人类原本从事的工作,程式化、重复性、仅靠记忆和练习就可...
    荒原苍狼阅读 1,216评论 0 0
  • 今天无意中从一个朋友那儿知道了这个简书,从此我可以把自己的孤独写进这里,而不又影响现实中的生活。生活的苟且...
    詹詹zmz阅读 1,364评论 0 1

友情链接更多精彩内容