除用户人为交互触发事件外,用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. Python开发 標準內建方法 (未完代補)

    abs(number)  絕對值  The abs() method takes a single argument: num - number whose absolute value is to ...

  2. Xamarin Android 下拉列表

    <Spinner android:id="@+id/spinner" android:layout_width="wrap_content" androi ...

  3. 计算apk包的安装之后占用空间以及运行时占用内存

    1.统计结果如下 计算apk安装占用空间大小方式 为了方式apk包运行时出现缓存数据等对空间计算造成影响.应该先进行安装,然后分别计算空间变化 所有apk包安装完毕后再运行 开启两个cmd窗口 第一个 ...

  4. 在C#中如何判断线程当前所处的状态

    在C#中,线程对象Thread使用ThreadState属性指示线程状态,它是带Flags特性的枚举类型对象.   ThreadState 为线程定义了一组所有可能的执行状态.一旦线程被创建,它就至少 ...

  5. bootstrap modal 点击头部移动

    $(".modal").each(function(){ $(this).draggable({ handle: ".modal-header" // 只能点击 ...

  6. socket资源

    http://www.360doc.com/content/13/1231/16/14919052_341525862.shtml Linux下基于socket多线程并发通信的实现 https://w ...

  7. SQL特殊comment语法

    SQL 注释的特殊用法: /*!版本号 语句*/ 表示大于等于某个版本是,才执行相应的语句. 在版本为5.7.23的MySQL上做测试如下: 测试1 mysql> select 1 /*!507 ...

  8. 对中断interrupt的理解

    一.中断 线程的几种状态:新建.就绪.运行.阻塞.死亡.参考:线程的几种状态转换 线程的可运行状态并不代表线程一定在运行(runnable != running ) . 大家都知道:所有现代桌面和服务 ...

  9. Failed to resolve: common Open File 导入项目问题

    Failed to resolve: common Open File  Warning:Configuration 'compile' is obsolete and has been replac ...

  10. MySQL SQL审核平台 inception+archer2.0(亲测)

    docker run -d --privileged -v `pwd`/archer_data:/data -p 9306:3306 --name archer --hostname archer - ...