浏览器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 事件 是文档或浏览器窗口中发生的特定的交互瞬间.[ ...
随机推荐
- [Java] Thread -- 避免Race Condition (Synchronized)
public class TestRaceCondition implements Runnable{ public static int counter = 0; public static voi ...
- pandas Dataframe 取某行
In [1]: df = DataFrame(randn(5,2),index=range(0,10,2),columns=list('AB')) In [2]: df Out[2]: A B 0 1 ...
- grpc源码分析之域名解析
环境: win7_x64,VS2015.grpc_1.3.1 场景: 在客户端中使用grpc连接服务器,在多次输入非法的地址后,再次输入正确的地址连出现连接超时的现象.侯捷先生说过“源码面前,了无秘密 ...
- PHP如何判断一个数组是一维还是多维
什么叫多维数组呢?多维数组,本质上是以数组作为数组元素的数组. 二维数组又称为矩阵,一个数组的元素如果是一维数组,那么我们就称这个数组是二维数组. 怎么判断一个数组是否是一维数组呢?通过count() ...
- 查看进程在CPU和内存占用的命令
1.使用top命令 输入M表示按内存排序,也就是RES这一列从大到小排序了 它占用了3.3%的内存,用134568除以4030416结果就是3.3左右 也就是说 总物理内存是3.84GB RES这一列 ...
- 第二章 JavaScript文档(上)
JavaScript 1.JavaScript简介 起源 在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成.Netscape在最初将其脚本语言命名 ...
- 《Linux内核原理与设计》第五周作业
使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用 方法一:使用库函数API在屏幕上显示进程的ID 先在实验楼中打开XFCE,在目录下输入指令: vi getpid.c;新建并打开get ...
- 3.2 MathType插入竖省略号
法1:鼠标单击位于上方菜单栏下面的空格和椭圆模版,然后在下拉模版下选择垂直省略号,如下图所示. 按照上面的操作选择垂直省略号模版后,这样在下面的编辑区域就会打出该符号了. 法2:在插入符号下查找 如果 ...
- 如何将maven的jar项目简单快速的转变成war项目
第一种方法: 首先在pom文件中的version标签下下方加入 <packaging>war</packaging>标签 然后右键项目 Java EE Tools 选择 Gen ...
- servlet-jsp-EL 表达式
jsp--EL表达式 jsp表达式<%= %>用于向页面中输出一个对象.jsp2.0时在页面中不允许出现jsp表达式和脚本片段,于是使用EL表达式来代替jsp表达式,标签代替脚本片段 基本 ...