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. 《Spring in action》之Spring之旅

    Spring框架作用是简化java开发的复杂性.下面是spring in action 对spring初步介绍. 一.主要有4种关键策略: 1. 基于POJO的轻量级和最小侵入性编程 . 2. 通过依 ...

  2. Quartz.Net 使用心得（二）

    工作中需要做一个简易的Cron字符串生成器,并且要获取生成的Cron后面10次的触发时间来验证. 此问题困扰了我很久时间,CSDN上有一个Java版本的,本人菜鸟,想移植到C#中,语法上怎么也不通过. ...

  3. spring项目启动需要的几个注解

    1.@ComponentScan注解,spring context包下,可以理解嘛,扫描srping bean放在ioc容器中的. ApplicationContext是接口,就是IOC容器嘛,也在这 ...

  4. linux下nginx+svn

    http://fengqi.me/unix/23.html 因为没有什么可以定制的, 所以svn直接使用系统自带的包管理软件安装, 以centos系列为例, 命令如下: yum install sub ...

  5. cordova windows环境配置

    * 安装Cordova 1.cordova是利用nodeJS进行管理,所以要先下载nodeJS. 2. 打开命令窗口,输入:“npm install -g cordova”即可安装 3. 安装后,输入 ...

  6. LeetCode 9. Palindrome Number （回文数字）

    Determine whether an integer is a palindrome. Do this without extra space. 题目标签:Math 题目给了我们一个int x, ...

  7. requireJS defined undefined

    requeireJS 在使用时,在 defined 注入一个依赖,路径正确,却发现获得的值却是 undefined .这时候就要考虑是否是“循环依赖”的原因了. 循环依赖就是: a.js 依赖了 b. ...

  8. SoapUI在Jenkins中的配置

    Jenkins Label: windows_ws_test   已有Jenkins环境变量 %READYAPI_PRO_HOME%  - <D:\Program Files\SmartBear ...

  9. Spark2.0 VS Spark 1.* -------SparkSession的区别

    Spark .0以前版本: val sparkConf = new SparkConf().setAppName("soyo") val spark = new SparkCont ...

  10. Linux系统的整体目录结构和文件解析

    Linux系统目录结构 使用 ls / 查看系统的文件目录: /:根目录,根目录下一般只存放子目录,不存放文件.在linux系统中所有的文件都挂载该目录下. /bin:命令目录. 存放系统的可执行的二 ...