js事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         body{
  8.             width:100%;
  9.             height:100%;
  10.         }
  11.         input{
  12.             display: block;
  13.             margin-bottom:10px;
  14.         }
  15.         .active{
  16.             color:orange;
  17.         }
  18.     </style>
  19.     <script src="DomReady.js"></script>
  20.     <script>
  21.         myReady(function(){
  22.  
  23.             var btn = document.querySelector("#btn");
  24.             //时间句柄
  25.             var clickme = function(){
  26.                 alert("hello~");
  27.             }
  28.             btn.addEventListener("click", clickme);
  29.         });
  30.  
  31.     </script>
  32. </head>
  33. <body>
  34.  
  35.     <button id="btn">点击我</button>
  36. </body>
  37. </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(){}

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         body{
  8.             width:100%;
  9.             height:100%;
  10.         }
  11.         input{
  12.             display: block;
  13.             margin-bottom:10px;
  14.         }
  15.         .active{
  16.             color:orange;
  17.         }
  18.     </style>
  19.     <script src="DomReady.js"></script>
  20.     <script>
  21.         myReady(function(){
  22.  
  23.             // DOM 0级
  24.             var btn3 = document.querySelector("#btn3");
  25.             btn3.onclick=function(){
  26.                 alert("hello3~");
  27.             }
  28.  
  29.             var btn4 = document.querySelector("#btn4");
  30.             function click4(){
  31.                 alert("hello4~");
  32.             }
  33.             btn4.onclick=click4;
  34.  
  35.             // DOM 2级
  36.             var btn5 = document.querySelector("#btn5");
  37.             //事件句柄
  38.             var click5 = function(){
  39.                 alert("hello5~");
  40.             }
  41.             //这里的clickme不需要加括号
  42.             btn5.addEventListener("click", click5);            
  43.  
  44.         });
  45.     </script>
  46. </head>
  47. <body>
  48.     <!-- 直接加在HTML上的两种方式 -->
  49.     <button id="btn1" onclick="alert('hello1~')">按钮1</button>
  50.     <!-- 这里的click1()需要加括号 -->
  51.     <button id="btn2" onclick="click2()">按钮2</button><br>
  52.  
  53.     <!-- DOM 0级 -->
  54.     <button id="btn3">按钮3</button>
  55.     <button id="btn4">按钮4</button><br>
  56.  
  57.     <!-- DOM 2级 -->
  58.     <button id="btn5">按钮5</button>
  59.  
  60.     <script>
  61.         // 突然发现这个函数只能在btn的后面，而不能在前面
  62.         // 即使用了domReady也不行哎
  63.         function click2(){
  64.             alert("hello2~");
  65.         }
  66.     </script>
  67. </body>
  68. </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. ASP.Net Core 发布到IIS Http Error 502.5 官方解决办法

    Http Error 502.5 - Process Failure 在IIS上发布.NET Core程序出现这个错误.网上搜索到的办法为什么总行不通呢? 有可能年代久远,现在的环境与当年不同,所以解 ...

  2. Day8-Python3基础-Socket网络编程

    目录: 1.Socket语法及相关 2.SocketServer实现多并发 Socket语法及相关 socket概念 socket本质上就是在2台网络互通的电脑之间,架设一个通道,两台电脑通过这个通道 ...

  3. Docker三剑客之compose

    简介 Compose 项目是 Docker 官方的开源项目,负责实现对 Docker 容器集群的快速编排.从功能上看,跟 OpenStack 中的 Heat 十分类似.其代码目前在 https://g ...

  4. 使用自定义注解和springAOP捕获Service层异常,并处理自定义异常

    一 自定义异常 /** * 自定义参数为null异常 */ public class NoParamsException extends Exception { //用详细信息指定一个异常 publi ...

  5. Java虚拟机系列一：一文搞懂 JVM 架构和运行时数据区

    前言 之前写博客一直比较随性,主题也很随意,就是想到什么写什么,对什么感兴趣就写什么.虽然写起来无拘无束,自在随意,但也带来了一些问题,每次写完一篇后就要去纠结下一篇到底写什么,看来选择太多也不是好事 ...

  6. 三、Django学习之单表查询接口

    查询接口 all() 查询所有结果,结果是queryset类型 filter(**kwargs) and条件关系:参数用逗号分割表示and关系 models.Student.objects.filte ...

  7. sougn开源，自己写的一个项目

    源代码:http://yun.baidu.com/share/link?shareid=1504480803&uk=2739888323 联系方式:1034465036@qq.com

  8. Huffman编码和解码

    一.Huffman树 定义: 给定n个权值作为n个叶子结点,构造一棵二叉树,若该树的带权路径达到最小,这样的二叉树称为最优二叉树,也称为霍夫曼树(Huffman树). 特点:     Huffman树 ...

  9. POJ_1050_最大子矩阵

    http://poj.org/problem?id=1050 这道题是最大子串的扩展,遍历过每一个子矩阵就好了,期间用了最大子串的方法. #include<iostream> #inclu ...

  10. ionic中的http,jsonp的使用

    要导入 import { HttpModule,JsonpModule } from '@angular/http'; 到app.module.ts       http,jsonp的区别 第一:在U ...