文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

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

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

一、什么是事件对象 Event

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

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

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

event = new Event(type, options);

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

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

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

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

// HTML 代码为
// <div><p>Hello</p></div>
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 对象会具有不同的属性,我们可以将其大体分为四部分:

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

<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li></ul><script>
    document.querySelector('ul').addEventListener("click", fn1, true)

    document.querySelector('ul').addEventListener("click", fn1, false)

    document.querySelector("li").addEventListener("click", fn1, true)

    function fn1() {
        console.log(this);		// 打印当前事件对象
        console.log(event.eventPhase);		// 打印
    }</script>

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

鼠标属性

键盘属性

IE属性

三、Event 方法

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

<a href="http://baidu.com">百度一下,你就知道</a>
<script>
	document.querySelector("a").onclick = function () {
		event.preventDefault();
		//	do something
	}
</script>

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

<ul>
	<li>不要触发 ul 的点击事件处理程序</li>
</ul>
<script>
	document.querySelector("ul").onclick = function () {
		alert("事件冒泡,触发 ul 的点击事件")
	}

	document.querySelector("li").onclick = function () {
		event.stopPropagation();
		// do something
	}
</script>

其他相关方法


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

四、模拟事件

4.1 模拟鼠标事件

  我们可以通过 createEvent() 方法可以创建一个新的 event 对象,借助 initMouseEvent() 方法来对这个鼠标事件对象的值进行初始化,该方法接受十五个参数,分别与鼠标事件中的各个属性一一对应,按照 typebubblescancelableviewdetailscreenXscreenYclientXclientYctrlKeyaltKeyshiftKey、、metaKeybuttonrelatedTarget 的顺序传入即可:

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 来对键盘事件对象的值进行初始化,该方法接收八个参数,分别于键盘事件对象中的各个属性一一对应,按照 typebubblescancelableviewkeylocationmodifiersrepeat的顺序传入即可。但在 firefox 中,需要按照 typebubblescancelableviewctrlKeyaltKeyshiftKey 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 模拟其他事件

  如果想要模拟其他事件,诸如 submitfocusHTML 和变动事件,则需要通过 MutationEvents 方法来创建事件,通过 initEvent 方法来进行初始化,按照typebubblescancelablerelatedNodepreValuenewValueattrNameattrChange的顺序传入参数。

<input type="text">

<script>
    var oInput = document.querySelector("input");
    oInput.addEventListener("focus", function () {
        this.style.background = "#ccc"
    })
    var event = document.createEvent("HTMLEvents");
    event.initEvent("focus", true, false);
    oInput.dispatchEvent(event);
</script>

4.4 自定义 DOM 事件

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

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 等浏览器事件对象的区别,针对下面四个属性,需要进行特殊处理:

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