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. PAT Broken Keyboard (20)

    题目描写叙述 On a broken keyboard, some of the keys are worn out. So when you type some sentences, the cha ...

  2. Filters.h各种信号恢复滤波器头文件

    这篇文章有部分原理:http://blog.csdn.net/u013467442/article/details/41125473 代码下载地址:http://read.pudn.com/downl ...

  3. 细数MQ那些不得不说的8大好处

    消息队列(MQ)是目前系统架构中主流方式,在大型系统及大数据中广泛采用.对任何架构或应用来说, MQ都是一个至关重要的组件.今天我们就来细数MQ那些不得不说的好处. 好处一:解耦 在项目启动之初来预测 ...

  4. BusyBox telnetd配置

    配置telnetd遇到的一些坑,记录一下 BusyBox版本1.22.1 Networking Utilities -->[*] telnetd 错误1: Escape character is ...

  5. Android TP（三）【转】

    本文转载自:http://blog.csdn.net/bi511304183/article/details/9303259 平台信息:内核:linux2.6/linux3.0系统:android/a ...

  6. bzoj1297 [SCOI2009]迷路——拆点+矩阵快速幂

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1297 一看感觉是矩阵快速幂之类的,但边权不好处理啊: 普通的矩阵快速幂只能处理边权为1的,所 ...

  7. JSP-Runoob：JSP XML 处理数据

    ylbtech-JSP-Runoob:JSP XML 处理数据 1.返回顶部 1. JSP XML 数据处理 当通过HTTP发送XML数据时,就有必要使用JSP来处理传入和流出的XML文档了,比如RS ...

  8. 在PL/SQL使用游标获取数据及动态SQL

    1.游标概念: 当在PL/SQL块中执行DML(增删改)时,Oracle会为其分配上下文区(Context Area),游标是指向上下文区的指针 2.  游标分类: A.  隐式游标 a.  在PL/ ...

  9. 产生冠军(toposort)

    http://acm.hdu.edu.cn/showproblem.php?pid=2094 #include <stdio.h> #include <iostream> #i ...

  10. phpci发送邮件

    $config['protocol']='smtp'; $config['smtp_host']='smtp.163.com';//163服务器,之前用了qq服务器死活发不出去,不知道什么原因,可以自 ...