JS——事件的绑定与解绑

时间：2022-09-10 21:40:17

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——事件的绑定与解绑的更多相关文章

  1. jquery中事件重复绑定以及解绑问题

    一般的情况下,对于这种情况,我们常规的思路是,先解绑,再绑定,如下: $(selector).unbind('click').bind('click',function(){....}); 当这样会有 ...

  2. jQuery事件绑定、解绑、命名空间

    jQuery事件绑定.解绑.命名空间 <%@ page language="java" import="java.util.*" pageEncoding ...

  3. React事件绑定与解绑

    React中事件分类 React中事件绑定分为两种: 1.直接添加在React元素上的事件,这是React在基于Virtual DOM的基础上实现的符合w3c规范的合成事件(SyntheticEven ...

  4. 兼容8事件绑定与解绑addEventListener、removeEventListener和ie的attachEvent、detachEvent

    兼容8事件绑定与解绑addEventListener.removeEventListener和ie的attachEvent.detachEvent   ;(function(){ // 事件绑定 bi ...

  5. jquery 事件的绑定&comma;触发和解绑

    js和jquery绑定的区别? HTML或原生js是单一对应绑定的,绑多了只留最后一个.jQuery是追加绑定的,绑多少执行多少.这个在每一本jQuery的书中都是首先提到的事情. jquery绑定与 ...

  6. Service的启动与停止、绑定与解绑

    ---恢复内容开始--- Service的意义就在于当软件停止之后还可以在背景中进行运行,换句话也就是说,比如一个音乐播放器,当我们退出音乐播放器的时候,还是希望它在背景中运行,也就是一直播放着音乐, ...

  7. 从零开始学 Web 之 DOM（六）为元素绑定与解绑事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...

  8. 使用JavaScript动态的绑定、解绑 a 标签的onclick事件，防止重复点击

    页面上的 a 标签如下: <a class="more" style="cursor: pointer;" id="commentMore&qu ...

  9. js：事件（注册、解绑、DOM事件流、事件对象、事件委托）

    1.注册事件 (1)传统方式注册事件 <body> <button id="b1">请点击</button> <script> va ...

随机推荐

  1. css页面布局

    写在前面: 页面布局整体上可以分为两类:固定宽度(一般固定960px):流式布局:将流式布局转换为固定布局很容易,只需要外围再包括一个div,为其设置宽度即可. html默认的布局方式是将每个块状标签 ...

  2. 【转】将 Linux 应用程序移植到 64 位系统上

    原文网址:http://www.ibm.com/developerworks/cn/linux/l-port64.html 随着 64 位体系结构的普及,针对 64 位系统准备好您的 Linux® 软 ...

  3. Wide character in print at hcp&period;pl line 21&period;

    jrhmpt01:/root# cat -n hcp.pl 1 use LWP::UserAgent; 2 use Encode; 3 $ua = LWP::UserAgent->new; 4 ...

  4. DataReader和DataSet的区别以及使用

    DataReader和DataSet这两个对象都可以将检索的关系数据存储在内存中.它们在功能使用方面非常相似,但是它们不可以相互替换. 主要区别如表所示:   DataReader DataSet 数 ...

  5. 使用 mulan-1&period;5&period;0 如何构造&period;arff文件

    1. 为什么要使用mulan 我用mulan来做多标签数据的分类,但是mulan的输入数据由两个文件控制,一个是data.arff文件,这个文件列出的所有的属性以及这些属性值的类型和他们对应的值.la ...

  6. swift之向ftp服务器传文件

    在 mac 上如何使用 xcode, swift 语言开发一个向 ftp 服务器上传文件的工具? 使用的是第三方库 Rebekka,下载地址为:https://github.com/Constanti ...

  7. tensorflow 根据节点名称获取节点

    ckpt_file = os.path.join(self.args.bert_dir, 'model.ckpt-6123') # 获取图的reader reader = self.tf_instan ...

  8. 分布式交易系统的并发处理&comma; 以及用Redis和Zookeeper实现分布式锁

    交易系统 交易系统的数据结构 支付系统API通常需要一个“订单号”作为入参, 而实际调用API接口时使用到的往往不是真正意义的业务订单号, 而是交易订单号.  支付系统的API会使用“商户号+订单号” ...

  9. Intel daal4py demo运行过程

    daal安装(记得先安装anaconda): git clone https://github.com/IntelPython/daal4py.git cd daal4py conda create ...

  10. SQL的别名和SQL的执行顺序和SQL优化

    SQL的别名 1.不可以在where子句中使用列名的别名,即select name t from emp where t>2999;是不允许的 2.使用别名的好处: 提高SQL的易读性 提高SQ ...

相关文章