除用户人为交互触发事件外,用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. 使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development、production)

    使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development.production) --mode 指定环境模式 ...

  2. Linux whereis命令详解

    Linux whereis命令 Linux whereis命令用于查找文件. 该指令会在特定目录中查找符合条件的文件.这些文件应属于原始代码.二进制文件,或是帮助文件. 该指令只能用于查找二进制文件. ...

  3. python虚拟环境virtualenv简介

    参考网站: https://realpython.com/python-virtual-environments-a-primer/ 一. 创建一个新的虚拟环境 # Python 2: $ virtu ...

  4. oracle12建立非C##用户并且导入数据

    由于要导入dmp文件,所以想建立和oracle11一样的用户,折腾了半天,记录一下过程: 1.进入sqlplus,建立用户和分配权限 cmd>sqlplus /nolog SQL>conn ...

  5. dns缓存刷新时间是多久?dns本地缓存时间介绍

    原文: http://www.winwin7.com/JC/4742.html dns缓存刷新时间是多久?一般来说,我们只知道DNS解析是互联网绝大多数应用的实际寻址方式,在我们打开某站点,DNS返回 ...

  6. 知识点:图说 Mysql 权限管理

    图: #授权表 user #该表放行的权限,针对:所有数据,所有库下所有表,以及表下的所有字段 db #该表放行的权限,针对:某一数据库,该数据库下的所有表,以及表下的所有字段 tables_priv ...

  7. java多线程中并发集合和同步集合有哪些?区别是什么?

    java多线程中并发集合和同步集合有哪些? hashmap 是非同步的,故在多线程中是线程不安全的,不过也可以使用 同步类来进行包装: 包装类Collections.synchronizedMap() ...

  8. Xilinx------BUFG,IBUFG,BUFGP,IBUFGDS等含义以及使用

    转载-----BUFG,IBUFG,BUFGP,IBUFGDS等含义以及使用   目前,大型设计一般推荐使用同步时序电路.同步时序电路基于时钟触发沿设计,对时钟的周期.占空比.延时和抖动提出了更高的要 ...

  9. Using a ScrollView - RN4

    使用滚动条. 1. import import {ScrollView} from "react-native"; 2. Using <ScrollView> ... ...

  10. javaee_正则表达式基础和常用表达式

    正则基础: 1.1 -字符集 [ ] : 代表单个字符. [^] : 除了该字符外的所有单个字符. [a-zA-Z] : [a-z] || [A-Z]. [a-d[m-p]] :[a, d] || [ ...