JavaScript模拟事件的注意要点

时间: 2019-04-16阅读: 467标签: 事件

DOM中的事件模拟

三个步骤: 首先通过document.createEvent()方法创建event对象,接收一个参数,即表示要创建的事件类型的字符串:

  • UIEvents(DOM3中的UIEvent)鼠标和键盘事件;
  • MouseEvents(DOM3中的MouseEvent)鼠标事件;
  • MutationEvents(DOM3中的MutationEvent)变动事件;
  • htmlEvents(没有DOM3中对应的事件)html事件;

其次在创建了event对象之后,还需要使用与事件有关的信息对其进行初始化。每种类型的event对象都有一个特殊的方法,为它传入适当的数据就可以初始化该event对象。用event.init......()此类行的方法。 最后就是触发事件。这需要使用dispatchEvent()方法,接收一个参数,即表示要触发的event对象。


模拟鼠标事件

首先创建鼠标事件对象的方法createEvent()传入MouseEvents,返回的对象的方法initMouseEvent(),接收15个信息:

  • type(字符串):事件类型如“click”;
  • bubble(布尔值):是否冒泡;
  • cancelable(布尔值):是否可取消;
  • view(AbstractView):与事件关联的视图,一般为document.defaultView;
  • detail(整数):一般为0,一般只有事件处理程序使用;
  • screenX(整数):事件相对于屏幕的X坐标;
  • screenY(整数);
  • clientX(整数):事件相对于视口的X坐标;
  • clientY(整数);
  • ctrlKey(布尔值):是否按下了Ctrl键,默认为false;
  • altKey(布尔值);
  • shiftKey(布尔值);
  • metaKey(布尔值);
  • button(整数):表示按下了哪个鼠标键,默认为0;
  • relatedTarget(对象):表示与事件相关的对象。一般只有在模拟mouseover与mouseout时使用。

最后记得把event对象传给dispatchEvent()方法。 如模拟按钮的单击事件:

//模拟click事件
//获取btn
var btn = document.querySelector("#btn");
//创建event
var event = document.createEvent("MouseEvents");
//初始化event
event.initMouseEvent("click",true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);
//click事件绑定事件处理程序
btn.onclick = function () {
  console.log("hello");
}
//在此我向大家推荐一个前端全栈开发交流圈:619586920  突破技术瓶颈,提升思维能力
//触发事件
btn.dispatchEvent(event); //hello
//取消引用
btn.onclick = null;

另外,建议使用构造函数"MouseEvent":

var evt = new MouseEvent("click", {
  bubbles: true,
  cancelable: true,
  view: window
});


模拟键盘事件

首先创建鼠标事件对象的方法createEvent()传入KeyboardEvents,返回的对象的方法initKeyEvent(),接收下面参数: type(字符串):要触发的事件类型,“keydown”等; bubbles(布尔值):表示事件是否应该冒泡; cancelable(布尔值):是否可以取消; view(AbstractView):与事件关联的视图。一般为document.defaultView; key(布尔值):表示按下的键的键码; location(整数):表示按下哪里的键。0为主键盘;1为左;2为右;3为数字键盘;4为虚拟键盘;5为手柄; modifiers(字符串):空格分隔的修改键列表,如“shift”; repeat(整数):在一行中按下了多少次这个键; 由于DOM3级不提倡使用keypress事件,因此只能利用这种技术来模拟keydown和keyup事件:

var textbox = document.querySelector("#myTextBox");
var event = document.createEvent("KeyboardEvent");
event.initKeyboardEvent("keydown",true,true,document.defaultView,"a",0,"Shift",0);
textbox.dispatchEvent(event);

在Firefox中,调用createEvent()并传入“KeyEvents”就可以创建一个键盘事件,返回的事件对象会包含一个initKeyEvent()方法,接收参数:

  • type;
  • bubbles;
  • cancelable;
  • view;
  • ctrlKey;
  • altKey;
  • shiftKey;
  • metaKey;
  • keyCode;
  • charCode;

另外,建议使用构造函数“KeyboardEvent”


模拟其他事件

浏览器中很少使用变动事件和html事件;要模拟变动事件,可以用createEvent("MutationEvent");initMutationEvent();要模拟html事件,可以用createEvent("htmlEvents");initEvent();


自定义DOM事件

用createEvent("CustomEvent");initCustomEvent()方法,接收参数:type;bubbles;cancelable;detail;

var btn = document.querySelector("#btn");
var evt = document.createEvent("CustomEvent");
evt.initCustomEvent("click",true,true,"Hello there");
btn.onclick = function () {
  console.log(event.detail);
};
btn.dispatchEvent(evt);


IE中的事件模拟

调用document.createEventObject()方法,创建event对象,并指定必要的信息,最后在目标上调用fireEvent()方法,接收两个参数:事件处理程序名称和event对象:

var btn = document.querySelector("#btn");
var evt = document.createEventObject();
evt.screenX = 0;
evt.screenY = 0;
evt.clientX = 0;
evt.clientY = 0;
evt.ctrlKey = false;
evt.altKey = false;
evt.shiftKey = false;
evt.button = 0;
btn.fireEvent("onclick",evt);

1

站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/2911

JavaScript自定义事件

系统内发生的动作或发生的事情,系统会在事件出现时触发某种信号,提供一个自动加载某种动作的机制。事件三要素:事件源(触发事件的元素也就是你是要对什么东西进行操作);事件(事件的触发方式也就是你要做什么实现所要的交互效果)

js如何取消事件传递?

如果在javascript中只希望事件发生在它的目标而不是在它的父元素上,即取消它的冒泡事件的发生,该如何做?因为按照javascript发生事件的顺序,它由两个阶段:分别从根元素--父元素--目标元素(捕获阶段),再到父元素--根元素

原生JS实时监听input框输入值

利用原生JS实时监听input框输入值,原生JS中可以使用oninput,onpropertychange,onchange,oninput,onpropertychange,onchange的用法

JS事件冒泡机制以及委托方法,以及vue中的stop

要理解事件冒泡机制,就得先了解事件。浏览器是事件驱动型的,根据用户的行为触发不同的事件,根据事件执行相应的操作。我们较为熟悉的事件有三大类型:鼠标键盘事件、页面事件、表单相关事件。

css3 pointer-events(阻止hover、active、onclick等触发事件)

pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。

JavaScript 和 Node.js 中的“事件驱动”是什么意思?

事件驱动架构是建立在软件开发中一种通用模式上的,这种模式被称为发布-订阅或观察者模式。在事件驱动架构中,至少有两个参与者:主题(subject)和观察者(observer)。

用js代码触发dom事件的实现方案

前端编写测试用例时,在测试界面上的一些效果时,通常都希望能够模拟一些用户操作,而模拟用户操作最主要的方式就是用代码触发指定事件。通常一些元素上会自带一些触发事件的方法,例如click、focus等

Openlayers 禁用鼠标双击缩放事件(ol.interaction.DoubleClickZoom)

openlayers地图加载时,默认会有9个交互事件,其中可以看到控制双击缩放事件的DoubleClickZoom,我们知道在绘制线时,结束的响应事件也是双击,所以在绘制线时和双击缩放事件就会冲突了。

js事件冒泡和默认事件处理(原生js、vue)

何为默认事件?比如 a 会跳转页面,submit 会提交表单等。普通js方法:e.preventDefault()函数。Vue.js方法: .prevent 是vue 的内置修饰符,调用了 event.preventDefault()阻止默认事件

jquery的on绑定点击事件执行两次的解决办法

jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的alert会执行两次,相应地数组删除也执行两次,具体代码如下

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广