浏览器DOM事件触发
除用户人为交互触发事件外,用js脚本触发事件的一般流程为
- 创建事件
var e = Event('event_name', {key: value, ...}) - 分发事件到
event.target - 触发事件处理函数
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事件触发的更多相关文章
- 针对focus和blur的Dom事件触发顺序
Dom事件触发顺序,拿文本框举例: 它会先触发focus事件,之后才会触发在有交点之后才能触发的一些如 click change 等事件(但如果有mousedown则先执行). 而相对于blur而言 ...
- 面试整理之DOM事件阶段
因为快面试了,打开<JavaScript高级程序设计>,对DOM事件进行整理了下 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可 ...
- 整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件
整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的 ...
- js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象
事件对象 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...
- event.target 属性返回哪个 DOM 元素触发了事件。
<ul> <li>list <strong>item 1</strong></li> <li><span>list ...
- DOM事件监听和触发
EventTargetAPI定义了DOM事件(mouse事件等)的监听和触发方法,所有的DOM节点都部署了这个接口. 这个接口有三个方法:addEventListener, removeEventLi ...
- DOM 事件深入浅出(二)
在DOM事件深入浅出(一)中,我主要给大家讲解了不同DOM级别下的事件处理程序,同时介绍了事件冒泡和捕获的触发原理和方法.本文将继续介绍DOM事件中的知识点,主要侧重于DOM事件中Event对象的属性 ...
- DOM 事件深入浅出(一)
在项目开发时,我们时常需要考虑用户在使用产品时产生的各种各样的交互事件,比如鼠标点击事件.敲击键盘事件等.这样的事件行为都是前端DOM事件的组成部分,不同的DOM事件会有不同的触发条件和触发效果.本文 ...
- DOM事件
在慕课网上学习了DOM事件探秘课程,特此整理了一下笔记. 慕课网DOM事件探秘课程地址:http://www.imooc.com/learn/138 事件 是文档或浏览器窗口中发生的特定的交互瞬间.[ ...
随机推荐
- 阻塞I/O、非阻塞I/O和I/O多路复用
一.阻塞I/O 首先,要从你常用的IO操作谈起,比如read和write,通常IO操作都是阻塞I/O的,也就是说当你调用read时,如果没有数据收到,那么线程或者进程就会被挂起,直到收到数据.阻塞的意 ...
- 使用tcpdump测试反向代理和lvs的nat区别
关于反向代理,一个请求过来,实际反向代理服务器要和两个对象做3次握手 客户端到反向代理服务器,是一个3次握手 反向代理服务器请求后端web服务器,是一个3次握手 lvs的nat和反向代理不同. lvs ...
- bootstrap modal 点击头部移动
$(".modal").each(function(){ $(this).draggable({ handle: ".modal-header" // 只能点击 ...
- Day 09 函数基础
函数初级 简介 # 函数是一系列代码的集合,用来完成某项特定的功能 优点 '''1. 避免代码的冗余2. 让程序代码结构更加清晰3. 让代码具有复用性,便于维护''' 函数四部分 '''1. 函数名: ...
- DNS主从配置详解
实验环境 主服务器:192.168.138.200 从服务器:192.168.138.201 bind安装 安装很简单,执行以下命令即可: yum install -y bind 先看一下bind的版 ...
- 算法实践--最小生成树(Prim算法)
前一篇介绍了一种最小生成树的算法--Kruskal算法,本篇介绍另一种Prim算法 算法描述 定义V为端点的集合,A为最小生成树,初始为空.对于每个端点v初始的Key[v]=∞, Parent[v]= ...
- C#获取当前路径的七种方法
//1.获取模块的完整路径. string path1 = System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName; // ...
- JQuery miniui使用小记
1.renderer="onActionRenderer" 如我们需要在一行数据时加上删除操作时,就需要在每行上加上“删除”按钮,以下为实现代码: 列加载时主要的属性
- 实战ELK(5) Logstash 入门
Logstash 是一个开源的数据收集引擎,它具有备实时数据传输能力.它可以统一过滤来自不同源的数据,并按照开发者的制定的规范输出到目的地. 一.原理 Logstash 通过管道进行运作,管道有两个必 ...
- 1.微信小程序里如何设置当地时间?
方法一: 1.效果图 2.wxml code: <!--pages/index/index.wxml--> <text>当前时间:{{time}}</text> & ...