JS——事件的绑定与解绑
1、绑定形式
ele.addEventListener(evtName, fn)
ele["on" + evtName] = function () {}
ele.onclick = function () {}
2、addEventListener：事件监听器。 原事件被执行的时候，后面绑定的事件照样被执行，不会被层叠掉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>绑定事件</button>
<script>
var btnEle = document.getElementsByTagName("button")[0];
bindEvt2(btnEle, "click", fn1);
bindEvt2(btnEle, "click", fn2); function fn1() {
console.log("你是美丽的人");
} function fn2() {
console.log("你是个坏人");
} function bindEvt2(ele, evtName, fn) {
ele.addEventListener(evtName, fn);
}
</script>
</body>
</html>
//九尺龙泉万卷书，上天生我意何如。
//不能报国平天下，枉为男儿大丈夫。
注意事项：ele["on" + evtName]与ele.onclick绑定的方式会层叠到之前的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>点击</button>
<script>
var btn=document.getElementsByTagName("button")[0];
btn.onclick=function () {
console.log("你是美人");
}
btn["onclick"]=function () {
console.log("谢谢呀");
}
</script>
</body>
</html>
//谢谢呀
3、addEventListener原理：之所以可以不层叠之前注册事件，主要是判断之前是否注册了此类事件，如果注册了就先执行此事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>点击</button>
<script>
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
console.log("你是美人");
}
addEvent(btn, "click", fn); function addEvent(ele, evtName, fn) {
var oldEvnet = ele["on" + evtName];//如果进入绑定事件本身，那么该事件已经本绑定了，所以获取旧的事件必须在新的事件绑定之前
ele["on" + evtName] = function () {
//如果没有被定义过事件该事件源的该事件属性应该是null对应的boolean值是false
//如果已经定义过事件该事件源的该事件属性应该是function本身对应的boolean值是true
if (oldEvnet) {
oldEvnet();//因为oldEvent本身他就是函数本身，那么后面加一个();就是执行函数
fn();
}
else {
fn();
}
}
} function fn() {
console.log("谢谢呀")
}
</script>
</body>
</html>
//你是美人
//谢谢呀
4、事件绑定的兼容写法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button>赋诗</button>
<script>
var btn = document.getElementsByTagName("button")[0]; // 火狐谷歌IE9+支持addEventListener
// btn.addEventListener("click",fn1);
// btn.addEventListener("click",fn2); // IE678支持attachEvent
// btn.attachEvent("onclick",fn1);
// btn.attachEvent("onclick",fn2); //兼容写法
EventListen = {
addEvent: function (ele,fn,str) {
//通过判断调用的方式兼容IE678
//判断浏览器是否支持该方法，如果支持那么调用，如果不支持换其他方法
if(ele.addEventListener){
//直接调用
ele.addEventListener(str,fn);
}else if(ele.attachEvent){
ele.attachEvent("on"+str,fn);
}else{
//在addEventListener和attachEvent都不存在的情况下，用此代码
ele["on"+str] = fn;
}
}
} EventListen.addEvent(btn,fn1,"click")
EventListen.addEvent(btn,fn2,"click") function fn1(){
console.log("九尺龙泉万卷书，上天生我意何如。");
}
function fn2(){
console.log("不能报国平天下，枉为男儿大丈夫。");
} </script>
</body>
</html>
//九尺龙泉万卷书，上天生我意何如。
//不能报国平天下，枉为男儿大丈夫。
5、事件解绑方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>点击</button>
<script>
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
console.log("你是美人");
}
btn.onclick = null;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button>赋诗</button>
<script>
var btn = document.getElementsByTagName("button")[0];
EventListen = {
addEvent: function (ele, fn, str) {
//通过判断调用的方式兼容IE678
//判断浏览器是否支持该方法，如果支持那么调用，如果不支持换其他方法
if (ele.addEventListener) {
//直接调用
ele.addEventListener(str, fn);
} else if (ele.attachEvent) {
ele.attachEvent("on" + str, fn);
} else {
//在addEventListener和attachEvent都不存在的情况下，用此代码
ele["on" + str] = fn;
}
},
removeEvent: function (ele, fn, str) {
if (ele.removeEventListener) {
ele.removeEventListener(str, fn);
} else if (ele.detachEvent) {
ele.detachEvent("on" + str, fn);
} else {
ele["on" + str] = null;
}
}
}
EventListen.addEvent(btn, fn, "click");
EventListen.removeEvent(btn, fn, "click"); function fn() {
alert(1);
}
</script>
</body>
</html>
注意事项：ele.onclick只能用ele.onclick=null，removeEvent只能解绑addEventListener，detachEvent只能解绑attachEvent。
JS——事件的绑定与解绑的更多相关文章
- jquery中事件重复绑定以及解绑问题
一般的情况下,对于这种情况,我们常规的思路是,先解绑,再绑定,如下: $(selector).unbind('click').bind('click',function(){....}); 当这样会有 ...
- Vue学习之--------组件自定义事件（绑定、解绑）（2022/8/21）
文章目录 1.基础知识 2.代码实例 2.1 App.vue 2.2 school.vue 2.3 student.vue 3.测试效果(略) 4.实际应用(在组件化编码实战三的基础上改进) 4.1 ...
- jQuery事件绑定、解绑、命名空间
jQuery事件绑定.解绑.命名空间 <%@ page language="java" import="java.util.*" pageEncoding ...
- React事件绑定与解绑
React中事件分类 React中事件绑定分为两种: 1.直接添加在React元素上的事件,这是React在基于Virtual DOM的基础上实现的符合w3c规范的合成事件(SyntheticEven ...
- 兼容8事件绑定与解绑addEventListener、removeEventListener和ie的attachEvent、detachEvent
兼容8事件绑定与解绑addEventListener.removeEventListener和ie的attachEvent.detachEvent ;(function(){ // 事件绑定 bi ...
- jquery 事件的绑定,触发和解绑
js和jquery绑定的区别? HTML或原生js是单一对应绑定的,绑多了只留最后一个.jQuery是追加绑定的,绑多少执行多少.这个在每一本jQuery的书中都是首先提到的事情. jquery绑定与 ...
- Service的启动与停止、绑定与解绑
---恢复内容开始--- Service的意义就在于当软件停止之后还可以在背景中进行运行,换句话也就是说,比如一个音乐播放器,当我们退出音乐播放器的时候,还是希望它在背景中运行,也就是一直播放着音乐, ...
- 从零开始学 Web 之 DOM（六）为元素绑定与解绑事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...
- 使用JavaScript动态的绑定、解绑 a 标签的onclick事件，防止重复点击
页面上的 a 标签如下: <a class="more" style="cursor: pointer;" id="commentMore&qu ...
随机推荐
- [ZJOI2009]硬币游戏
Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 920 Solved: 406[Submit][Status][Discuss] Descriptio ...
- E - Super Jumping! Jumping! Jumping! DP
Nowadays, a kind of chess game called “Super Jumping! Jumping! Jumping!” is very popular in HDU. May ...
- JAVA包装类的缓存范围
JAVA包装类的缓存范围 前两天面试遇到两个关于JAVA源码的问题,记录下来提醒自己. 1.写出下面的输出结果 System.out.println(Integer.valueOf("100 ...
- 转：SQL 索引最左前缀原理
表结构和索引列 假设数据库中表是这样的: 我们只考虑一张表employees.titles: 索引是(emp_no,title,from_date) SHOW INDEX FROM employee ...
- java编程思想——java IO系统
一.什么是IO io在本质上是单个字节的移动.而流能够说是字节移动的载体和方式,它不停的向目标处移动数据.我们要做的就是依据流的方向从流中读取数据或者向流中写入数据. 二.java中支持IO操作的库类 ...
- Java进程堆外内存（off heap）大小
一.使用ByteBuffer.allocateDirect分配的off heap内存大小 本机进程 在Jvisualvm中安装 Mbeans插件.然后查看java.nio/BufferPool/dir ...
- 《iOS Human Interface Guidelines》——Wallet
Wallet Wallet(钱包)帮助人们查看和管理Pass(凭证),这是一种相似于登机牌.优惠券.会员卡.奖励卡和各种票的物理凭证的数字替代.Wallet也同意人们加入信用卡.借记卡和储值卡来和Ap ...
- border-image 和 border-color 不能同时使用问题
遇到如下问题: UI 给的设计,某部分,上边框为 图片,下边框为灰色横线. 看到这个的第一反应是,上边框用 border-image ,为了只让上边框显示图片,所以只给上边框宽度为所需宽度,我的图是 ...
- QT信号槽与Delphi事件的对比
最近学QT,对信号槽机制感到有点新鲜: QObject::connect(slider, SIGNAL(valueChanged(int)), lcd, SLOT(display(int))); 自己 ...
- return在Java中的两个作用
Java中return的两个作用: (1)返回方法指定类型的值(这个值总是确定的),也可以是对象 (2)方法的结束