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. Error:java: Internal compiler error: java.lang.Exception: java.lang.NoClassDefFoundError解决

    场景:将Eclipse的可以运行的项目转到IDEA发现一个奇怪的错误 今天用IDEA2018.1运行SpringBoot项目报错如下: Error:java: Internal compiler er ...

  2. N - Is It A Tree? 并查集

    A tree is a well-known data structure that is either empty (null, void, nothing) or is a set of one ...

  3. 夜话JAVA设计模式之单例模式（单件模式Singleton）

    单例模式也叫单件模式,就是确保一个类只有一个实例,并提供一个全局访问点. 设计成单例即把某个类设计成我们自己管理的单独实例,避免实例对象的重复创建,我们只有通过单例类的全局访问点获取实例. 下面来看金 ...

  4. Spring Boot中使用Swagger2生成RESTful API文档（转）

    效果如下图所示: 添加Swagger2依赖 在pom.xml中加入Swagger2的依赖 <!-- https://mvnrepository.com/artifact/io.springfox ...

  5. vue2的简单Popup (Confirm,Alert)组件

    github:  https://github.com/longfei59418888/vui   (记得给一个 start,以后有一起讨论,各种好组件) demo :http://60.205.20 ...

  6. [JavaEE] Injecting Bean

    So what is a Bean, in JavaEE, any class expect Entity are Bean. One usefully thing in Bean is Depend ...

  7. C#之快速排序

    算法描述 1.假定数组首位元素为“枢轴”,设定数列首位(begin)与末位(end)索引: 2.由末位索引对应元素与“枢轴”进行比较,如果末位索引对应元素大于“枢轴”元素,对末位索引减一(end--) ...

  8. BestCoder Round #59 (div.2) B. Reorder the Books 想法题

    Reorder the Books 问题描述 dxy家收藏了一套书,这套书叫<SDOI故事集>,<SDOI故事集>有n(n\leq 19)n(n≤19)本,每本书有一个编号,从 ...

  9. _io.TextIOWrapper

    ''' SELECT * FROM Info_Roles WHERE Flag=1 LIMIT 2; select top y * from 表 where 主键 not in(select top ...

  10. [1525] Cow Xor

    问题描述 农民约翰在喂奶牛的时候被另一个问题卡住了.他的所有N(1 <= N <= 100,000)个奶牛在他面前排成一行(按序号1..N的顺序),按照它们的社会等级排序.奶牛#1有最高的 ...