189 8069 5689

JS中的事件对象Event实例分析

这篇文章主要讲解了“JS中的事件对象Event实例分析”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JS中的事件对象Event实例分析”吧！

我们提供的服务有：网站设计、成都网站设计、微信公众号开发、网站优化、网站认证、陵城ssl等。为成百上千企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的陵城网站制作公司

JS中的事件对象Event实例分析

一、什么是事件对象 Event

  每一个事件触发时，都会产生一个与之对应的事件对象 event ，其中包含了触发事件的元素、键盘鼠标的状态、位置等等内容。

  每当用户触发一个事件后，JS 就会自动生成一个 event 对象，根据触发事件的不同，这个对象包含的内容也不同，比如通过鼠标触发点击事件，会产生一个 MouseEvent 对象，其中包含了鼠标的位置等内容；通过键盘触发事件，会产生一个 KeyboardEvent 对象其中包含按键相关的信息。

  • event 对象代表事件的状态，比如触发事件的元素、键盘按键的状态、鼠标的位置、鼠标按键的状态等等；

  • event 对象是一个隐式参数，并且只在事件发生的过程中才有效；

  • event 对象根据触发方式的不同会具有不同的属性，也就是说某些属性只对特定事件有效，但所有内容都是继承自 Event 对象；

  • event 对象在 IE 与 Chrome 等浏览器表现不尽相同，例如说 event.target 表示触发事件的元素，在 IE 中需要使用 event.srcElement 获取；

Event对象本身就是一个构造函数，可以用来生成新的实例。

event = new Event(type, options);

Event构造函数接受两个参数。第一个参数type是字符串，表示事件的名称；第二个参数options是一个对象，表示事件对象的配置。该对象主要有下面两个属性。

  • bubbles：布尔值，可选，默认为false，表示事件对象是否冒泡。

  • cancelable：布尔值，可选，默认为false，表示事件是否可以被取消，即能否用Event.preventDefault()取消这个事件。一旦事件被取消，就好像从来没有发生过，不会触发浏览器对该事件的默认行为。

var ev = new Event(
  'look',
  {
    'bubbles': true,
    'cancelable': false
  }
);
document.dispatchEvent(ev);

上面代码新建一个look事件实例，然后使用dispatchEvent方法触发该事件。

注意，如果不是显式指定bubbles属性为true，生成的事件就只能在“捕获阶段”触发监听函数。

// HTML 代码为
// 
Hello

var div = document.querySelector('div');
var p = document.querySelector('p');

function callback(event) {
  var tag = event.currentTarget.tagName;
  console.log('Tag: ' + tag); // 没有任何输出
}

div.addEventListener('click', callback, false);

var click = new Event('click');
p.dispatchEvent(click);

上面代码中，p元素发出一个click事件，该事件默认不会冒泡。div.addEventListener方法指定在冒泡阶段监听，因此监听函数不会触发。如果写成div.addEventListener('click', callback, true)，那么在“捕获阶段”可以监听到这个事件。

另一方面，如果这个事件在div元素上触发。

div.dispatchEvent(click);

那么，不管div元素是在冒泡阶段监听，还是在捕获阶段监听，都会触发监听函数。因为这时div元素是事件的目标，不存在是否冒泡的问题，div元素总是会接收到事件，因此导致监听函数生效。

二、Event 属性

  我们在前面提到，根据触发方式的不同 event 对象会具有不同的属性，我们可以将其大体分为四部分：

通用属性 (无论是通过键盘还是鼠标触发都拥有的属性)

  点击列表1后，控制台打印如下结果：
JS中的事件对象Event实例分析

鼠标属性

键盘属性

IE属性

三、Event 方法

  如果想要阻止事件元素的默认行为，例如点击 标签时执行点击事件，不要跳转链接，需要在事件处理程序中调用 preventDefault 方法：

百度一下，你就知道

  如果想要阻止事件冒泡，例如点击子元素标签时执行子元素的点击事件，而不想要执行父级元素的事件处理程序，则需要调用 stopPropagation 方法：

    
	
  • 不要触发 ul 的点击事件处理程序
    •

其他相关方法

  • addEventListener() 给目标元素注册监听事件；

  • createEvent() 创建一个 Event 对象；

  • dispatchEvent() 将事件发送到目标元素的监听器上；

  • handleEvent() 把任意对象注册为事件处理程序；

  • initMouseEvent() 初始化鼠标事件对象的值；

  • initKeyboardEvent() 初始化键盘事件对象的值；

  • initMutationEvent() 初始变动事件和 HTML 事件对象的值；

  • initCustomEvent() 初始自定义事件对象的值；

  • removeEventListener() 删除目标元素上的某个监听事件；

