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 相关文章推荐
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
Angular实现预加载延迟模块的示例
Oct 12 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
vue非父子组件通信问题及解决方法
Jun 11 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
Aug 25 Javascript
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
vue+elementUI实现表格列的显示与隐藏
Apr 13 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/11/19 PHP
php pack与unpack 摸板字符字符含义
2009/10/29 PHP
php实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
用于table内容排序
2006/07/21 Javascript
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
js 判断图片是否加载完以及实现图片的预下载
2014/08/14 Javascript
js判断鼠标左、中、右键哪个被点击的方法
2015/01/27 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
JS实现的缓冲运动效果示例
2018/04/30 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
关于Python中的向量相加和numpy中的向量相加效率对比
2019/08/26 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
python numpy数组中的复制知识解析
2020/02/03 Python
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
党员干部承诺书
2014/03/25 职场文书
法学自荐信
2014/06/20 职场文书
对外汉语专业大学生职业生涯规划范文
2014/09/13 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
Java使用Unsafe类的示例详解
2021/09/25 Java/Android