javaScript原生的事件委托原因及过程

最新推荐文章于 2024-06-10 17:00:16 发布
最新推荐文章于 2024-06-10 17:00:16 发布
阅读量236 收藏 1
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/embaobao/article/details/93671247
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件委托代理 | Array 的新方法 EMB </title>
</head>

<body>


    <button><a href="#"> 点<i> 击</i></a>创建按钮</button>
    <button>点击创建按钮</button>
    <button>点击创建按钮</button>
    <button>点击创建按钮</button>
    <button>点击创建按钮</button>
    <button>点击创建按钮</button>
    <button>点击创建按钮</button>
    <button>点击创建按钮</button>
    <button>点击创建按钮</button>
    <button>点击创建按钮</button>
    <script src="../../public/js/normal.1.js"></script>
    <script src="main.js"></script>
</body>

</html>

 

var bts = $("button");




// 1. 我们要给他按钮绑定可以创建按钮的事件 ，太麻烦。那么我们可以给他父元素添加啊？

// 那我到时候判断就好了。




// // // ----------------------------------------- 我是代码段

// function createHandler(ev) {

// var e = ev || window.event; //事件对象

// var captureElemet = e.target || e.srcElement; //捕获到的点击对象

// if (captureElemet.nodeName === "BUTTON") {

// document.body.appendChild(createElement({

// tagName: "button",

// html: "我是创建的按钮"

// }));

// }

// // console.log(captureElemet.nodeName);

// }




// document.body.addEventListener("click", createHandler);



// -------------------------------------------我是代码段




// 2. 我还嫌弃他，为啥？ 我觉的这样不够优雅（装 13） 这样我每次相同的操作时我都要这样去判断？



// > 那我觉的他很麻烦 我要封装 要成为通用的方法




// 那这个代码块哪里可以重用？

// 我们只要找哪里是不一样的就行了吧？

// 1. 那就是 选择的呀元素不一样吧？ 下次就不一定是、按钮了吧？ 很有可能是 相同的类 ， 和标签了吧？

//2. 我不会每次都绑定的事件都相同吧？ 功能不会都是创建一个按钮吧？



// 所以我们就可以 创建两个变量来替代对吧？

// 那像不像我不想自己喝水，累 ………… ，我就叫了个人，你去给我那杯水给我喝。。这个就是事件的代理

// 那我开始了！

function easyCreateHandler(ev) {

document.body.appendChild(createElement({

tagName: "button",

html: "我是创建的按钮"

}));

}





function delegation(executeHandler, targetSelector) {

return function (ev) { // 我本人认为第一步应先给监听事件要的东西， 就是执行事件对吧？

// 这个函数被作为传进去的执行者，那么他是不是接受了事件对象？嘿嘿

var e = ev || window.event; // 获取到了事件对象



// 获取当前捕获元素

var captureElemet = e.target || e.srcElement;

//获取要执行的目标元素

var targetElemets = this.querySelectorAll(targetSelector);



// console.log(captureElemet, this);



// 那是不是 执行目标和捕获目标相同 就执行就好了？

// 但是我们的目标元素不是一堆啊? 那是不是得一一辨认？

for (var i = 0, targetItem; targetItem = targetElemets[i++];) {

if (captureElemet == targetItem) { // 如果是这个目标 那就杠

executeHandler.call(targetItem, e);

//执行事务 ,并把执行事务 的参数给人家句柄

//指向执行的人，事件对象给执行句柄

}

}



}

}





// document.body.addEventListener("click", delegation(easyCreateHandler, "button"));






// > 3 .但是还是有问题啊！！ 好烦啊对不？ 在元素内部要是有嵌套那是不是 绑定的事件是不是就没用了啊？

// 就啊是啊？ 那怎么解决了？ 还是那样啊啊 判断，对不？ 给绑定事件的一家子 ，就是包括他在内的儿子，都认为是执行目标，都应该执行这个绑定的事件，对。。对吧

// 开始更新了》》






