js事件触发操作实例分析

 更新时间:2019-06-25 03:00:48   作者:佚名   我要评论(0)

本文实例讲述了js事件触发操作。分享给大家供大家参考,具体如下:
click包含了(mousedown,mouseup)叫做MouseEvents;

keydown,keypress,keyup之流叫做UI

本文实例讲述了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" 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>

运行结果:

感兴趣的朋友可以使用在线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 动态改变onclick事件触发函数代码
  • javascript的事件触发器介绍的实现
  • js活用事件触发对象动作
  • javascript下对于事件、事件流、事件触发的顺序随便说说
  • javascript 不让鼠标事件触发
  • js实现浏览器窗口大小被改变时触发事件的方法
  • js 触发select onchange事件代码
  • js触发onchange事件的方法说明
  • js获取事件源及触发该事件的对象
  • 代码触发js事件(click、change)示例应用

相关文章

  • js事件触发操作实例分析

    js事件触发操作实例分析

    本文实例讲述了js事件触发操作。分享给大家供大家参考,具体如下: click包含了(mousedown,mouseup)叫做MouseEvents; keydown,keypress,keyup之流叫做UI
    2019-06-25
  • JavaScript  正则表达式备忘单实例代码

    JavaScript 正则表达式备忘单实例代码

    正则表达式或“regex”用于匹配字符串的各个部分 下面是我创建正则表达式的备忘单。 匹配正则 使用 .test() 方法 let testString = "My test string"; let
    2019-06-25
  • 深入浅析正则表达式 捕获组

    深入浅析正则表达式 捕获组

    捕获组(capturing group)是正则表达式里比较常用,也是比较重要的概念,我个人觉得掌握这部分的知识是非常重要的。 这篇文章内容不会很深入,但是尽量做
    2019-06-25
  • js中值引用和地址引用实例分析

    js中值引用和地址引用实例分析

    本文实例讲述了js中值引用和地址引用。分享给大家供大家参考,具体如下: js中任何事务都是对象。包括基本数据类型(undefined,boolean,number,string,null)
    2019-06-25
  • 10种JavaScript最常见的错误(小结)

    10种JavaScript最常见的错误(小结)

    前言 查看了数千个项目后,发现了 10 个最常见的 JavaScript 错误。我们会告诉你什么原因导致了这些错误,以及如何防止这些错误发生。如果你能够避免落入这些
    2019-06-25
  • JavaScript迭代器的含义及用法

    JavaScript迭代器的含义及用法

    什么是迭代器 迭代器就是为实现对不同集合进行统一遍历操作的一种机制,只要给需要遍历的数据结构部署Iterator接口,通过调用该接口,或者使用消耗该接口的
    2019-06-25
  • Javascript正则表达式验证账号、手机号、电话和邮箱的合法性

    Javascript正则表达式验证账号、手机号、电话和邮箱的合法性

    正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript中,正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法, 以及 String 的 match、
    2019-06-25
  • 正则表达式使用示例详解

    正则表达式使用示例详解

    正则表达式(Regular Expression)是一种文本模式,包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为"元字符")。 正则表达式使用单个字符串来描述、匹
    2019-06-25
  • 一个正则表达式导致CPU 利用率居高不下

    一个正则表达式导致CPU 利用率居高不下

    前几天线上一个项目监控信息突然报告异常,上到机器上后查看相关资源的使用情况,发现 CPU 利用率将近 100%。通过 Java 自带的线程 Dump 工具,我们导出了出问
    2019-06-25
  • js类的继承定义与用法分析

    js类的继承定义与用法分析

    本文实例讲述了js类的继承定义与用法。分享给大家供大家参考,具体如下: 如何实现类的继承呢? 有如下2个构造函数: function PeopleClass(){ this.type
    2019-06-25

最新评论