2020-06-29

最新推荐文章于 2020-09-05 23:10:07 发布

前端小菜鸡99

最新推荐文章于 2020-09-05 23:10:07 发布

阅读量191

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_46356186/article/details/107030692

版权

笔记专栏收录该内容

29 篇文章 0 订阅

订阅专栏

一定要记得的书写事件的流程（很重要）
** 1 .事件对象 button
2.事件对象绑定一个事件类型
3.事件句柄**
** 三种事件绑定方式 **

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件定义</title>
</head>
<body>
   <button onclick="alertwindow()">点击我</button>
   <button id="btn">DOmo级事件绑定方式</button>
   <button id="btn2">DOM2级事件绑定方式</button>
   <script type="text/javascript">
       // 1.事件对象 button
       // 2.事件对象绑定一个事件类型
       // 3.事件句柄
    function alertwindow() {
        alert('我被点击了')
    }
    //dom0
    var Dom0 =function () {
        alert("DOMO级事件绑定方式");
    }
    var btn =document.getElementById("btn");
    btn.onclick=Dom0;
    //
    var btn2 =document.getElementById("btn2");
    btn2.addEventListener('click',function () {
       alert("DOM2级事件绑定方式");
    },false);

       //1.html中定义  HTML中写js代码，强耦合，不利于复用
       //2.dom0级事件，事件对象的属性添加绑定事件
       //缺点：就是有且只能绑定一个事件类型
       //3.dom2级事件，通过addEventListener函数绑定事件
       //优点：松耦合，绑定多个事件，事件捕获和事件冒泡
   </script>
</body>
</html>

解绑事件（匿名对象不可操作）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件解绑</title>
</head>
<body>
   <button id="btn2">DOM2级事件绑定方式</button>
   <script type="text/javascript">
       // 1.事件对象 button
       // 2.事件对象绑定一个事件类型
       // 3.事件句柄
       var  DOm2=function () {
           alert("DOM2级事件绑定方式");
       }
       var btn2 =document.getElementById("btn2");
       btn2.addEventListener('click',DOm2,false);
    // removeEventListener()
       // 事件解绑
      //功能:移除  addEventListener() 方法添加的事件句柄
   btn2.removeEventListener('click',DOm2);

       //事件解绑成功的主要原因就是：保持addEventListener和removeEventListener
       //里面的参数一致；
       //切记不能采用匿名的函数进行解绑
   </script>
</body>
</html>

前端小菜鸡99

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-06-29

一定要记得的书写事件的流程（很重要）** 1 .事件对象 button2.事件对象绑定一个事件类型3.事件句柄**** 三种事件绑定方式 **<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件定义</title></head><body> <button onclick
复制链接

扫一扫

专栏目录