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 ...
随机推荐
- 【Java基础】Java基本数据类型与位运算
1.赋值运算符 赋值使用操作符“=”.它的意思是“取右边的值(即右值),把它复制给左边(即左值)”.右值可以是任何 常数.变量或者表达式 (只要它能 生成 一个值就行).但左值必须是一个明确的,已命名 ...
- project处理 InteropServices.COMException 异常
project文件无法上传,在上传中的hangfire出现了这个异常 System.Runtime.InteropServices.COMException 这个是因为website的权限是IUser ...
- Mybatis错误——Could not find parameter map java.util.Map
错误信息 org.apache.ibatis.builder.IncompleteElementException: Could not find parameter map java.util.Ma ...
- RDLC报表总结
这2天纠结的报表基本上已近完成大部分功能.现在总结一下自己近期的学习成果 首先制作微软RDLC报表由以下三部分构成:1.制作自己的DateSet集合(就是报表的数据集):2.制作自己的报表文件.rdl ...
- Python中range和xrange的异同之处
range 函数说明:range([start,] stop[, step]).依据start与stop指定的范围以及step设定的步长,生成一个序列. range演示样例: >> ...
- Android之实现ViewPager+Fragment左右滑动
近期看新闻发现新闻的页面是能够左右滑动的.于是自己就好奇起来了,之前做过ViewPager展示图片,在想怎么载入页面呢?研究了一下.发现就是加入了Fragment,废话不多说,揭秘奥秘的时候到了. 使 ...
- Ubuntu 16.04 安装CodeBlocks
首先将软件源添加进来,就是运行以下命令 sudo add-apt-repository ppa:damien-moore/codeblocks-stable sudo apt-get update 完 ...
- 【转】Android 关闭多个视图Intent.FLAG_ACTIVITY_CLEAR_TOP用法
如果已经启动了四个Activity:A,B,C和D.在D Activity里,我们要跳到B Activity,同时希望C finish掉, 可以在startActivity(intent)里的inte ...
- Linux/Android多点触摸协议【转】
本文转载自: 链接点击打开链接 关于Linux多点触摸协议大家可以参考kernel中的文档:https://www.kernel.org/doc/Documentation/input/multi-t ...
- CDOJ 1330 柱爷与远古法阵（高斯消元）
CDOJ 1330 柱爷与远古法阵(高斯消元) 柱爷与远古法阵 Time Limit: 125/125MS (Java/Others) Memory Limit: 240000/240000K ...