除用户人为交互触发事件外,用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. web前端常用代码于面试等资源

    https://www.cnblogs.com/moqiutao/p/4766146.html

  2. 关于java做题时需要注意的事项

    1.要熟悉eclipse的使用 2.用java提交时只能有一个public class 且类名只能为Main 3.提交时不能提交包名 4.提交时要将引入的包一起提交 5.虽然java提供了很多的函数, ...

  3. django CBV基于类视图简单实例

    URLS: from django.contrib import admin from django.urls import path from cmbd import views urlpatter ...

  4. ThreadLocal的学习

    一 用法ThreadLocal用于保存某个线程共享变量:对于同一个static ThreadLocal,不同线程只能从中get,set,remove自己的变量,而不会影响其他线程的变量.1.Threa ...

  5. Bootice1.34版本把grub4dos0.46a写入硬盘MBR失败一个例子

    Bootice1.34版本把grub4dos0.46a写入硬盘MBR失败一个例子         一个同事的台式机,BIOS启动,500GB硬盘,分了四个MBR分区,C盘是激活的主分区,第二个分区50 ...

  6. springboot+mockito 异常解决方案

    系统启动的异常日志如下 javax.net.ssl.* java.lang.IllegalStateException: Failed to load ApplicationContext at or ...

  7. python3学习笔记六(元组)

    元组 创建空元组 tup1 = () #空元组print(type(tup1))print(tup1) tup2 = (10)tup3 = (10,)print(type(tup2)) #不加逗号,类 ...

  8. VMware Workstation 11 搭建windows server 2012 之sql server 2012集群常见问题整理

    1.windows server 2012内置支持iSCSI发起程序无需额外安装,iSCSI Software Target 可作为“文件和存储服务”角色下的内置功能使用 2.拷贝虚拟机的文件加入域时 ...

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

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

  10. REST framwork之解析器

    一 我们首先要知道解析器是什么以及他的功能: REST framework 包含许多内置的解析器类,允许接受各种媒体类型(media types)的请求.还支持自定义解析器,这使你可以灵活地设计 AP ...