js中事件代理(委托）

var oul = document.getElementById(‘uli’); oul.onclick = function(e) { e = e || window.event; var target = e.srcElement || e.target; console.log(target.innerHTML); }…

在javasript中delegate这个词经常出现,看字面的意思,代理.委托.那么它究竟在什么样的情况下使用?它的原理又是什么?在各种框架中,也经常能看到delegate相关的接口.这些接口又有什么特殊的用法呢?这篇文章就主要介绍一下javascript delegate的用法和原理,以及Dojo,jQuery等框架中delegate的接口. JavaScript事件代理首先介绍一下JavaScript的事件代理.事件代理在JS世界中一个非常有用也很有趣的功能.当我们需要对很多元素添加事件的…

JS里关于事件的常被考察的知识点：事件流、事件广播、原生JS实现事件代理

1.JS里面的事件流 DOM2级事件模型中规定了事件流的三个阶段:捕获阶段.目标阶段.冒泡阶段,低版本IE(IE8及以下版本)不支持捕获阶段捕获事件流:Netscape提出的事件流,即事件由页面元素接收,逐级向下,传播到最具体的元素. 冒泡事件流:IE提出的事件流,即事件由最具体的元素接收,逐级向上,传播到页面. 关于js事件,这里有一篇非常详细的介绍,可以看下:http://www.cnblogs.com/hyaaon/p/4630128.html 2.IE和W3C不同绑定事件解绑事件的方法…

JS中事件绑定的三种方式

以下是搜集的在JS中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="upload" onclick="upload_file();"> 原文: http://www.w3school.com.cn/jsref/jsref_events.asp 2. jQuery .on() $(node).on("change", f…

[js]js中事件的3要素

js中事件的3要素事件源事件事件处理程序 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #demo { width: 200px; height: 200px; background-color: pink; } </style> <…

js中事件三阶段

js中事件三阶段先贴代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>冒泡</title> <style> #a{ width: 300px; height:300px; background-color: cadetblue; } #b{ width: 200px; height:2…

js绑定事件代理的坑

js通过事件代理的方式绑定跳转事件,我这里的逻辑是把click事件绑定在最外层container上面,如果e.target包含我已经写好的class,则执行跳转逻辑.但是这种方式好像只能是在点击的元素的上面,也就是最内层的元素上面有相应的class才能跳转,在外层加同样的class不生效,说明是我对于事件代理的理解不够深刻,其实事件代理的作用就是为了把目标元素的事件绑定在外层做代理,我想实现外层元素点击,固然不可生效. 这是原来的写法: document.querySelector('.cont…

JavaScript中的事件代理/委托

事件委托在JS高级程序设计中的定义为"利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件" 如何理解上面的这句话呢,在网上,大牛们一般都使用收快递这个例子来解释的,那我也来谈谈收快递一个公司有三个人要取快递,一种方法是三个人都到楼下去等快递,另一种方法是让前台的MM代收快递,并且可以按照不同收件人的要求签收,一般实际中都是使用后者,因为后者还有一个优势就是,不管公司来了多少新员工,前台MM也能收到新员工的快递核实后代为签收. 那么为什么要用事件委托呢?有两个原因: 1…

对JS中事件委托的理解

什么是事件委托: 事件委托——给父元素绑定事件,用来监听子元素的冒泡事件,并找到是哪个子元素的事件.(不理解冒泡的可以去百度下) 定义:利用事件冒泡处理动态元素事件绑定的方法,专业术语叫事件委托. 使用事件委托技术可以避免对特定的每个节点添加事件监听器,相反,事件监听器是被添加到它们的父元素上.事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件. 事件委托的好处: 事件委托技术可以避免对每个字元素添加事件监听器,减少操作DOM节点的次数,从而减少浏览器的重绘和重排,提高代码的性能.…

转载：C#中事件和委托的编译代码

接上文转载:C#中事件的由来,这时候,我们注释掉编译错误的行,然后重新进行编译,再借助Reflactor来对 event的声明语句做一探究,看看为什么会发生这样的错误: public event GreetingDelegate MakeGreet; 可以看到,实际上尽管我们在GreetingManager里将 MakeGreet 声明为public,但是,实际上MakeGreet会被编译成私有字段,难怪会发生上面的编译错误了,因为它根本就不允许在GreetingManager类的外面以赋值的…

JS中事件冒泡与事件捕获

[JS中的事件流] 1.事件冒泡:当某DOm元素触发一种事件时,会从当前节点开始,逐级往上触发其祖先节点的同类型事件,直到DOM根节点: >>>什么情况下会产生事件冒泡 ① DOM0模型绑定事件,全部都是冒泡 ② IE8之前,使用attachEvent()绑定事件.全部都是冒泡 ③ 其他浏览器,使用addEventLinstener()添加事件,当第三个参数省略或者为false时,为事件冒泡 2.事件捕获:当其DOM元素触发一种事件时,会从文档根节点开始,逐级向下触发其祖先节点的…

vue中事件代理

由于在vue实例内部,this指向了实例本身,所以在编写事件代理的时候,用e.currentTarget引用绑定事件代理的元素,e.target引用事件目标元素.刚刚不注意想用this引用代理元素报错,羞愧~~…

js,jq.事件代理（事件委托）复习。

<ul id = "lists"> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li>列表5</li> <li>列表6</li> </ul> js委托: var lists = document.getElementById("lists"…

关于vue.js中事件处理器的练习

html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件处理器</title></head><body>   <div id="app-1">…

JS中事件绑定函数，事件捕获，事件冒泡

1 事件绑定:事件与函数绑定以及怎么取消绑定 1.1 元素.onclick这种形式,如下: <div id="div1">aaa</div> <script type="text/javascript"> var oDiv1 = document.getElementById('div1'); oDiv1.onclick = function(){ alert(this.innerHTML); //将会弹出aaa } </s…

js中的行为委托和无类编程

概述 <你不知道的JavaScript>中有这么一段话:不幸的是,将类和继承的设计模式思维带入Javascript的想法是你所做的最坏的事情,因为语法可能会让你迷惑不已,让你以为真的有类这样的东西存在,实际上原型机制与类的行为特性是完全相反的. js的原型机制本质上是行为委托机制.行为委托认为对象之间是兄弟关系,互相委托,而不是父类和子类的关系. 面向类的编程 class Polygon { constructor(height, width) { this.name = 'Polygon';…

js中事件绑定要注意的事项之如何在方法中自己打印自己的值

下面是错误的js方法绑定,这样写会造成在方法中不能用调用方法的dom本身的一些东西,如各种属性或者jq对象等. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <script type="text/javascript" src="js/jquery-1.…

对于js中事件冒泡的理解分析

一. 事件事件的三个阶段:事件捕获 -> 事件目标 -> 事件冒泡捕获阶段:先由文档的根节点document往事件触发对象,从外向内捕获事件对象: 目标阶段:到达目标事件位置(事发地),触发事件: 冒泡阶段:再从目标事件位置往文档的根节点方向回溯,从内向外冒泡事件对象事件捕获:事件发生时首先发生在document上,然后依次传递给body,最后到达目的节点(即事件目标),事件流模型:div →body→ html→ document . 事件冒泡:事件到达事件目标之后不会结束,会逐层向上…

js中事件冒泡，事件捕获详解

一.事件流事件是js与HTML交互的基础,事件流描述的是页面接受事件的顺序,而事件流又分为三个阶段:捕获阶段.目标阶段和冒泡阶段. 如果单纯的事件处理,事件捕获和事件冒泡二选一即可,导致两者并存的原因是当年微软和网景的浏览器大战,微软提出了事件冒泡,而网景提出了事件捕获. 1.事件冒泡事件开始由最深层的元素接收,然后逐级向上传播 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&q…

node.js中事件触发器events的使用

node.js是基于事件驱动的,通过events,我们可以方便的创建事件,并通过触发事件来调用我们自定义的监听函数. 所有能触发事件的对象都应该是 EventEmitter 类的实例,一般我们自定义一个类继承于 EventEmitter 类. 通过on()方法我们可以绑定事件与监听函数: const Events = require('events'); //自定义一个类,继承于EventEmitter类 class MyEvent extends Events { } //实例化一个我们自定义…

JS中事件绑定问题

今天编写代码时遇到一个问题,我的判断语句(IFLESE)老是顺序执行结束后又跳到中间的语句里去执行了,找了半天没发现问题,最后才发现是事件绑定闹得鬼,不多说,先上代码为敬. JSP里 <button class="btn" onClick="abc()"></button> JS里 function abc(){ if(){ alert(111); }else if(){ $(document).on("click", &…

js中事件冒泡和事件捕获

什么时候存在这种问题? 当一个行为触发了多个对象的事件时. <body> <div class="fa"> <div class="son1"> <div class="son2"></div> </div> </div> <script type="text/javascript"> …

JS中的事件委托（事件代理）

一步一步来说说事件委托(或者有的资料叫事件代理) js中事件冒泡我们知道,子元素身上的事件会冒泡到父元素身上. 事件代理就是,本来加在子元素身上的事件,加在了其父级身上. 那就产生了问题:父级那么多子元素,怎么区分事件本应该是哪个子元素的? 答案是:event对象里记录的有“事件源”,它就是发生事件的子元素. 它存在兼容性问题,在老的IE下,事件源是 window.event.srcElement,其他浏览器是 event.target 用事件委托有什么好处呢? 第一个好处是效率高,比如,不用f…