美文网首页
创建事件、触发事件

创建事件、触发事件

作者: IAIAE | 来源:发表于2016-08-13 15:52 被阅读0次

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

相关文章

  • 创建事件、触发事件

    fastclick源码中涉及到自创建自定义事件,相关基础知识要准备: 首先,最简单的:** 创建一个事件并触发:*...

  • ionic页面加载方法

    事件名称 事件说明ionViewLoaded 页面加载完毕触发。该事件发生在页面被创建成 DOM 的时候...

  • dom事件机制

    事件触发三阶段window 往事件触发处传播,遇到注册的捕获事件会触发传播到事件触发处时触发注册的事件从事件触发处...

  • 17-事件对象

    1.什么是事件对象?事件对象就是一个系统自动创建的对象当注册的事件被触发的时候, 系统就会自动创建事件对象var ...

  • 事件

    事件触发方法:onclick="单击触发事件";ondblclick="双击触发事件";onmousedown="...

  • JavaScript事件对象和冒泡捕获

    事件对象 当注册的事件被触发的时候, 系统就会自动创建一个事件对象, 并且返回给我们事件对象就是一个系统自动创建的...

  • 我的前端入门笔记(11)--事件冒泡、捕获、代理

    1.事件冒泡与捕获 冒泡:先触发内部事件,再触发外部事件;捕获:先触发外部事件,再触发内部事件; addEvent...

  • JavaScript 事件(六)

    脚本响应事件的方式, 通常是更新 web 页面内容 交互操作创建事件 --> 事件触发代码 --> 代码反馈信息给...

  • 事件

    事件触发的三个阶段: window 往事件触发处传播,遇到注册的捕获事件会触发 传播到事件触发处时触发注册的事件 ...

  • 前端面试题(四)浏览器篇

    事件机制 事件触发三阶段 事件触发有三个阶段 window 往事件触发处传播,遇到注册的捕获事件会触发 传播到事件...

网友评论

      本文标题:创建事件、触发事件

      本文链接:https://www.haomeiwen.com/subject/sgaesttx.html