function delegation(executeHandler, targetSelector) {

return function (ev) { // 我本人认为第一步应先给监听事件要的东西， 就是执行事件对吧？

// 这个函数被作为传进去的执行者，那么他是不是接受了事件对象？嘿嘿

var e = ev || window.event; // 获取到了事件对象

// 获取当前捕获元素

var captureElemet = e.target || e.srcElement;

//获取要执行的目标元素

var targetElemets = this.querySelectorAll(targetSelector);

var targetFamilay = [] //抓住一家子

var _targetemp = captureElemet;

while (true) {

if (_targetemp === this) break;

//如果是找到的父元素 放弃寻找

targetFamilay.push(_targetemp);

_targetemp = _targetemp.parentNode

}

if (!targetFamilay.length) return false;

// console.log(captureElemet, this);

// 那是不是 执行目标和捕获目标相同 就执行就好了？

// 但是我们的目标元素不是一堆啊? 那是不是得一一辨认？

for (var i = 0, targetItem; targetItem = targetElemets[i++];) {

if (targetFamilay.length === 1 ? captureElemet == targetItem : targetFamilay.indexOf(targetItem) !== -1) { // 如果是这个目标 那就杠

executeHandler.call(targetItem, e);

//执行事务 ,并把执行事务 的参数给人家句柄

//指向执行的人，事件对象给执行句柄

}

}



}

}





document.body.addEventListener("click", delegation(easyCreateHandler, "button"));





Node.prototype.on = function (eventType, handler, isCapture) {

arguments.length > 2 && isCapture ? "" : isCapture = false;

if (this.addEventListener) {

this.addEventListener(eventType, handler, isCapture);

} else if (this.attachEvent) {

this.attachEvent(eventType, handler);

} else {

this["on" + eventType] = handler;

}

}



// some 判定数组中是否存在某个符合条件的; 一旦函数返回true那么some就会终止循环，并且返回true ;

// Some 封装



var arr = [15000, 20000, 21000, 26000, 3000, 2000, 8000];

var boolean = arr.some(function (item, index, arr) {

console.log(item);

return item === 3000

})

console.log(boolean);



Array.prototype.iSome = function (fn) {

for (var i = 0, item; item = this[i++];) {

if (fn(item, i, arr)) {

return true;

}

}

}



var Iboolean = arr.iSome(function (item, index, arr) {

console.log(item);

return item === 3000

})

console.log(Iboolean);

 

