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. Miniio安装登陆密码报错问题，注意检查区分带小写！

    ------------恢复内容开始------------ #创建minio专用文件目录mkdir -p /app/minio/datamkdir -p /app/minio/configchmod ...

  2. Python3基础之数据类型（字典）

    Python3数据类型之 字典 字典是另一种可变容器模型,且可存储任意类型对象. 字典的每个键值(key=>value)对用冒号(:)分割,每个对之间用逗号(,)分割,整个字典包括在花括号({} ...

  3. Vertx使用EventBus发送接受自定义对象

    先看官方文档步骤: 需要一个编解码器,看源码: 可见内置了需要数据类型的实现,所以发送其他消息可以发送,但是如果发送自定义对象就需要自己实现编解码逻辑了 一 自定义编解码器 /** * 自定义对象编解 ...

  4. Spring Cloud中Eureka注册显示UNKNOWN问题

    这是由于application.yml里spring没有配置实例造成的

  5. 基于Mybatis的bookstore架构模型

    总共分为Control,dao,enter,entity,service,util,view这几层.同时还含有一个mapperconfig.xml文件. 1,mapperconfig.xml 这里面用 ...

  6. kvm实现快速增量盘模式的克隆脚本

    转自:http://zxlwz.blog.51cto.com/6952946/1852424 要求:备份的img磁盘格式只有qcow2格式支持增量盘使用和快照功能当你的一个虚拟机格式是raw格式时,请 ...

  7. sock.listen()

    (转载) 函数原型: int listen(int sockfd, int backlog); 当服务器编程时,经常需要限制客户端的连接个数,下面为问题分析以及解决办法: 下面只讨论TCP  UDP不 ...

  8. 【科创人独家】科界CTO林镇南：言必真，行必果，没有尽力而为，只有全力以赴

    B2C-->B2B-->O2O-->B2G.从传统电商到电子商务,再到最火医美,最后转入国企,80末的林镇南成长路径有特点:行业跨度大.技能涉猎广.误以为"4点半下班&qu ...

  9. vmware14 unlock开启macos选项

    之前搜索了很多资料,用了很多Unlock都失败了,最后重新卸载vmware重新安装后,关闭应用竟然可以了 工具在微信公众号菜菜电脑已保存到百度网盘

  10. 使用Spring Cloud Feign 日志查看请求响应

    在使用微服务时,常常会用feign做客户端去调用别的微服务,但是在日志中很难查看到具体的请求和响应.因此,需要把feign默认的日志打开. 日志设置 创建feign配置类 @Configuration ...