eventListener

最新推荐文章于 2022-09-06 01:26:47 发布
最新推荐文章于 2022-09-06 01:26:47 发布
阅读量186 收藏
点赞数
分类专栏： js event 文章标签： js event js event
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29209481/article/details/79274226
版权

//感谢杨老师

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width: 500px;
height:500px;
background-color: yellow;
}
#outer{
width: 300px;
height: 300px;
background-color: green;
}
#inner{
width: 100px;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner"></div>
</div>
<script type="text/javascript">
var body = document.body;
console.log(body.attachEvent);
// if(body.addEventListener){
// body.addEventListener('click',bodyAlert)
// }else if(body.attachEvent){
// body.attachEvent('onclick',bodyAlert)
// }else{
// body.onclick = bodyAlert;
// }
var EventUtil = {
   addHandler: function(element, type, handler){
       if (element.addEventListener){
           element.addEventListener(type, handler, false);
       } else if (element.attachEvent){
           element.attachEvent("on" + type, handler);
       } else {
           element["on" + type] = handler;
       }
   },
   removeHandler: function(element, type, handler){
       if (element.removeEventListener){
           element.removeEventListener(type, handler, false);
       } else if (element.detachEvent){
           element.detachEvent("on" + type, handler);
       } else {
           element["on" + type] = null;
}
}
};
EventUtil.addHandler(body,'click',bodyAlert1);
EventUtil.addHandler(body,'click',bodyAlert2);
// document.querySelector('#outer').addEventListener('click',function(){alert(this.nodeName)},true)
// document.querySelector('#outer').addEventListener('click',function(){alert(this.id)},true)


//document.body.removeEventListener('click',bodyAlert);


function bodyAlert1(){
console.log(this)
}
function bodyAlert2(){
console.log(123)
}
</script>
</body>

