JavaScript使得网页与用户友好交互,在使用 js 进行时间绑定的时候有三种绑定方式。

第一种:初学者以及普通写法

 <div id="dom0">
<input type="button" value="Click0" onclick="dom0();" />
</div>
<script>
function dom0(){
alert('Dom0 Leval');
}
</script>

第二种:程序员常用写法

 <div id="dom1">
<input type="button" value="Click1" />
</div>
<script>
var dom1=document.getElementById('dom1').firstElementChild;
dom1.onclick=function(){
alert('Dom1 Leval');
}
</script>

第三种:不常见但面试中会遇到

 <div id="dom2">
<input type="button" value="Click2" />
</div>
<script>
var dom2=document.getElementById('dom2').firstElementChild;
dom2.addEventListener('click',function () {
alert('Dom2 Leval');
},false);
</script>

在第三种写法中,addEventListener(事件,函数,false || true),false代表冒泡模型,true代表捕捉模型。默认为false。

原创不易,尊重版权。转载请注明出处:http://www.cnblogs.com/xsmile/

JavaScript中事件绑定的三种方式的更多相关文章

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

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

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

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

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

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

  4. [转]javascript指定事件处理程序包括三种方式:

    javascript指定事件处理程序包括三种方式: (1):DOM0级事件处理程序 如: 代码如下: var btn=document.getElementById("mybtn" ...

  5. JS事件绑定的三种方式比较

    js事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

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

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

  7. JavaScript中清空数组的三种方式

    方式1,splice ? 1 2 3 var ary = [1,2,3,4]; ary.splice(0,ary.length); console.log(ary); // 输出 [],空数组,即被清 ...

  8. javascript中var let const三种变量声明方式

    javascript中var let const三种变量声明方式 1.var  ①var表示声明了一个变量,并且可以同时初始化该变量. ②使用var语句声明的变量的作用域是当前执行位置的上下文:一个函 ...

  9. android中解析文件的三种方式

    android中解析文件的三种方式     好久没有动手写点东西了,最近在研究android的相关技术,现在就android中解析文件的三种方式做以下总结.其主要有:SAX(Simple API fo ...

随机推荐

  1. JAVA有哪些数据类型?基本数据类型各占多少个字节

    java的数据类型分为:基本数据类型和引用数据类型. 基本数据类型各占多少个字节: 数据类型 字节 默认值 byte 1 0 short 2 0 int 4 0 long 8 0 float 4 0. ...

  2. python 命令

    pip list 可以查看已经安装的插件 pip show name 可以查看插件的信息(如:pip show selenium) pip install selenium==[version num ...

  3. JavaScript(jquery)实现二级菜单联动

    为什么写这篇随笔? 二级菜单的联动一直是我心中一块石头,犹记得大一的时候只会用一点的Dreamweaver,当时做二级菜单难受啊,啥都不会,网上找了些资料,也看不懂别人的代码更别说用起来了 前些日子. ...

  4. wifipineapple插件:codeInject的使用

    如果在中间人攻击的时候, 能在用户的网页中插入任意代码, 可以说已经完成一半了 wifipineapple有个codeInject插件, 可以让连上这个网络所有设备浏览网页的时候, 在网页中插入任意h ...

  5. bridged(桥接模式)、NAT(网络地址转换模式)和host-only(主机模式)-VMware下三种网络配置方式

    VMWare提供了三种工作模式,它们是bridged(桥接模式).NAT(网络地址转换模式)和host-only(主机模式).要想在网络管理和维护中合理应用它们,你就应该先了解一下这三种工作模式. 1 ...

  6. 【.Net边角料系列】1-单例模式(我真不是你想的那样)

    什么事边角料? 边角料就是你编程的时候,很少能够用上,或者说你压根就不知道得东西,我就称这些东西为边角料.这个叫.net边角料可能有点大,其实这个系列是纯粹的C#边角料系列. 为什么写.net边角料呢 ...

  7. 跟我一起读postgresql源码(十)——Executor(查询执行模块之——Scan节点(下))

    接前文跟我一起读postgresql源码(九)--Executor(查询执行模块之--Scan节点(上)) ,本篇把剩下的七个Scan节点结束掉. T_SubqueryScanState, T_Fun ...

  8. 如何处理导出的csv无法查看身份证后三位的情况?

    如何处理导出的csv无法查看身份证后三位的情况? 原因:excel中如果是常规格式无法显示那么多位数,改成文本格式就可以. 简单步骤,导入数据------>选择数据来源------>选择编 ...

  9. Quartz 代码调用Demo

    一般项目中Quartz都是直接在配置文件中配置,但是一些特殊的情况需要在代码中控制,本文为代码调用的Demo,仅供参考.更多详细的Quartz配置信息,请查看: JAVA定时任务实现的几种方式 mav ...

  10. CTF---隐写术入门第一题 SB!SB!SB!

    SB!SB!SB!分值:20 来源: 西普学院 难度:中 参与人数:4913人 Get Flag:1541人 答题人数:1577人 解题通过率:98% LSB 解题链接: http://ctf5.sh ...