浏览器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 事件 是文档或浏览器窗口中发生的特定的交互瞬间.[ ...
随机推荐
- Python开发 標準內建方法 (未完代補)
abs(number) 絕對值 The abs() method takes a single argument: num - number whose absolute value is to ...
- Xamarin Android 下拉列表
<Spinner android:id="@+id/spinner" android:layout_width="wrap_content" androi ...
- 计算apk包的安装之后占用空间以及运行时占用内存
1.统计结果如下 计算apk安装占用空间大小方式 为了方式apk包运行时出现缓存数据等对空间计算造成影响.应该先进行安装,然后分别计算空间变化 所有apk包安装完毕后再运行 开启两个cmd窗口 第一个 ...
- 在C#中如何判断线程当前所处的状态
在C#中,线程对象Thread使用ThreadState属性指示线程状态,它是带Flags特性的枚举类型对象. ThreadState 为线程定义了一组所有可能的执行状态.一旦线程被创建,它就至少 ...
- bootstrap modal 点击头部移动
$(".modal").each(function(){ $(this).draggable({ handle: ".modal-header" // 只能点击 ...
- socket资源
http://www.360doc.com/content/13/1231/16/14919052_341525862.shtml Linux下基于socket多线程并发通信的实现 https://w ...
- SQL特殊comment语法
SQL 注释的特殊用法: /*!版本号 语句*/ 表示大于等于某个版本是,才执行相应的语句. 在版本为5.7.23的MySQL上做测试如下: 测试1 mysql> select 1 /*!507 ...
- 对中断interrupt的理解
一.中断 线程的几种状态:新建.就绪.运行.阻塞.死亡.参考:线程的几种状态转换 线程的可运行状态并不代表线程一定在运行(runnable != running ) . 大家都知道:所有现代桌面和服务 ...
- Failed to resolve: common Open File 导入项目问题
Failed to resolve: common Open File Warning:Configuration 'compile' is obsolete and has been replac ...
- MySQL SQL审核平台 inception+archer2.0(亲测)
docker run -d --privileged -v `pwd`/archer_data:/data -p 9306:3306 --name archer --hostname archer - ...