qq_29209481
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解js中EventListener监听器（事件委托/事件代理）
m0_46862838的博客
05-11 4227
监听器： 语法：**addEventListener(event,function,userCapture)**方法 第一个参数写事件句柄，不需要加"on",直接写时间名就可以（如：click） 第二个参数是事件触发后调用的函数 第三个参数是个布尔值用于描述事件是冒泡还是捕获,该参数是可选值，默认值为false，即冒泡传递，当值为true时，为捕获传递 触发监听器事件: //第二个参数写匿名函数 <button id="btn"></button> <script> do
JS中的冒泡
m0_71912776的博客
08-18 784
例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件），或者按钮的父级绑定有事件函数，当该点击事件发生在按钮上，按钮本身并无处理事件函数，则传播到父级去处理。type： 字符串，事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。---针对FireFox。...
JavaScript-事件
qq_52822043的博客
03-24 1540
1. 注册事件（绑定事件） 给元素添加事件，成为注册事件或者绑定事件 注册事件有两种方式：传统方式和方法监听注册方式 1）传统注册方式 利用on开头的时间onclick <button onclick = "alert('hi')" ></button> btn.onclick = function() {} 特点：注册事件的唯一性 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数 2）方法监听注册 W3C标准，推荐方式...
JavaScript 事件监听器列表
m0_63639281的博客
08-22 1334
JavaScript 事件监听器列表
Spring源码解读：EventListener接口
chenpeng19910926的专栏
05-05 4420
在spring中EventListener接口的源码 package java.util; /** * A tagging interface that all event listener interfaces must extend. * @since JDK1.1 */ public interface EventListener { } EventListener 解释说明了
js HTML DOM EventListener功能与用法实例分析
10-15
主要介绍了js HTML DOM EventListener功能与用法,结合实例形式分析了js HTML DOM EventListener事件监听相关用法及操作注意事项,需要的朋友可以参考下
IE8-EventListener:IE8的Polyfill
05-15
IE8-EventListener IE8的Polyfill 我怎么才能得到它？ IE8-EventListener可通过npm获得，并可以使用以下命令进行安装： npm install ie8-eventlistener 它是什么？ IE8-EventListener努力向IE8添加完全的...
C++ EventListener (C# style)-开源
05-29
这是在 c++ 中实现的 EventListener（就像在 c# 中一样）。我正在使用一些 c++11 特性（比如 final），但是如果你愿意，你可以很容易地删除它们。 检查维基页面以查看使用情况。 需要做的：线程安全； 安全处置调用...
Event Listener-开源
04-25
EventListener是一个简单高效的C ++框架，用于使用侦听器模式在图形界面或数字代码中传播事件。 可以过滤和阻止事件。 该软件包不使用任何其他库。
获取元素中的所有监听事件
qq_42880714的博客
01-12 7862
addEventListener
listener-js:侦听器Javascript
05-19
listener-js JS Listener DEMO Console log: // start处理函数 设置事件监听 start ƒ (message) { console.log("onStart", message); } // doing处理函数 设置事件监听 doing ƒ (message) { console.log("onDoing", message); } // ended处理函数 设置事件监听 ended ƒ (message) { console.log("onEnded", message); } 触发事件 start 事件调用 start start 回调传参 onStart start 回调传参 触发事件 ended 事件调用 ended ended 回调传参 onEnded ended 回调传参 触发事件 doing 事件调用 doing doing 回
JSListener:一个非常小的 javascript 库，用于广播和监听自定义 javascript 事件
06-25
JS监听器 一个非常小的 javascript 库，用于广播和侦听自定义 javascript 事件。 它允许对同一事件的多个侦听器进行侦听和调用。 使用它非常强大但很容易......例如： //specify functions to call function callMe ( msg ) { console . log ( "call me hit: " + msg ) ; called_one = true ; } function callMeAlso ( msg ) { console . log ( "call me also hit: " + msg ) ; called_two = true ; } //setup listener var jsListener = new JSListener ( ) ; jsListener .
JS EventListener
SeriousLose
06-26 507
addEventListener 添加监听的事件 阻止默认事件preventDefault() 阻止事件冒泡stopPropagation() removeEventListener 移出事件 💡 removeEventListener 需要知道你需要移出的是哪个事件处理函数。匿名函数丢弃了自身函数名，是移出不了。 💡 IE9以下的IE浏览器不支持 addEventListener...
java listener 原理_Java 监听器（Listener）的原理与实现-Fun言
weixin_28865923的博客
02-15 1426
监听器模型涉及以下三个对象，模型图如下：1)事件：用户对组件的一个操作2)事件源：发生事件的组件就是事件源3)事件监听器(处理器)：监听并负责处理事件的方法 执行顺序如下：1、给事件源注册监听器2、组件接受外部作用，也就是事件被触发3、组件产生一个相应的事件对象，并把此对象传递给与之关联的事件处理器4、事件处理器启动，并执行相关的代码来处理该事件。监听器模式：事件源注册监听器之后，当事件源触发事件...
js追加Listener
qq_37225450的博客
03-29 2074
因为使用了一个已经封装好的控件，但是我监听的change事件在原有的基础上有所添加，第一次使用此方法，特此记录 1. 获取控件 2. 使用控件.addListener('change',function(){}) 对原有监听事件进行补充 { xtype:'periodtime', id:'timetype', timeTypeStoreData:orderInqui...
getEventListener
handsomeAndHero的博客
09-06 1417
js 移除匿名事件方法
js-event(事件对象)详解
热门推荐
顺其自然~专栏
04-25 1万+
1、事件对象 Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 什么时候会产生Event 对象呢? 例如：当用户单击某个元素的时候，我们给这个元素注册的事件就会触发，该事件的本质就是一个函数，而该函数的形参接收一个event对象。 事件通常与函数结合使用，函数不会在事件发生前被执行！ 使用场景即： var oDIv = document.getElementById('box'); oDiv.onclick = function(...
js学习 DOM EventListener 以及 JavaScript事件
Huifeng Tang 的博客
11-14 912
DOM EventListener:     方法：addEvenListener(): 1.addEvenListener():            /添加句柄     方法用于向指定元素添加事件句柄 2.removeEventListener():        /移除句柄     移除方法添加的事件句柄&lt;body&gt;     &lt;p id="pid"&gt;Hello&lt...
node-v12.16.3-x86.msi
最新发布
04-25
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
EventListener
09-22
使用@EventListener注解可以实现事件监听。在方法上添加@EventListener注解，并传入需要监听的事件类型，当该事件发生时，方法会被触发执行。另外，还可以使用ApplicationListener接口来监听事件，实现该接口并重写...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值