js事件底层原理探究
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button>事件监听原理探究</button> <script> var btn = document.getElementsByTagName("button")[0]; // btn.addEventListener("click",fn1);
// btn.addEventListener("click",fn2); var i=0;
fn("click",fn1,btn);
fn("click",fn2,btn);
fn("click",fn3,btn); function fn1(){
i++;
console.log("我是第一个监听"+i);
}
function fn2(){
i++;
console.log("我是第二个监听"+i);
}
function fn3(){
i++;
console.log("我是第三个监听"+i);
} function fn(str,fn,ele){ //判断位置要注意：如果进入绑定事件本身，那么该事件已经本绑定了
//所以获取旧的事件必须在新的事件绑定之前
var oldEvent = ele["on"+str];
ele["on"+str] = function () {
//不能直接执行函数，因为我们还不知道以前有没有绑定我同样的事件
//进行判断，如果以前有过绑定事件，那么把以前的执行完毕在执行现在的事件，如果没有就直接执行
//如果没有被定义过事件该事件源的该事件属性应该是null对应的boolean值是false
//如果已经定义过事件该事件源的该事件属性应该是function本身对应的boolean值是true
if(oldEvent){
//因为oldEvent本身他就是函数本身，那么后面加一个();就是执行函数
// console.log(oldEvent()+"oldEvent"+i);
oldEvent(); fn();
}else{
//没有绑定过事件
fn();
console.log("没有绑定事件");
}
}
} </script>
</body>
</html>
js事件底层原理探究的更多相关文章
- JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能
摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...
- 深入研究Node.js的底层原理和高级使用
深入研究Node.js的底层原理和高级使用
- KVO-基本使用方法-底层原理探究-自定义KVO-对容器类的监听
书读百变,其义自见! 将KVO形式以代码实现呈现,通俗易懂,更容易掌握 :GitHub -链接如果失效请自动搜索:https://github.com/henusjj/KVO_base 代码中有详 ...
- 如何编写高质量的js代码--底层原理
转自: 如何编写高质量的 JS 函数(1) -- 敲山震虎篇 本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/7lCK9cHmunvYlbm ...
- How Javascript works (Javascript工作原理) (十三) CSS 和 JS 动画底层原理及如何优化其性能
个人总结:读完这篇文章需要20分钟. 这是 JavaScript 工作原理的第十三章. 概述 正如你所知,动画在创建令人叹服的网络应用中扮演着一个关键角色.由于用户越来越注重用户体验,商户开始意识到完 ...
- JavaScript 工作原理之十三－CSS 和 JS 动画底层原理及如何优化其性能
原文请查阅这里,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 本系列持续更新中,Github 地址请查阅这里. 这是 JavaScript 工作原理的第十三章. 概述 正如你 ...
- js事件冒泡原理及处理
事件从根节点开始,逐级派送到子节点,若节点绑定了事件动作,则执行动作,然后继续走,这个阶段称为“捕获阶段(Capture)”:执行完捕获阶段后,事件由子节点往根节点派送,若节点绑定了事件动作,则执行动 ...
- 虚拟机研究系列-「GC本质底层机制」SafePoint的深入分析和底层原理探究指南
SafePoint前提介绍 在高度优化的现代JVM里,Safepoint有几种不同的用法.GC safepoint是最常见.大家听说得最多的,但还有deoptimization safepoint也很 ...
- JMM和Volatile底层原理分析
JMM和volatile分析 1.JMM:Java Memory Model,java线程内存模型 JMM:它是一个抽象的概念,描述的是线程和内存间的通信,java线程内存模型和CPU缓存模型类似,它 ...
随机推荐
- 基于Spring、SpringMVC、MyBatis、Druid、Shrio构建web系统
源码下载地址:https://github.com/shuaijunlan/Autumn-Framework 在线Demo:http://autumn.shuaijunlan.cn 项目介绍 Autu ...
- 2017CCPC秦皇岛G ZOJ 3987Numbers（大数+贪心）
Numbers Time Limit: 2 Seconds Memory Limit: 65536 KB DreamGrid has a nonnegative integer n . He ...
- 2016-2017 ACM-ICPC, NEERC, Southern Subregional Contest J. Bottles
J. Bottles time limit per test 2 seconds memory limit per test 512 megabytes input standard input ou ...
- Circle
Circle Memory Limit: 32768KB 64bit IO Format: %lld & %llu Status Description Your task is so ...
- IdentityServer4 SigningCredential（RSA 证书加密）
IdentityServer4 默认提供了两种证书加密配置: services.AddIdentityServer() .AddDeveloperSigningCredential() .AddTem ...
- js中的路由匹配
routie插件:http://projects.jga.me/routie/ /** * 路由 * @example * routie( * { * '/':function(){ }, * '/m ...
- js基础——运算符
爱创课堂前端培训--js基础 运算符一.运算符 运算符(Operators,也翻译为操作符),是发起运算的最简单形式.分类:(运算符的分类仁者见智,本课程进行一下分类.)数学运算符(Arithmeti ...
- 一起写框架-控制反转（Ioc）概述（二）
控制反转概述 控制反转(Inversion of Control,英文缩写为IoC),就是将代码的调用的控制权,由调用方转移给被调用方. 如图:修改代码A类的代码,才能将B类的对象换成C类.代码的控制 ...
- HTML表单设计（上）
1,表单标记<form>...</form> <form>...</form>定义表单的开始位置和结束位置,表单提交时的内容就是<form> ...
- C#图片水印代码整理
这一段公司有个项目,客户要求上传的图片要带上自定义的水印.以前也经常和朋友讨论C#图片水印方面的问题,但是从来没有实际操作过.所以,借这次项目的机会也研究了一下C#图片水印的功能!本人参考的是disc ...