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 checkbox 全选/反选及批量删除
Apr 28 Javascript
JS限制Textarea文本域字符个数的具体实现
Aug 02 Javascript
JQuery处理json与ajax返回JSON实例代码
Jan 03 Javascript
Javascript 赋值机制详解
Nov 23 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
jQuery实现 上升、下降、删除、添加一行代码
Mar 06 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
angular2 ng2-file-upload上传示例代码
Aug 23 Javascript
JS数组实现分类统计实例代码
Sep 30 Javascript
GOJS+VUE实现流程图效果
Dec 01 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 Javascript
微信小程序实现下拉刷新动画
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实现有趣的人品测试程序实例
2015/06/08 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
关于JS判断图片是否加载完成且获取图片宽度的方法
2013/04/09 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python 专题一 函数的基础知识
2017/03/16 Python
把pandas转换int型为str型的方法
2019/01/29 Python
对Python3中dict.keys()转换成list类型的方法详解
2019/02/03 Python
对Python3之方法的覆盖与super函数详解
2019/06/26 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
关于安全的演讲稿
2014/05/09 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
婚前保证书范文
2015/02/28 职场文书
遗嘱格式范本
2015/08/07 职场文书
2016大学生党校学习心得体会
2016/01/06 职场文书
python 模块重载的五种方法
2021/04/24 Python
浅析Python实现DFA算法
2021/06/26 Python
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