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 相关文章推荐
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
带左右箭头图片轮播的JS代码
Dec 18 Javascript
用jquery仿做发微博功能示例
Apr 18 Javascript
jQuery简单tab切换效果实现方法
Apr 08 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
JS时间特效最常用的三款
Aug 19 Javascript
javascript 用函数实现继承详解
May 28 Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 Javascript
JS 设置Cookie 有效期 检测cookie
Jun 15 Javascript
详解vue中使用express+fetch获取本地json文件
Oct 10 Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 Javascript
vue-cli4.5.x快速搭建项目
May 30 Vue.js
微信小程序实现下拉刷新动画
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/12/23 PHP
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
php读取der格式证书乱码解决方法
2015/06/22 PHP
WordPress中用于检索模版的相关PHP函数使用解析
2015/12/15 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
2013/08/02 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
深入浅出理解javaScript原型链
2015/05/09 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
2019/12/04 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
使用pandas读取文件的实现
2019/07/31 Python
Python 私有属性和私有方法应用场景分析
2020/06/19 Python
python用Configobj模块读取配置文件
2020/09/26 Python
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
如何强制垃圾回收
2015/10/06 面试题
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
销售代表求职自荐信
2013/10/01 职场文书
大专应届生个人的自我评价
2013/11/21 职场文书
电话销售经理岗位职责
2013/12/07 职场文书
教代会开幕词
2015/01/28 职场文书
篮球赛新闻稿
2015/07/17 职场文书
大学生党课心得体会
2016/01/07 职场文书