除用户人为交互触发事件外,用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. PythonStudy——第一阶段性测试

    1.Python解释器,在2.x和3.x上分别采用的是什么默认编码8 2.定义字符串变量时,单引号,双引号,三引号什么区别? 3.编程语言可以分为哪三类,特点都是什么 4.定义一个变量有三个特性, 5 ...

  2. Python中*args和**kwargs

    *args *args是可变的positional arguments列表 *args:将参数打包成元组(tuple)给函数调用 在函数中用 args 调用 **kwargs **kwargs是可变的 ...

  3. Docker Compose(八)

    Docker Compose 是Docker官方编排(Orchstration)项目之一,负责快速在集群中部署分布式应用.   Dockerfile可以让用户管理一个单独的应用容器:而Compose则 ...

  4. bvlc_reference_caffenet网络权值可视化

    一.网络结构 models/bvlc_reference_caffenet/deploy.prototxt 二.显示conv1的网络权值 clear; clc; close all; addpath( ...

  5. Azure SQL 数据库仓库Data Warehouse (4) 2018 TechSummit 动手实验营

    <Windows Azure Platform 系列文章目录> 上传一下之前在2018 TechSummit的动手实验营:Azure数据仓库PaaS项目架构规划与实战入门 包含PPT和Wo ...

  6. plot

    scatter import pandas as pd df_train=pd.read_excel(r"C:\Users\Liugengxin\Desktop\回归.xlsx") ...

  7. 右击菜单一键优化(增加新建office2003、新建reg和bat,删除新建公文包、新建wps、新建rar)

    右击菜单一键优化(增加新建office2003.新建reg和bat,删除新建公文包.新建wps.新建rar) Windows Registry Editor Version 5.00 [HKEY_CL ...

  8. ubuntu安装nginx及其默认目录结构

    一. 安装包安装 1.1 安装Nginx $sudo apt-get install nginx Ubuntu安装之后的文件结构大致为: 所有的配置文件都在/etc/nginx下,并且每个虚拟主机已经 ...

  9. python3学习笔记四(列表1)

    参考http://www.runoob.com/python3/python3-list.html 序列 python包含6种内建的序列:列表,元组,字符串,Unicode字符串,buffer对象和x ...

  10. centos 设置中文环境

    方法1: [hl@localhost ~]$ LANG=zh_CN.UTF-8 #只对当前shell有效,临时设置 [hl@localhost ~]$ ll 总用量 drwxrwxr-x. hl hl ...