另外关于 createEvent 方法，根据传入参数的不同，会返回不同的 event 对象：

  • MouseEvents 创建鼠标事件对象，返回的对象中包含 initMouseEvent() 方法；

  • KeyboardEvent 创建键盘事件对象，返回的对象中包含 initKeyEvent() 方法；

  • KeyEvents 在 firefox 中创建键盘事件对象需要传入该参数；

  • MutationEvents 模拟变动事件和 HTML 事件的事件对象，返回的对象中包含 initMutationEvent 方法；

  • CustomEvent 创建自定义事件对象，返回的对象中包含 initCustomEvent() 方法；

四、模拟事件

4.1 模拟鼠标事件

  我们可以通过 createEvent() 方法可以创建一个新的 event 对象，借助 initMouseEvent() 方法来对这个鼠标事件对象的值进行初始化，该方法接受十五个参数，分别与鼠标事件中的各个属性一一对应，按照 type、bubbles、cancelable、view、detail、screenX、screenY、clientX、clientY、ctrlKey、altKey、shiftKey、、metaKey、button、relatedTarget 的顺序传入即可：

var oBtn = document.querySelector("button");
// 为 button 绑定事件处理程序
oBtn.addEventListener("click", function () {
    console.log(event);
})

var event = document.createEvent("MouseEvents");
// 通过 initMouseEvent() 方法初始化鼠标事件的 event 对象
event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
// 通过 dispatchEvent() 方法来触发 oBtn 上绑定的点击事件，此时浏览器打印的 event 对象为自定义的 event
oBtn.dispatchEvent(event);

  初始化事件对象时，最重要的是前四个参数，因为浏览器在触发事件时，这四个参数是必须的，而剩余的参数只有在事件处理程序中才会被使用，target 会在执行 dispatchEvent 方法时自动赋值；

4.2 模拟键盘事件

  同样需要先使用 createEvent() 方法可以创建一个新的 event 对象，但需要使用 initKeyEvent 来对键盘事件对象的值进行初始化，该方法接收八个参数，分别于键盘事件对象中的各个属性一一对应，按照 type、bubbles、cancelable、view、key、location、modifiers、repeat的顺序传入即可。但在 firefox 中，需要按照 type、bubbles、cancelable、view、ctrlKey、altKey、shiftKey metaKey keyCode charCode ` 的顺序传入十个参数

document.onkeydown = function () {
    console.log(event);
}

var event = document.createEvent("KeyboardEvent");
event.initKeyboardEvent("keydown", false, false, document.defaultView, "a", 0, "Shift", 0);
document.dispatchEvent(event);

4.3 模拟其他事件

  如果想要模拟其他事件，诸如 submit、focus 等 HTML 和变动事件，则需要通过 MutationEvents 方法来创建事件，通过 initEvent 方法来进行初始化，按照type、bubbles、cancelable、relatedNode、preValue、newValue、attrName、attrChange的顺序传入参数。

4.4 自定义 DOM 事件

  自定义事件不是由 DOM 原生触发的，它的目的是让开发人员创建自己的事件。要创建新的自定义事件，可以调用 createEvent("CustomEvent")，返回的对象有一个名为 initCustomEvent() 的方法，接收 type、bubbles、cancelable、detail 四个参数。

var oInput = document.querySelector("input");

oInput.addEventListener("myEvent", function () {
	console.log(event);
})

var event = document.createEvent("CustomEvent");
event.initCustomEvent("myEvent", true, false, "自定义事件myEvent");
oInput.dispatchEvent(event);

  上方代码创建了一个自定义事件，事件名为 myEvent ， 该事件可以向上冒泡，不可以执行在浏览器中的默认行为， detail 属性的值为 自定义事件myEvent，可以在绑定该事件的元素或者元素的父级元素上绑定事件处理程序来查看 event 对象。

五、Event的兼容性处理

  主要考虑到 IE 浏览器与 Chrome 等浏览器事件对象的区别，针对下面四个属性，需要进行特殊处理：

  • 获得 event 对象
    var event = event || window.event;

  • 获得 target 对象
    var target = event.target || event.srcElement;

  • 阻止浏览器默认行为
    event.preventDefault ? event.preventDefault() : (event.returnValue = false);

  • 阻止事件冒泡
    event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true)。

感谢各位的阅读，以上就是“JS中的事件对象Event实例分析”的内容了，经过本文的学习后，相信大家对JS中的事件对象Event实例分析这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！


文章标题：JS中的事件对象Event实例分析
标题链接：http://jkwzsj.com/article/pcojgo.html

其他资讯