除用户人为交互触发事件外,用js脚本触发事件的一般流程为

  1. 创建事件 var e = Event('event_name', {key: value, ...})
  2. 分发事件到 event.target
  3. 触发事件处理函数 EventHandler

示例

<select >
<option value="all" selected>all</option>
<option value="active">active</option>
<option value="completed">completed</option>
</select>
<script>
let select = document.getElementsByTagName('select')[0];
select.onchange = handleChange;
function handleChange(e){
console.log('changed');
}
</script>

如上脚本中的 change 事件脚本触发的方式如下:

var e = Event('change', {bubbles: true});
select.options[1].dispatchEvent(e);

浏览器DOM事件触发的更多相关文章

  1. 针对focus和blur的Dom事件触发顺序

    Dom事件触发顺序,拿文本框举例: 它会先触发focus事件,之后才会触发在有交点之后才能触发的一些如 click  change 等事件(但如果有mousedown则先执行). 而相对于blur而言 ...

  2. 面试整理之DOM事件阶段

    因为快面试了,打开<JavaScript高级程序设计>,对DOM事件进行整理了下 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可 ...

  3. 整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件

    整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的 ...

  4. js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象

    事件对象    在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...

  5. event.target 属性返回哪个 DOM 元素触发了事件。

    <ul> <li>list <strong>item 1</strong></li> <li><span>list ...

  6. DOM事件监听和触发

    EventTargetAPI定义了DOM事件(mouse事件等)的监听和触发方法,所有的DOM节点都部署了这个接口. 这个接口有三个方法:addEventListener, removeEventLi ...

  7. DOM 事件深入浅出(二)

    在DOM事件深入浅出(一)中,我主要给大家讲解了不同DOM级别下的事件处理程序,同时介绍了事件冒泡和捕获的触发原理和方法.本文将继续介绍DOM事件中的知识点,主要侧重于DOM事件中Event对象的属性 ...

  8. DOM 事件深入浅出(一)

    在项目开发时,我们时常需要考虑用户在使用产品时产生的各种各样的交互事件,比如鼠标点击事件.敲击键盘事件等.这样的事件行为都是前端DOM事件的组成部分,不同的DOM事件会有不同的触发条件和触发效果.本文 ...

  9. DOM事件

    在慕课网上学习了DOM事件探秘课程,特此整理了一下笔记. 慕课网DOM事件探秘课程地址:http://www.imooc.com/learn/138 事件 是文档或浏览器窗口中发生的特定的交互瞬间.[ ...

随机推荐

  1. GitHub命令更新

    github命令 1.git clone url 从远程master拉代码 2.进入目录 3.拉下来之后,git branch,查看本地分支是否为master,不是的话git checkout mas ...

  2. [转]Java反射机制详解

    目录 1反射机制是什么 2反射机制能做什么 3反射机制的相关API ·通过一个对象获得完整的包名和类名 ·实例化Class类对象 ·获取一个对象的父类与实现的接口 ·获取某个类中的全部构造函数 - 详 ...

  3. InnoDB引擎体系架构

    InnoDB引擎架构介绍 innodb存储引擎的体系架构,可简单划分成三层: 数据文件 :磁盘上的数据文件 内存池:缓存磁盘上的数据,方便读取,同时在对磁盘文件数据修改之前在这里缓存,然后按一定规刷新 ...

  4. 解决scipy无法正确安装到virtualenv中的问题

    一 . pip的基本操作 安装包: pip/pip3 install ***pkg 卸载包: pip/pip3 uninstall ***pkg 查看已经安装的某个包的信息: pip/pip3 sho ...

  5. solr6.4.1 搜索引擎(1)启动eclipse启动

    solr是一个java写的搜索引擎,所以支持java方式的eclipse调试. 本篇文章使用solr版本为6.4.1 一. 环境 solr 下载地址 http://archive.apache.org ...

  6. 在 iOS 上通过 802.11k、802.11r 和 802.11v 实现 Wi-Fi 网络漫游

    原文: https://support.apple.com/zh-cn/HT202628 了解 iOS 如何使用 Wi-Fi 网络标准提升客户端漫游性能.   iOS 支持在企业级 Wi-Fi 网络上 ...

  7. 残差神经网络与inception-resnet

    一.基本概念 Residual Connection: 本质是“短路连接” 如下图阴影部分,通过增加shortcuts,加速训练,从而可以训练出更深的模型(I.R.v2 > Inception ...

  8. 第一章 FFmpeg简介

    1.1 FFmpeg的定义 Fast Forward Moving Picture Experts Group(动态图像专家组) 1.2 FFmpeg的历史 1.3 FFmpeg的基本组成 1 FFm ...

  9. postgresql数据库3种程序(rule,trigger ,FUNCTION )

    1. CREATE [ OR REPLACE ] RULE name AS ON event TO table_name [ WHERE condition ] DO [ ALSO | INSTEAD ...

  10. android 开发 View _14 MotionEvent和事件处理详解,与实践自定义滑动条View

    转载https://blog.csdn.net/huaxun66/article/details/52352469 MotionEvent MotionEvent对象是与用户触摸相关的时间序列,该序列 ...