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. Vue学习之--------组件自定义事件（绑定、解绑）（2022/8/21）

    文章目录 1.基础知识 2.代码实例 2.1 App.vue 2.2 school.vue 2.3 student.vue 3.测试效果(略) 4.实际应用(在组件化编码实战三的基础上改进) 4.1 ...

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

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

  4. React事件绑定与解绑

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

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

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

  6. jquery 事件的绑定,触发和解绑

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

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

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

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

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

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

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

随机推荐

  1. JavaMail发送邮件后再通过JavaMail接收格式问题

    复杂邮件发送问题 转载请标明出处!https://www.cnblogs.com/dream-saddle/p/10978113.html 关于 JavaMail 如何发送邮件这里就不赘述了,网上有很 ...

  2. Swift具体解释之六----------------枚举、结构体、类

    枚举.结构体.类 注:本文为作者自己总结.过于基础的就不再赘述 ,都是亲自測试的结果.如有错误或者遗漏的地方.欢迎指正,一起学习. 1.枚举 枚举是用来定义一组通用类型的一组相关值 ,关键字enum ...

  3. 1. 少了一个PermMissingElem Find the missing element in a given permutation.

    少了一个: package com.code; import java.util.Arrays; public class Test03_2 { public static int solution( ...

  4. hp 1810-24g switch reset

    Specific steps to execute the factory default reset on the switch are: 1. Using a small, thin tool w ...

  5. [转]Android程序框架设计

    这篇文章主要内容来自于之前我讲的一个PPT文档,现在将其整理如下.欢迎指正.以下的内容都是来自于我自身的经验,欢迎大家多提自己的建议. 1.一些概念 模式的定义: 每个模式都描述了一个在我们的环境中不 ...

  6. 【源代码剖析】tornado-memcached-sessions —— Tornado session 支持的实现（二）

    客官您最终回头了! 让我们本着探(zuo)索(si)精神把 session.py 看完吧... 首先看看须要的库: pickle 一个用于序列化反序列化的库(听不懂?你直接看成和 json 一样作用即 ...

  7. 关于三星手机调用相机返回后activity被回收的问题

    今天遇到个问题很蛋疼啊,别的手机没问题,唯独三星机型的手机跳转到相机之后,回来activity没了.这个或许是三星内部回收机制的关系,因为相机打开之后消耗会比较大, 所以后面的进程都给暂时回收掉了,加 ...

  8. hdoj--1205--吃糖果（规律）

     吃糖果 Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others) Total Sub ...

  9. Android SDK Manager 无法更新问题（转载）

    先看看如何加快更新速度,再说如何更新. 首先更新host文件,如图,打开目录 C:\Windows\System32\drivers\etc,在目录下有hosts文件 打开方式选用“记事本”打开 将一 ...

  10. Linux必知必会的目录结构

    1.目录结构 /bin 二进制文件 命令 /sbin 超级命令 只有root用户可以使用 /boot 系统的引导文件 系统内核 /dev 设备文件 光盘 硬盘分区 /etc 系统配置文件 /home ...