embaobao
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript之事件委托实例(附原生js和jQuery代码)
10-19
事件委托的实现方法有很多种，既可以用原生的JavaScript代码实现，也可以使用jQuery库简化操作。原生JavaScript代码实现时，我们会获取父元素并为其添加一个事件监听器，然后在事件处理函数中通过event.target属性...
JavaScript事件委托的技术原理探讨示例
10-26
虽然示例中的代码是原生JavaScript编写的，但在实际的项目中，由于现代JavaScript库和框架的存在，事件委托的实现变得更加简便。以jQuery为例，它提供了更为高级的事件委托方法，如$.on()，它允许开发者指定一个选择...
JS基础_事件的冒泡
weixin_41804367的博客
08-31 187
事件的冒泡 1、什么是事件的冒泡？ 当某个子类元素的某类型事件被触发时，其父类元素、祖类及以上级元素的相同类型的事件也会产生效果。 2、举例 <html> <!--编码格式--> <meta charset="UTF-8"> <head> <style> #box { width: 200px; height: 200px; backgr
原生js的事件委托
butcher的博客
06-22 942
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件委托</title> </head> <body> <ul i
【前端】详解JavaScript事件代理（事件委托）
最新发布
06-10 1万+
【前端】详解JavaScript事件代理（事件委托）
JavaScript原生事件委托以及JQuery事件委托on()的代码片段
qq_40172562的博客
09-09 231
.container{       width:100%;       display:-webkit-box;       display: -moz-box;       display:-webkit-flex;       display: flex;     }     .left {         -webkit-flex:1;         -ms-flex:1
事件委托的概念和原理
张彬彬的博客
07-04 2911
事件委托优点 减少DOM操作的，减少浏览器的重绘（repaint）和重排（reflow），从而提高性能； 减少内存空间的占用率，因为每一个函数都是一个对象，对象越多，内存占有率就越大，自然性能就越差，使用事件委托，只需要在其父元素中定义一个事件就可以。 适合事件委托的事件有：click，mousedown，mouseup，keydown，keyup，keypress 可以方便地动态添加和...
js事件委托解析
qq_44308109的博客
05-26 1243
一、什么是事件委托 事件委托的原理就是利用事件冒泡，即是利用事件冒泡把子元素所需要响应的事件绑定到父元素，这样事件只需绑定到父元素即可而不需要每个子元素都去绑定事件，这样大大提高了性能。可事件委托的事件有click、mousedown、mouseup、keydown、keyup、keypress 等 实现函数 <div id="bnt"> <button id="bnt1">hello button1</button> <button id="bnt2">
jQuery事件委托之Safari
10-22
文章中给出了一段使用原生JavaScript实现事件委托的示例代码。这段代码演示了如何通过`Object.prototype`为所有对象添加一个通用的事件监听函数`on`，该函数可以模拟事件委托的行为。 ```javascript Object....
javascript 自定义事件初探
12-10
这种做法模拟了事件触发的过程，但没有使用原生的事件系统，而是基于对象属性来管理事件处理器。 6. **事件委托**： 虽然示例中没有提到事件委托，但它是一个相关的概念，可以用来优化事件处理。事件委托允许在一...
事件冒泡和事件委托
不想内卷的博客
10-07 91
https://www.cnblogs.com/moqing/p/5590216.html https://www.jb51.net/article/194440.htm
JavaScript事件委托实现原理及优点进行
10-14
主要介绍了JavaScript事件委托实现原理及优点进行,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
js中的事件委托或是事件代理
有问题可关注公众号：前端研究院 后台输入问题回复
10-07 311
直接看例子，我觉得非常好。 有3个同事预计会在周一收到快递，有2种方法， 1.一种是3个人都在公司门口等快递 2.委托给前台代收。 现实生活中，我们都采用委托的方案。等前台签收后，判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是公司即使来了新员工(不管多少)，前台都会统一签收 这里其实还有2层意思的： 第一：现在委托给前台同事代为签收，即程序中的现有dom节点是有事件的 第二：新员工也是可以被前台代收的，即程序中新添加的dom节点也是有事件的 为什么要用事
vue3使用事件委托实现选项卡的切换
bbt953的博客
08-11 1061
vue3使用事件委托实现选项卡的切换
JS中事件委托原理详解
我是张跑跑
10-11 571
1 概述 事件委托，也称为事件代理，主要目的包括以下两点： 动态添加为未来的新元素添加事件 提高性能：每一个函数（事件）都会占用内存空间，只需添加一个事件处理程序代理所有事件,所占用的内存空间更少； 利用的原理是事件冒泡机制。 2 详解 2.1 事件 这是博主的另一篇文章，里面简述了事件的分类和不同处！点击查看！ 2.2 事件触发机制 事件捕获和事件冒泡机制 事件捕获 当一个事件触发后,从W...
TS中的事件，事件监听，移除，分发
iDaDi的博客
12-25 7627
TS中的事件，事件监听，移除，分发 TS代码如下(单例)： /** * 事件消息处理 */ class EventCenter { /** 监听数组 */ private listeners = {}; private static _instance = null; public static get instance(): EventCenter {...
js事件委托及其原理
夏小小的博客
07-26 1194
（jquery委托的目标）.on（"事件名称"，"需要委托的dom元素"，function(e){ …… //执行的函数体 }）来绑定。 其中：e.currentTarget表示需要委托dom元素 e.target表示触发事件的dom元素 委托的目标一般为需要委托的所有元素共有的父元素
js中的事件委托或是事件代理详解
weixin_30883271的博客
06-25 1994
起因： 1、这是前端面试的经典题型，要去找工作的小伙伴看看还是有帮助的； 2、其实我一直都没弄明白，写这个一是为了备忘，二是给其他的知其然不知其所以然的小伙伴们以参考； 概述： 那什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思呢？网上的各位大牛们讲事件...
js变量的生存周期
qq_36619427的博客
05-28 1630
变量的生存周期：1.全局变量的生存周期时永久的，除非我们主动销毁。ps：变量的永久生存，且可以随时调用，但是使用时要适度，正是因为它的生命周期长，所以将占据更多的内存。全局变量会在页面关闭后销毁。2.函数内部的局部变量，在函数执行完毕后销毁。ps：调用函数结束，局部变量确实会销毁。但不是完全销毁，而是一直函数内部环境中存活着，当函数再度被调用时，变量就”复活“了。但是存在闭包这个特殊情况不会被销毁...
给我写一段原生js事件委托的代码
03-11
好的，以下是一段原生js事件委托的代码： ```javascript document.addEventListener('click', function(event) { if (event.target.matches('.my-class')) { // 在这里写你想要执行的代码 } }); ``` 这段代码会...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值