js 自定義event
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event對象敘述 自定義事件CustomEvent</title>
</head>
<body>
<!-- 描述：事件发生以后，会产生一个事件对象，作为参数传给监听函数。浏览器原生提供一个Event对象，
所有的事件都是这个对象的实例，或者说继承了Event.prototype对象。
點擊->var clickEvent = new Event('click') ->存在addEventListener監聽函數->執行監聽函數
將clickEvent對象作爲參數傳遞過去
-->
<!--
var eve = new Event('look',{
"bubbles":false,
"cancelable":false
});
document.dispatchEvent(eve); //document調用 Event是dom下的一部分
-->
<div>父div
<h1>1111111111111</h1>
</div>
</body>
<script>
var eve = new CustomEvent('look',{
"bubbles":false,
"cancelable":false
}); var h1=document.querySelector("h1");
var div1 =document.querySelector("div");
h1.addEventListener('look',function(ev){
console.info('user defined event happen');
var bubble=ev.bubbles;
console.error(bubble)//false 非冒泡類型
},false)
// div1.addEventListener('look',function(){
// console.error("parent element div attach")
// },true)//useCapture 情況下執行 且先于h1執行 div1.addEventListener('look',function(){
console.error("parent element div attach")
},false)//useCapture 為false 冒泡情況下才執行 --->結果:由於h1的bubbles=false 不冒泡 因此div1的事件不觸發
h1.dispatchEvent(eve);//user defined event happen
//手動觸發事件執行 </script>
</html>
自定義事件傳參數
var myEvent = new CustomEvent('myevent', {
detail: {
foo: 'bar'
},
bubbles: true,
cancelable: false
});
el.addEventListener('myevent', function (event) {
console.log('Hello ' + event.detail.foo);
});
el.dispatchEvent(myEvent);
js 自定義event的更多相关文章
- #HTML：無序、有序與定義清單
#HTML:無序.有序與定義清單 Maplewing 于 星期六, 12/10/2013 - 09:48 提交 清單在網頁中是很常使用到的東西,故多少還是要了解一下.在HTML中有三種不太一樣的清單, ...
- Node.js 事件循环（Event Loop）介绍
Node.js 事件循环(Event Loop)介绍 JavaScript是一种单线程运行但又绝不会阻塞的语言,其实现非阻塞的关键是“事件循环”和“回调机制”.Node.js在JavaScript的基 ...
- Q郵箱轉移自定義目錄中的郵件
1.之前在Q郵箱上建立了許多規則和收件箱,現在想統一用Mac上的郵局管理 2.Mac上會同步對應郵箱的自定義目錄,此時這些目錄便十分多餘礙眼 3.Q郵箱單頁顯示郵件數量上限是100,這意味著手動轉移十 ...
- 可以支持jQuery1.10.1 的 fancybox 1.3.4, 並現在type為Ajax時，也可以定義窗口的大小。
官網上的 fancybox 1.3.4 太老了,不支持jQuery1.10.1,改動了一下源碼,現在可以支持了. type為Ajax時,也可以定義窗口的大小. $("#ajaxlink&qu ...
- 一句JS搞定只允许输入数字和字母
一句JS搞定输入框只允许用户输入数字和字母类型的内容,对象是input输入框,当然也可以其它对象,只不过input输入框用的频率非常高.一句代码,不信么?那就看下边代码: <INPUT clas ...
- Linux Ubuntu 虛擬機系統自定義桌面分辨率且重啓後保持不變
我用 VMware Workstation 12 Pro 安裝的 Ubuntu MATE Desktop Environment 1.12.1,發現安裝後沒有需要的分辨率,於是安裝 VMware To ...
- JavaScript -- 时光流逝（八）：js中的事件Event的使用
JavaScript -- 知识点回顾篇(八):js中的事件Event的使用 事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行. (1) onabort : onabort 事件会在图像 ...
- vue自定義指令
自定義指令可以允許代碼複用, 全局自定義指令 vue.directive('指令名',{鉤子函數:指令函數}) 局部自定義指令: vue({ directives:{指令名:{鉤子函數:指令函數} } ...
- dataTable.NET的column index的不同定義
dataTable.NET是一個jQuery的plug in 第三方的library, 用來實現web page中table的interaction controls, 另外最近有在用的還有Teler ...
- Neo4j中實現自定義中文全文索引
資料庫檢索效率時,一般首要優化途徑是從索引入手,然後根據需求再考慮更復雜的負載均衡.讀寫分離和分散式水平/垂直分庫/表等手段:索引通過資訊冗餘來提高檢索效率,其以空間換時間並會降低資料寫入的效率,因此 ...
随机推荐
- HGAME2023_WP_WEEK2
Git Leakage Githack一波带走,下载得到flag v2board 搜索得知V2Board存在越权漏洞,随便注册个账号拿到authorization 访问/api/v1/admin/us ...
- 「CEOI2019」魔法树
\(\text{Solution}\) 设 \(f_{x,i}\) 表示以 \(x\) 为根的子树 \(i\) 天后的最大收益 那么 \(f_{x,i} = \max(f_{x,i-1},w_x [d ...
- [NOIP2018 提高组] 保卫王国
题解 两只 \(\log\) 的动态 \(dp\) ! 相比标算倍增 动态 \(dp\) 既实用又好理解 \(Code\) #include<cstdio> #include<ios ...
- Vulhub 漏洞学习之：Adobe ColdFusion
Vulhub 漏洞学习之:Adobe ColdFusion 目录 Vulhub 漏洞学习之:Adobe ColdFusion 1 Adobe ColdFusion 文件读取漏洞(CVE-2010-28 ...
- Gateway集成Netty服务
目录 一.Netty简介 二.Netty入门案例 1.服务端启动 2.通道初始化 3.自定义处理器 4.测试请求 三.Gateway集成 1.依赖层级 2.自动化配置 四.配置加载 1.基础配置 2. ...
- sqlserver 行转列 列转行
行列互转,是一个经常遇到的需求.实现的方法,有case when方式和2005之后的内置pivot和unpivot方法来实现. 在读了技术内幕那一节后,虽说这些解决方案早就用过了,却没有系统性的认识和 ...
- vs2019 代码片段管理
工具/代码片段管理 上面地址是vs内部代码片段,可以参考写自定义片段 写好的模板保存为.snippet文件,放到固定文件夹中,然后使用添加,直接找到文件夹添加即可 <?xml version=& ...
- ubuntu20.04安装fastdfs遇到的问题
说明:git clone在线安装与离线安装都不成功后,选择原来可以正常运行的fastdfs服务,进行tar打包下载,再在新项目上进行解压部署.但由于打包压缩动态库的软连接 失效,所以启动出现如下报错信 ...
- FTCL：Fine-grained Temporal Contrastive Learning for Weakly-supervised Temporal Action Localization概述
1.针对的问题 现有的方法主要遵循于通过优化视频级分类目标来实现定位的方式,这些方法大多忽略了视频之间丰富的时序对比关系,因此在分类学习和分类-定位自适应的过程中面临着极大的模糊性.(1)在弱监督设置 ...
- 配置jupyter lab遇到 libffi.so.7缺失
问题描述 使用 jupyter lab password 命令 配置jupyter 密码 报错 思路 去换一个conda环境 找到其lib内部的 libffi.so.7文件 解决方法 ln -s 其他 ...