浏览器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 事件 是文档或浏览器窗口中发生的特定的交互瞬间.[ ...
随机推荐
- excel 表格粘贴到word 显示不完整
左上角,十字点,右键,取消固定宽度即可:
- jenkins 结合 jmeter 的报告篇
背景:实现jmeter每30分钟执行一次,运行系统中所有接口或者性能脚本或者后续更可以由系统部署来触发建构执行 1.配置jmeter测试环境,注意修改Jmeter的bin目录下jmeter.prope ...
- day 41 标准文档流 浮动
一.标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 标准文档 ...
- saltstack基础知识
saltstack简介 saltstack基于python开发的C/S架构的配置管理工具,分为服务器端salt-master和客户端salt-minion.并且支持浩称最快的ZeroMQ消息队列机制, ...
- PhpAdmin支持登录远程数据库服务器
转载:http://www.cnblogs.com/andydao/p/4227312.html 该数据,百度搜不到,Google1分钟搞定 一.如何设置phpMyAdmin自动登录? 首先在根目录找 ...
- Struts1 不能进入Action,页面空白问题解决
http://blog.csdn.net/barry_liao/article/details/35592935 Struts1 不能进入Action,页面空白问题解决 标签: Struts1Acti ...
- [蓝桥杯]ALGO-187.算法训练_P0502
编写一个程序,读入一组整数,这组整数是按照从小到大的顺序排列的,它们的个数N也是由用户输入的,最多不会超过20.然后程序将对这个数组进行统计,把出现次数最多的那个数组元素值打印出来.如果有两个元素值出 ...
- activate-power-mode效果实验(未完全成功)
原产地: Atom 支持版本一览 https://github.com/codeinthedark/awesome-power-mode 1.安装Atom:[ AtomSetup-x64.exe] 百 ...
- for each in for in 与for of
for each in for each in是作为E4X标准的一部分在javascript 1.6中发布的,而它不是ECMAScript标准的一部分. 这将意味着存在各种浏览器的兼容性问题.for ...
- normalization正规化
用到sklearn模块 from sklearn import preprocessing用preprocessing.scale正规化 print(preprocessing.scale(a))