JS事件监听器
JS事件监听器
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Javascript事件监听</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<button id="Button1">测试</button>
<script type="text/javascript">
function addEventHandler(target, type, func) {
if (target.addEventListener)
target.addEventListener(type, func, false);
else if (target.attachEvent)
target.attachEvent("on" + type, func);
else target["on" + type] = func;
}
function removeEventHandler(target, type, func) {
if (target.removeEventListener)
target.removeEventListener(type, func, false);
else if (target.detachEvent)
target.detachEvent("on" + type, func);
else delete target["on" + type];
}
var Button1 = document.getElementById("Button1");
var test1 = function () { alert(); };
function test2() { alert("") }
addEventHandler(Button1, "click", test1);
addEventHandler(Button1, "click", test2);
addEventHandler(Button1, "click", function () { alert(""); });
addEventHandler(Button1, "click", function () { alert(""); });
removeEventHandler(Button1, "click", test1);
removeEventHandler(Button1, "click", test2);
removeEventHandler(Button1, "click", function () { alert(""); });
</script>
</body>
</html>
弹出3,4
解除绑定事件的时候一定要用函数的句柄,把整个函数写上是无法解除绑定的。
所以3没有解除
添加
console.dir(Button1);
console.dir(Button1["onclick"]);
console.dir(Button1.onclick);
console.dir(Button1.onclick());
Button1.onclick = function () {
alert("hongda");
}
Button1.onclick = function () {
alert("hongda2");
}
Button1.onclick = function () {
alert("hongda3");
}
点击时弹出3,4,hongda3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Javascript事件监听</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<button id="Button1">测试</button>
<script type="text/javascript">
function addEventHandler(target, type, func) {
if (target.addEventListener)
target.addEventListener(type, func, false);
else if (target.attachEvent)
target.attachEvent("on" + type, func);
else target["on" + type] = func;
}
function removeEventHandler(target, type, func) {
if (target.removeEventListener)
target.removeEventListener(type, func, false);
else if (target.detachEvent)
target.detachEvent("on" + type, func);
else delete target["on" + type];
}
var Button1 = document.getElementById("Button1");
var test1 = function () { alert(); };
function test2() { alert("") }
addEventHandler(Button1, "click", test1);
addEventHandler(Button1, "click", test2);
addEventHandler(Button1, "click", function () { alert(""); });
addEventHandler(Button1, "click", function () { alert(""); });
removeEventHandler(Button1, "click", test1);
removeEventHandler(Button1, "click", test2);
removeEventHandler(Button1, "click", function () { alert(""); }); Button1.onclick = function () {
alert("hongda");
}
Button1.onclick = function () {
alert("hongda2");
}
Button1.onclick = function () {
alert("hongda3");
}
console.dir(Button1);
console.dir(Button1["onclick"]);
console.dir(Button1.onclick);
console.dir(Button1.onclick());
</script>
</body>
</html>
弹出3,4,hongda3
Button1.onclick();
只弹出hongda3
如果只有监听器,不用Button1.onclick=function(){}
那么调用Button1.onclick();
可见事件监听器与对应的对象的事件属性是分开的,只在事件触发时调用,
如果有事件属性就只调用事件属性,且只调用最后一个
如果没有事件属性,那就调用事件监听器,全部一个一个的调用。
fireEvent,ie中有的,firefox中没有
与onclick的区别是
如果没有给事件属性onclick赋值方法,Button1.fireEvent("onclick")不执行,但也不会报错,它跟onclick一样也不调用事件监听
JS事件监听器的更多相关文章
- js事件监听器用法实例详解
这篇文章主要介绍了js事件监听器用法,以实例形式较为详细的分析了javascript事件监听器使用注意事项与相关技巧,需要的朋友可以参考下本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分 ...
- js事件监听器用法实例详解-注册与注销监听封装
本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分析如下: 1.当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,也就是说,在对象的onclick事 ...
- JS事件监听器 addEventListener
一:例如:给id为mydiv1的div元素添加click事件监听器document.getElementById("mydiv1").addEventListener(" ...
- passive 的事件监听器
很久以前,addEventListener() 的参数约定是这样的: addEventListener(type, listener, useCapture) 后来,最后一个参数,也就是控制监听器是在 ...
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
- Node.js 事件
Node.js 事件 Node.js 所有的异步I/O 操作在完成时都会发送一个事件到事件队列. Node.js里面的许多对象都会分发事件:一个net.Server对象会在每次有新连接时分发一个事件, ...
- js事件监听机制(事件捕获)总结
在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...
- JS 事件与事件对象小结
JavaScript与HTML之间的交互是通过事件来实现的.IE9,chrome,Firefox,Opera,Safari均实现了DOM2级规范中定义的标准DOM事件,而IE8和IE8以下版本仍然保留 ...
- Node.js事件发射器
在Node很多对象发出事件,例如net.Server每个同级连接到它,一个fs.readStream发出打开文件事件时,每次都发出一个事件. 它发出事件的所有对象都是events.EventEmitt ...
随机推荐
- QtCore是Qt的精髓(包括五大模块:元对象系统,属性系统,对象模型,对象树,信号槽)
作者:小豆君的干货铺链接:https://www.zhihu.com/question/27040542/answer/218384474来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业 ...
- SqlServer--bat批处理执行sql语句1-osql
首先需要知道,此处使用的批处理命令是osql ,如果安装了SqlServer,目录类似: D:\Program Files\Microsoft SQL Server\100\Tools\Binn 脚本 ...
- [LeetCode] 529. Minesweeper_ Medium_ tag: BFS
Let's play the minesweeper game (Wikipedia, online game)! You are given a 2D char matrix representin ...
- Redis日常使用随笔
Redis常用配置:1.采用master与slave互为主从的方式,两条重要命令:redis 127.0.0.1:6379> SLAVEOF NO ONEredis 127.0.0.1:6379 ...
- SpringMyBatisDay01
1.Spring简介 Spring是一个开源轻量级应用开发框架,其目的是用于简化企业级应用程序的开发,降低侵入性Spring提供IOC和AOP功能,可以将组件(就是类)之间的耦合度降至最低,解耦,便于 ...
- DW课堂练习 用所学的知识去制作一个 (邮箱的注册页面)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 剑指offer3
输入一个链表,从尾到头打印链表每个节点的值. 思路:首先借助一个栈,遍历链表中的每一个值,然后存储到栈中,利用栈的先进后出特点,然后添加到数组中返回. package demo3; import ja ...
- 如何在SQL Server查询语句(Select)中检索存储过程(Store Procedure)的结果集?
如何在SQL Server查询语句(Select)中检索存储过程(Store Procedure)的结果集?(2006-12-14 09:25:36) 与这个问题具有相同性质的其他描述还包括:如何 ...
- uva11383 转化为 二分图匹配
给定一个n*n矩阵,每个格子里都有一个正整数w(i,j).你的任务是给每行确定一个整数row(i),没列也确定一个正整数col(i),使得对于任意格子(i,j),w(i,j) <= row(i) ...
- CHM无法正常显示的问题
很喜欢看CHM电子书,感觉篇幅不是很长,而且可以索引:但是昨天遇到这个问题: 打开文件的时候发现: 很喜欢看CHM电子书,感觉篇幅不是很长,而且可以索引:但是昨天遇到这个问题: 打开文件的时候发现: ...