首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

8.8K31
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    js绑定事件代理

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

    4.9K20

    react事件绑定

    React事件绑定是将事件处理函数与组件交互操作关联起来过程。通过事件绑定,我们可以在React组件响应用户交互,并进行相应操作。...React事件绑定特点React事件绑定具有以下特点:以驼峰命名:React事件名采用驼峰命名方式,如onClick、onChange等。...使用JSX语法:在JSX,通过将事件处理函数作为属性值来绑定事件。使用事件对象:事件处理函数接收一个事件对象作为参数,可以通过事件对象获取相关信息。...自动绑定this:在类式组件事件处理函数会自动绑定组件实例this。绑定事件处理函数要绑定事件处理函数,可以通过在JSX中使用事件名作为属性,并将事件处理函数作为属性值。...使用事件对象在事件处理函数,可以通过参数获取事件对象,并从中获取相关信息,如事件类型、目标元素等。

    3.1K30

    【Node.JS事件绑定与触发

    往期文章 【Node.JS】写入文件内容 【Node.JS】读取文件内容 目录 简介 绑定事件 on() addListener()  once() 监听事件emit()  传参  删除事件 removeListener...()  removeAllListeners() ---- 简介 node.js事件是使用events模块,通过实例化它里面的EventEmitter类,来绑定和监听事件。..."); }) //查看对象属性 里面有绑定事件 console.log(event);  里面有事件具体属性,和事件数量。...{a}同志`); }) //触发事件冰川入参数 event.emit('namea', '小解');  once() once 只会绑定一次性触发事件,触发一次后就会解除绑定。...('namea', name2) //触发事件冰川入参数 event.removeListener('namea', name) event.emit('namea', '小解'); 删除 namea事件

    11.1K40

    Vue3事件处理:事件绑定事件修饰符、自定义事件

    本文将详细介绍Vue3事件处理,包括事件绑定事件修饰符、自定义事件等方面。事件绑定在Vue3,我们可以使用v-on指令或简写形式@来进行事件绑定。...我们通过@click指令将onClick方法绑定到按钮点击事件上。...这样,我们就实现了一个简单事件处理。除了点击事件,Vue3还支持多种其他类型事件,如@input、@submit、@keydown等。我们可以根据场景选择合适事件类型进行绑定。...自定义事件在开发,有时我们需要自定义事件来实现组件间通信或特定功能。Vue3提供了自定义事件机制,使得我们可以在组件触发和监听自定义事件。...我们可以使用@指令来进行事件绑定,通过事件修饰符改变事件行为,还可以使用自定义事件来实现组件间通信和交互。当我们熟练掌握Vue3事件处理功能后,能够更好地构建交互丰富、响应快速前端应用程序。

    4.5K21

    js事件(event)

    当然我们也可以不给事件绑定处理方法,也就是说当此事件发生时候,什么也不需要做,事件常有,而事件绑定方法不一定有, 我们给页面元素某个事件绑定处理方法时候。...”事件对象赋给这个形参e,这时这个e是个系统级对象:事件; IE事件对象是个全局属性window.event,而标准浏览器事件对象就是形参e; 所以事件对象兼容性写法为:e = e||window.event...,相当于文档鼠标的坐标; target事件源;事件概念:事件最终发生在页面的那个元素上; 事件源和事件传播是息息相关 事件传播包括:冒泡和捕获;事件传播是浏览器在处理事件行为机制,冒泡阶段或者捕获阶段...;当你在一个form表单里点击提交按钮时网页会产生一个行为病刷新网页,当你网页上滚动鼠标滚轮时候,页面的滚动条会滚动等等;这些都叫事件默认行为,如果想把这些默认行为取消了,相应js代码如下: a.onclick...在W3C标准是在同一事件上,先绑定方法先执行,并且不能重复绑定同一个方法在同一个事件上,但是IE6、7、8,如果绑定方法少于9个,执行顺序是相反,超过9个,执行顺序就是混乱,这些IE问题都是比较严重

    6.8K30

    backbonejsView事件绑定源码分析

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

    68720

    jQuery 事件绑定 和 JavaScript 原生事件绑定

    live、delegate 不多用,在Jquery1.7已经移除,这里不多说 重点介绍 bind、on bind(event,[data],function) bind 是使用频率较高一种,作用就是在选择到元素上绑定特定事件类型监听函数...JavaScript支持在标签中直接绑定事件 2.在JavaScript代码onXXX绑定:在JavaScript代码绑定事件可以使JavaScript代码与HTML标签分离,文档结构清晰,便于管理和开发...在JavaScript代码onXXX绑定 在JavaScript代码绑定事件语法为: elementObject.onXXX=function(){     // 事件处理代码 } 其中: elementObject...jQuery 事件绑定具有叠加性,JavaScript 事件绑定则是可覆盖。...执行 js cm2 点击事件,控制台打印是: ?

    5.7K20

    【如果你要学JS 】——事件绑定及解除DOM事件

    父(parentNode),子(children),兄(previousElementSibling、 nextElementSibling)提倡1.注册事件绑定事件)注册事件有两种方式:传统方式和方法监听注册方式...2'); div[1].removeEventListener('click', fn); } 3.DOM事件事件流描述是从页面接收事件顺序...father.addEventListener('click', function () { alert('father') }, false); 注意:JS...代码只能执行捕获或者冒泡其中一个阶段。...e 就是个事件对象写到我们侦听函数小括号里面当形参来看事件对象只有有了事件才会存在,它是系统给我们自动创建,不需要我们传递参数.事件对象是我们事件一系列相关数据集合跟事件相关比信息

    19310

    js 动态生成 input 绑定事件 blur 无效

    ,而针对于其中input标签,要求设置失去焦点blur事件 需要实现界面截图如下: ?...最开始编写 js 代码如下: /** * 当sku库存量变化时,对应总库存进行更新 */ $(".input-sku-stock").blur(function ()...,而动态新生成却无法触发blur事件 因为测试失败后,转而考虑新写法,且可以正常实现 ?...ி 附录 1.针对我问题,求助度娘,发现了下面的一个帖子,可作参考 动态添加blur事件失效 [问题点数:60分,结帖人lawrendc] 时间相当久远... 2.最接近解决需求文章如下...,建议可自行测试 动态生成input绑定事件无效如:blur 意见:异步导致绑定事件失败,需使用全局绑定事件 3.w3school 文档 - onblur 事件 这就是官方文档

    8.9K00

    JavaScript 事件绑定

    事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型)。现代事件绑定在传统绑定上提供了更强大更方便功能。...function () {//第二组程序项目或第二个JS文件 alert('Mr.Lee'); }; 当两组程序或两个JS文件同时执行时候,后面一个会把前面一个完全覆盖掉。...但其他事件处理函数也一并被删除了,导致最后得不到自己想要结果。如果想要只删除指定函数事件处理函数,那就需要遍历,查找。...PS:IE事件绑定函数attachEvent()和detachEvent()可能在实践不去使用,有几个原因:1.IE9就将全面支持W3C事件绑定函数;2.IE事件绑定函数无法传递this;3....IE事件绑定函数不支持捕获;4.同一个函数注册绑定后,没有屏蔽掉;5.有内存泄漏问题。

    3.4K60

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

    JS动态加载数据绑定事件-委托delegate() 方法 ---- W3C规范定义 定义和用法 delegate() 方法为指定元素(属于被选元素子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行函数...使用 delegate() 方法事件处理程序适用于当前或未来元素(比如由脚本创建新元素)。...---- JavaScript动态加载数据,同时给他加载绑定事件,我选用Jquwey delegate() 方法 我理解,delegate()方法属于异步式加载绑定,dom元素加载未完成之前,可以委托给...delegate() 方法来实现绑定操作。...第二个参数为 要绑定事件 详情,请翻阅delegate() 方法 ---- 效果如图返回按钮:

    7.9K30
    领券