首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

js绑定事件代理的坑

js通过事件代理的方式绑定跳转事件,我这里的逻辑是把click事件绑定在最外层container上面,如果e.target包含我已经写好的class,则执行跳转逻辑。...但是这种方式好像只能是在点击的元素的上面,也就是最内层的元素上面有相应的class才能跳转,在外层加同样的class不生效,说明是我对于事件代理的理解不够深刻,其实事件代理的作用就是为了把目标元素的事件绑定在外层做代理...,又想要外层元素含有class时执行点击事件,修改优化如下: document.querySelector('#container').addEventListener('click', function...(e) { console.log(e.currentTarget) //获得当前绑定监听事件的元素, container console.log(e.target)/...即点击的目标元素必须是点击时真正的目标元素,而不是外面一层; currentTarget绑定相应想要点击的class的时候必须是做代理的即做事件监听的元素。

4.9K20

JS 事件绑定事件监听、事件委托详细介绍 转

在JavaScript的学习,我们经常会遇到JavaScript的事件机制,例如,事件绑定事件监听、事件委托(事件代理)等。这些名词是什么意思呢,有什么作用呢?...在JavaScript,有三种常用的绑定事件的方法: 在DOM元素中直接绑定; 在JavaScript代码绑定绑定事件监听函数。...; } 在JavaScript代码绑定事件 在JavaScript代码(即 script 标签内)绑定事件可以使JavaScript代码与HTML标签分离,文档结构清晰,便于管理和开发。...事件委托可以显著的提高事件的处理速度,减少内存的占用。 实例分析JavaScript事件委托和事件绑定 ,这篇文章写得还不错。...item1到item3都有事件响应,但是点击item4时,没有事件响应。

8.7K31

react事件绑定

React事件绑定是将事件处理函数与组件的交互操作关联起来的过程。通过事件绑定,我们可以在React组件响应用户的交互,并进行相应的操作。...React事件绑定特点React事件绑定具有以下特点:以驼峰命名:React事件名采用驼峰命名方式,如onClick、onChange等。...自动绑定this:在类式组件事件处理函数会自动绑定组件实例的this。绑定事件处理函数要绑定事件处理函数,可以通过在JSX中使用事件名作为属性,并将事件处理函数作为属性值。...以下是一个简单的示例,展示了如何绑定一个点击事件:import React from 'react';class Button extends React.Component { handleClick...这样,当按钮被点击时,handleClick方法会被调用。传递参数有时候,我们需要在事件处理函数传递额外的参数。为了实现这一点,我们可以使用一个匿名函数来调用事件处理函数,并将参数传递给它。

3K30

小程序实践(五):for循环绑定item的点击事件

微信展示列表效果借助于 wx:for  简单写一个列表(wxml文件): ? 对应的数据源(js文件): ? 写一个点击监听: ? 效果: ?...-------------------------------------- 解决方法: 给有点击事件的组件添加一个 data-any  属性 any可以是任意数据类型。...然后修改点击事件: ?  发现可以用此方法去除点击的item对应的数据对象,以及该对象某个属性值     控制台打印信息: ?  这样就可以获取到列表展示数据某一个item对应的数据了。...小程序实践(一):主页tab选项实现 小程序实践(二):swiper组件实现轮播图效果 小程序实践(三):九宫格实现及item跳转 小程序实践(四):动态控制组件的显示/隐藏 小程序实践(五):for循环绑定...item的点击事件

3.3K10

【Node.JS事件绑定与触发

往期文章 【Node.JS】写入文件内容 【Node.JS】读取文件内容 目录 简介 绑定事件 on() addListener()  once() 监听事件emit()  传参  删除事件 removeListener...()  removeAllListeners() ---- 简介 node.js事件是使用events模块,通过实例化它里面的EventEmitter类,来绑定和监听事件。...绑定事件 on() const eve = require("events"); //导入模块 var event = new eve.EventEmitter(); //进行实例化声明 event.on...event.emit('namea', '小解');  once() once 只会绑定一次性的触发事件,触发一次后就会解除绑定。...event.removeListener('namea', name) event.emit('namea', '小解'); 删除 namea事件的name属性,设置两个,删除了一个name,只留下了

11K40

backbonejsView事件绑定源码分析

其实上下文是接上一篇的,因为自己不理解backbone view事件绑定所以掉到了自己挖的一个坑里,调了两个晚上。把backbone view部分的代码看了之后才明白。 什么样的坑?...topbar">搜索 bla bla bla bla 对应的js...: { 'click .search': function(evt){console.log('search')}, } }); 大概就是这样的一个坑,在不理解backbone绑定事件的情况下...该函数的流程是: 判断events这个属性是否定义 先接触这个view的所有已委托的事件 一些合法性检验,如名称是否合法,是否是函数等 绑定到view实例上 最后就是绑定到 $el 上 看到这就明白了为啥我的那个...search始终无法触发了,因为它在 $el 根本就选择不到它。

66820

JS动态加载数据绑定事件--delegate() 方法

JS动态加载数据绑定事件-委托delegate() 方法 ---- W3C规范定义 定义和用法 delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数...---- JavaScript动态加载的数据,同时给他加载绑定事件,我选用Jquwey的 delegate() 方法 我的理解,delegate()方法属于异步式加载绑定,dom元素加载未完成之前,可以委托给...delegate() 方法来实现的绑定操作。...delegate(".top-nav-left","click",function() { window.history.back(); }); }); ---- 第一个参数为 要点击的标签属性...第二个参数为 要绑定事件 详情,请翻阅delegate() 方法 ---- 效果如图的返回按钮:

7.8K30
领券