事件绑定、解除和监听

Mozilla 中:

addEventListener的使用方式:

target.addEventListener(type, listener, useCapture);

target: 文档节点、document、window 或 XMLHttpRequest。

type: 字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。

listener :实现了 EventListener 接口或者是 JavaScript 中的函数。

useCapture :是否使用捕捉,一般用 false 。例如:document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
这里牵扯到“事件流”的概念。侦听器在侦听时有三个阶段:捕获阶段、目标阶段和冒泡阶段。顺序为:捕获阶段(根节点到子节点检查是否调用了监听函数)→目标阶段(目标本身)→冒泡阶段(目标本身到根节点)。此处的参数确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。 如果将 useCapture 设置为 true,则侦听器只在捕获阶段处理事件,而不在目标或冒泡阶段处理事件。 如果useCapture 为 false,则侦听器只在目标或冒泡阶段处理事件。 要在所有三个阶段都侦听事件,请调用两次 addEventListener,一次将 useCapture 设置为 true,第二次再将useCapture 设置为 false

IE 中:

target.attachEvent(type, listener);

target: 文档节点、document、window 或 XMLHttpRequest。

type: 字符串,事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。

listener :实现了 EventListener 接口或者是 JavaScript 中的函数。 例如:document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});

==================================

两者使用的原理:可对执行的优先级不一样,下面实例讲解如下:
attachEvent方法,为某一事件附加其它的处理事件。(不支持Mozilla系列)
addEventListener方法 用于 Mozilla系列
举例: document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;如果这样写,那么将会只有medhot3被执行
写成这样:
var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);

执行顺序为method3->method2->method1

来自:     http://www.jb51.net/article/18220.htm

时间: 2024-08-29 13:45:04

事件绑定、解除和监听的相关文章

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之间的消息通信提供了支持.比如,我们可以在用户注册成功后,发送一份注册成功的邮件至用户邮箱或者发送短信.使用事件其实最大作用,应该还是为了业务解耦,毕竟用户注册成功后,注册服务的事情就做完了,只需要发布一个用户注册成功的事件,让其他监听了此事件的业务系统去做剩下的事件就好了.对于事件发布者而言,不需要关心谁监听了该事件

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

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

redis绑定多个监听ip或者取消绑定

如果系统某个端口6379绑定监听ip127.0.0.1,则该端口只会通过来自这个ip的连接请求,拒绝非监听ip主机的连接. telnet 10.10.86.211 9000Trying 10.10.86.211...telnet: connect to address 10.10.86.211: Connection refused 另外一个原因:防火墙拦截.(只需要在被telnet服务器的firewall中放开相应主机ip,端口即可) 若为该端口绑定监听ip,而造成connection ref

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="

ExtJS 下拉框监听事件、日期选择器监听事件、实现动态给items添加删除数据

1.下拉框 下拉框选择时,触发事件的方法: 在 Ext.form.ComboBox 组件中新增 listeners 监听事件 基本写法为:  listeners{'事件',function(){处理方法}} listeners:{ select:{ fn:function(combo,record,index) { } } }   2.日期选择器 选择日期时,值发生变化,并且在失去焦点之前触发此事件,也就是说如果此日期组件的值发生变化,而焦点并没有失去,这个事件也就不会触发.解决方法: menu

在input元素上用非绑定的方式监听回车事件并传递参数

场景是动态生成html元素,为生成的input添加事件. 要求有两点:非绑定的方式并且需要传递参数 :参数为方法名称,回调该方法并将input的值作为参数. 参考实现如下: input写法 tmp.push('<input type="text" id="myInput" onkeydown="if(event.keyCode==13) {_callBack(' + userFunction + ')}">'); 其中 userFun