js事件触发操作实例分析


Posted in Javascript onJune 21, 2019

本文实例讲述了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>3water.com 事件触发</title>
  <meta charset="utf-8">
</head>
<body>
  <select id="sel">
    <option>中国</option>
    <option>美国</option>
    <option>日本</option>
    <option>韩国</option>
  </select>
  <hr>
  <div id="div" style="width:300px;height:150px;border:solid 1px red;"></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>

运行结果:

js事件触发操作实例分析

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

PS:关于javascript事件说明可参考本站javascript事件与功能说明大全:http://tools.3water.com/table/javascript_event

更多关于JavaScript相关内容可查看本站专题:《JavaScript事件相关操作与技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍
Apr 23 Javascript
Node.js开发之访问Redis数据库教程
Jan 14 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
jquery Deferred 快速解决异步回调的问题
Apr 05 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 Javascript
原生js实现简单的模态框示例
Sep 08 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
May 03 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
Jquery $.map使用方法实例详解
Sep 01 jQuery
微信小程序实现下拉刷新动画
Jun 21 #Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 #Javascript
Ajax请求时无法重定向的问题解决代码详解
Jun 21 #Javascript
vue配置文件实现代理v2版本的方法
Jun 21 #Javascript
微信小程序自定义多列选择器使用详解
Jun 21 #Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 #Javascript
Vue多环境代理配置方法思路详解
Jun 21 #Javascript
You might like
开发大型PHP项目的方法
2006/10/09 PHP
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
MacOS 安装 PHP的图片裁剪扩展Tclip
2015/03/25 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
javascript web对话框与弹出窗口
2009/02/22 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
对Angular中单向数据流的深入理解
2018/03/31 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
详解vue 组件注册
2020/11/20 Vue.js
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
简单介绍Python中的JSON使用
2015/04/28 Python
python通过ssh-powershell监控windows的方法
2015/06/02 Python
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
深入浅析python继承问题
2016/05/29 Python
Python实现扩展内置类型的方法分析
2017/10/16 Python
zookeeper python接口实例详解
2018/01/18 Python
Python删除n行后的其他行方法
2019/01/28 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
Python类成员继承重写的实现
2020/09/16 Python
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
英文请假条
2014/04/11 职场文书
法制宣传日活动总结
2014/04/29 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏
JS轻量级函数式编程实现XDM二
2022/06/16 Javascript