浏览器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多线程】队列系统之PriorityBlockingQueue源码
一.二叉堆 如题,二叉堆是一种基础数据结构 事实上支持的操作也是挺有限的(相对于其他数据结构而言),也就插入,查询,删除这一类 对了这篇文章中讲到的堆都是二叉堆,而不是斜堆,左偏树,斐波那契堆什么的 ...
- 集合总结三(HashMap的实现原理)
一.概述 二话不说,一上来就点开源码,发现里面有一段介绍如下: Hash table based implementation of the Map interface. This implement ...
- Python小练习(二)
按照下面的要求实现对列表的操作: 1)产生一个列表,其中有40个元素,每个元素是0到100的一个随机整数 2)如果这个列表中的数据代表着某个班级40人的分数,请计算成绩低于平均 ...
- ubuntu-docker入门到放弃(八)创建支持SSH服务的镜像
我们知道进入docker容器可以使用attach.exec等命令来操作和管理,但是如果需要远程登录并管理容器,就需要ssh服务的支持了. 1.基于commit命令创建 docker提供了commit命 ...
- 轻量应用服务器 访问jsp页面就直接下载的问题
本地localhost 运行可以 用自己的ip不行.出现这个问题实质原因就是Tomcat服务器就没有起到作用,运行不了jsp文件.这个是核心.去排查错误!网上查了好几天了根本没有解决我的我的问题. 1 ...
- Android中的Sqlite中的onCreate方法和onUpgrade方法的执行时机
1.今天在做数据库升级的时候,遇到一个问题,就是onCreate方法和onUpgrade方法的执行时机的问题,这个当时在操作的时候,没有弄清楚,很是迷糊,后来看了相关的博客由于转发受限所以copy了一 ...
- Percona XtraDB Cluster Strict Mode(PXC 5.7)
在Percona XtraDB Cluster集群架构中,为了避免多主节点导致的数据异常,或者说一些不被支持的特性引发的数据不一致的情形,PXC集群可以通过配置pxc_strict_mode这个变量来 ...
- 两个有序数组中的中位数以及求第k个最小数的值
解法参考 <[分步详解]两个有序数组中的中位数和Top K问题> https://blog.csdn.net/hk2291976/article/details/51107778 里面求中 ...
- 二、CSS选择器
1.CSS派生选择器 概念:通过依据元素在其位置的上下文关系来定义样式. 实例: <!--index.html--> <!DOCTYPE html> <html lang ...
- Python笔记:深浅拷贝
1.赋值操作两者是同一数据,其内存地址一样.适用于list.dict.set数据类型. 2.copy是浅拷贝,只能拷贝嵌套数据的第一层数据,嵌套的数据与赋值操作相同,其内存地址一样,当一个被更改,其他 ...