js事件触发操作实例分析
- 更新时间：2023-01-09 09:20:21
- 编辑：任初珍
本文实例讲述了js事件触发操作。分享给大家供大家参考，具体如下：
click包含了（mousedown,mouseup）叫做MouseEvents；
keydown,keypress,keyup之流叫做UIEvents;
focus，load,scroll，submit之流叫做HtmlEvents。
MutationEvents，突变事件，往往用于对DOM对象的事件监听。
DOMNodeRemoved：当Node被删除时
DOMAttrModified：元素的属性发生改变时
我们来学一学事件触发
var e = document.createEvent("HtmlEvents");
e.initEvents("事件名",true,true);
元素对象.dispatchEvent(e);
createEvent:创建事件
initEvent：初始化事件
dispatchEvent：调度、发出事件
<!DOCTYPE html>
<html>
<head>
<title>www.jb51.net 事件触发</title>
<meta charset="utf-8">
</head>
<body>
<select id="sel">
<option>中国</option>
<option>美国</option>
<option>日本</option>
<option>韩国</option>
</select>
<hr>
<div id="div" ></div>
<script type="text/javascript">
var sel = document.getElementById("sel");
var div = document.getElementById("div");
// 设置change事件后处理函数
sel.onchange = function(){
div.innerHTML = sel.options[sel.selectedIndex].text; //拿到选中的option的文本填充到div里
}
// 触发change事件的函数
function dispatchChange(){
var changeEvent = document.createEvent("HtmlEvents");
changeEvent.initEvent("change",true,true);
sel.dispatchEvent(changeEvent);
}
dispatchChange();
</script>
</body>
</html>
运行结果：
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
PS：关于javascript事件说明可参考本站javascript事件与功能说明大全：http://tools.jb51.net/table/javascript_event
更多关于JavaScript相关内容可查看本站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关教程
-
利用JavaScript对中文进行排序的实例代码
排序是我们在日常开发中经常遇到的一个功能，下面这篇文章主要给大家介绍了利用JavaScript对中文（汉字）进行排序的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学
发布时间：2019-11-29
-
深入理解JavaScript中双向数据绑定
这篇文章主要为大家详细介绍了JavaScript中双向数据绑定，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
发布时间：2020-02-11
-
JavaScript实现百度搜索框的过程
这篇文章主要为大家详细介绍了基于JavaScript实现百度搜索框效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
发布时间：2020-07-24
-
JavaScript的6种继承方式总结
继承是面向对象编程中又一非常重要的概念，JavaScript支持实现继承，不支持接口继承，实现继承主要依靠原型链来实现的
发布时间：2019-12-17
-
JavaScript Canvas绘制圆形时钟效果代码实例
这篇文章主要为大家详细介绍了JavaScript Canvas绘制圆形时钟效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
发布时间：2020-03-17
-
实例解析JavaScript中BOM对象原理与用法
这篇文章主要介绍了JavaScript中BOM对象原理与用法,,结合实例形式分析了javascript中BOM浏览器对象模型相关概念、原理、用法及相关操作注意事项,需要的朋友可以参考下
发布时间：2020-02-04
-
javascript面向对象与原型详解
为了说明 JavaScript 是一门彻底的面向对象的语言，首先有必要从面向对象的概念着手 , 探讨一下面向对象中的几个概念：1.一切事物皆对象，2.对象具有封装和继承特性，3.对象与对象之间使用消
发布时间：2020-04-26
