事件委托与事件监听

事件委托:

 给一些子级元素添加事件过多,所以直接给他们的父级添加一个事件;

window.onload = function(){

            var oBox = document.getElementById("box");
            oBox.onclick = function (ev) {
                var ev = ev || window.event;//获取目标的对象
                var target = ev.target || ev.srcElement;、、获取目标
                if(target.nodeName.toLocaleLowerCase() == ‘input‘){//如果目标是input(nodeName获取节点名称toLocaleLowerCase()将字符串转为小写)
           switch(target.id){//(循环所有的目标的id)                   case ‘add‘ ://如果id是add                   alert(‘添加‘);            break;//跳出本次循环           case ‘remove‘ :           alert(‘删除‘);           break;         case ‘move‘ :         alert(‘移动‘);         break;         case ‘select‘ :         alert(‘选择‘);       break; }       }     } }事件监听  使同一个事件源一次获多次触发事件函数

 var eventOne = function(){

  alert("第一个监听事件");

 }

function eventTwo(){

 alert("第二个监听事件");

}

window.onload = function(){

 var btn = document.getElementById("yuanEvent");

 btn.addEventListener("click",eventOne);//绑定事件

 btn.addEventListener("click",eventTwo);//绑定事件

 btn.removeEventListener("click",eventOne);//清除绑定事件

}

 
时间: 2024-08-02 19:19:52

事件委托与事件监听的相关文章

jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化

jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化 js监听输入框值的即时变化 网上有很多关于 onpropertychange.oninput的讲解,但是他们都不是我想要的,我想要的是动态的监听input,textarea等之前值和之后改变的值,比如像KISSY中的valuechange事件一样,当我在输入框里面开始输入1的时候,那么之前值是undefined,现在的值是1,当我接着输入2时候,那么之前的值是1,现在的值是2.等,

Android 开发事件响应之基于监听的事件响应

Android 开发事件响应之基于监听的事件响应 本文将介绍Android 操作系统如何通过监听来实现对事件的响应. Android 开发事件响应之基于监听的事件响应 背景介绍 Android 开发事件响应类型 内部类 匿名内部类 外部类 直接绑定标签 总结 背景介绍 对于任何可视化开发来说,都会涉及到对控件的响应.我们通过举例:实现对Button 按钮的点击来讲解Android 里面对事件相应的办法. Android 开发事件响应类型 在Android 开发中,有两种方式可以对事件作出响应,分

libevent (三) 事件注册与循环监听

事件注册与循环监听 在libevent中为了监听某种事件的发生,设置事件触发后的回调函数,也就是说对该事件注册到当前的IO模型中. 事件注册 事件初始化 使用`event_new`函数来对事件进行初始化. typedef void (*event_callback_fn)(evutil_socket_t, short, void *);/* 回调函数 */ struct event *event_new(struct event_base *base, evutil_socket_t fd, s

SpringBoot | 第三十二章:事件的发布和监听

前言 今天去官网查看spring boot资料时,在特性中看见了系统的事件及监听章节.想想,spring的事件应该是在3.x版本就发布的功能了,并越来越完善,其为bean和bean之间的消息通信提供了支持.比如,我们可以在用户注册成功后,发送一份注册成功的邮件至用户邮箱或者发送短信.使用事件其实最大作用,应该还是为了业务解耦,毕竟用户注册成功后,注册服务的事情就做完了,只需要发布一个用户注册成功的事件,让其他监听了此事件的业务系统去做剩下的事件就好了.对于事件发布者而言,不需要关心谁监听了该事件

js中的事件委托或是事件代理详解

起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的各位大牛们讲事件委托基本上都用了同一个例子,就是取快递来解释这个现象,我仔细揣摩了一下,这个例子还真是恰当,我就不去想别的例子来解释了

javascript的事件冒泡,阻止事件冒泡和事件委托, 事件委托是事件冒泡的一个应用。

首先,弄明白js 当中,什么是事件,事件模型在js中是如何设计的.什么是事件冒泡? 什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层.这时,从最底层冒出了一个气泡,气泡会一层一层地上升,直到最顶层.而你不管在水的哪一层观察都可以看到并捕捉到这个气泡.好了,把“水”改成“DOM”,把“气泡”改成“事件”.这就是“事件冒泡” 什么是事件委托呢?event delegation : 地址:http://davidwalsh.name/event-delegate One

【转】js中的事件委托或是事件代理详解

起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的各位大牛们讲事件委托基本上都用了同一个例子,就是取快递来解释这个现象,我仔细揣摩了一下,这个例子还真是恰当,我就不去想别的例子来解释了

vue监听滚动事件,实现滚动监听

在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg

vue监听滚动事件,实现滚动监听(scroll滚动)

在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <script type="text/javascript" src="