js事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

        input{

            display: block;

            margin-bottom:10px;

        }

        .active{

            color:orange;

        }

    </style>

    <script src="DomReady.js"></script>

    <script>

        myReady(function(){

            var btn = document.querySelector("#btn");

            //时间句柄

            var clickme = function(){

                alert("hello~");

            }

            btn.addEventListener("click", clickme);

        });

    </script>

</head>

<body>

    <button id="btn">点击我</button>

</body>

</html>

 事件监听的三种方法：

1、直接在html上添加事件（不建议）

强耦合，不利用代码复用

2、DOM 0级

一个元素只能绑定一个事件的限制

如果绑定了多个事件，后面的会覆盖掉前面的

2、DOM 2级

一个事件可以绑定多个监听函数

还可以定义事件捕获和事件冒泡

btn.addEventListener("click", fn, false);  第三个参数默认是false

btn.attachEvent("onclick", fn);  IE的事件监听函数attachEvent

document.body.addEventListener("load", init);

document.body.attachEvent("onload", init);

function init(){}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

        input{

            display: block;

            margin-bottom:10px;

        }

        .active{

            color:orange;

        }

    </style>

    <script src="DomReady.js"></script>

    <script>

        myReady(function(){

            // DOM 0级

            var btn3 = document.querySelector("#btn3");

            btn3.onclick=function(){

                alert("hello3~");

            }

            var btn4 = document.querySelector("#btn4");

            function click4(){

                alert("hello4~");

            }

            btn4.onclick=click4;

            // DOM 2级

            var btn5 = document.querySelector("#btn5");

            //事件句柄

            var click5 = function(){

                alert("hello5~");

            }

            //这里的clickme不需要加括号

            btn5.addEventListener("click", click5);            

        });

    </script>

</head>

<body>

    <!-- 直接加在HTML上的两种方式 -->

    <button id="btn1" onclick="alert('hello1~')">按钮1</button>

    <!-- 这里的click1()需要加括号 -->

    <button id="btn2" onclick="click2()">按钮2</button><br>

    <!-- DOM 0级 -->

    <button id="btn3">按钮3</button>

    <button id="btn4">按钮4</button><br>

    <!-- DOM 2级 -->

    <button id="btn5">按钮5</button>

    <script>

        // 突然发现这个函数只能在btn的后面，而不能在前面

        // 即使用了domReady也不行哎

        function click2(){

            alert("hello2~");

        }

    </script>

</body>

</html>

JS事件绑定的三种方式比较的更多相关文章

  1. JS中事件绑定的三种方式

    以下是搜集的在JS中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="upl ...

  2. JavaScript 中事件绑定的三种方式

    以下是在 JS 中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="uplo ...

  3. JavaScript事件绑定的三种方式

    (一)事件绑定的三种方式 (1)通过on的形式 <script type="text/javascript"> var div = document.getElemen ...

  4. js事件绑定的几种方式与on()、bind()的区别

    版权声明:本文为博主原创文章,未经博主允许不得转载 一直不是很理解几种js事件绑定之间的区别与联系,今天百度了一下,在此做一总结: 1.如果只是简单的绑定一个事件,可以直接写在行内,点击执行一个函数, ...

  5. JavaScript中事件绑定的三种方式

    JavaScript使得网页与用户友好交互,在使用 js 进行时间绑定的时候有三种绑定方式. 第一种:初学者以及普通写法 <div id="dom0"> <inp ...

  6. js事件绑定的几种方式

    在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数 一. 在DOM元素中直接绑定 这里的DOM元素,可以理解为HTM ...

  7. JS 事件绑定的几种方式 小笔记

    第一种 var test=document.getElementById('add'); add.onclick=function(){ alert('1'); } 直接在对象上注册事件 缺点:如果我 ...

  8. js中的事件绑定的三种方式

    1 直接在html标签中绑定 <button onclick = "show()"></button> 注意当你引用的js代码是包裹在window.onlo ...

  9. js声明变量的三种方式

    JS 声明变量的三种方式 (1)使用变量步骤:a.声明-->b.赋值-->3.调用 正确用法: <script type="text/javascript"> ...

随机推荐

  1. CSS-17-页面布局

    页面布局: 静态布局: 静态布局:元素不变的布局. 布局特点:缩小后内容被遮挡,拖动滚动条显示布局 设计方法: PC:居中布局,所有样式使用绝对宽度和高度 移动设备:另外建立移动网站,以m.域名为域名 ...

  2. windows 安装mongodb2

    安装文件:mongodb-win32-x86_64-2008plus-ssl-3.2.6-signed.msi 电脑配置:win7 64位 MongoDB的安装很简单,设置好安装路径后,一直Next直 ...

  3. 使用RKE快速部署k8s集群

    一.环境准备 1.1环境信息 IP地址 角色 部署软件 10.10.100.5 K8s Master Etcd.Control 10.10.100.17 K8s Worker1 Worker 10.1 ...

  4. linux运维基础知识-系统分区及LVM逻辑卷的创建

    系统分区及LVM逻辑卷的创建 分区 创建逻辑卷 LVM简介:逻辑卷管理器(LogicalVolumeManager)本质上是一个虚拟设备驱动,是在内核中块设备和物理设备之间添加的一个新的抽象层次,如图 ...

  5. Kubelet 中的 “PLEG is not healthy” 到底是个什么鬼？

    原文链接:深入理解 Kubelet 中的 PLEG is not healthy 在 Kubernetes 社区中,PLEG is not healthy 成名已久,只要出现这个报错,就有很大概率造成 ...

  6. 自学Java第三章——《流程控制语句结构》

    流程控制语句结构分为: 1.顺序结构:从上到下依次执行 2.分支结构:多个分支选择其中一个分支执行 3.循环结构:重复执行某些代码 3.1 顺序结构 执行过程:从上到下顺序执行 3.1.1 输出语句 ...

  7. RT600 I2S外设介绍及应用

    恩智浦的i.MX RT600是跨界处理器产品,同样也是i.MX RTxxx系列的开山之作.不同于i.MX RT1xxx系列单片机,i.MX RT600 采用了双核架构,将新一代Cortex-M33内核 ...

  8. HEXO常用命令总结

    博客搬家:hexo常用命令总结 常见命令 hexo new "postName" #新建文章 hexo new page "pageName" #新建页面(新建 ...

  9. POJ_1485_dp

    题目描述: 每组数据给n个点,点按一维坐标升序给出,要求划分成k块,在每一块中,取一个站,要求每个块中所有的点到站的距离的和的总和最小. 思路: dp题,dp[i][j]表示i个点分成j块的最小距离, ...

  10. 题解 SP375 【QTREE - Query on a tree】

    \[ \texttt{Preface} \] 这题在 \(\text{Luogu}\) 上竟然不能交 \(C++\) ,会一直 \(Waiting\) ,只能交非 \(C++\) 的语言. 所以打完了 ...