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. 一键下载你的youtube视频

    很多人喜欢逛油管看视频,自然就会有一些喜欢的收藏集或者视频作者,有时候想要下载下来保存在本地播放,这样的话就不用每次FQ,毕竟有些代理的速度并不是很理想(如果你的代理速度炒鸡快的话,请忽略这篇文章). ...

  2. 2017年 JavaScript 框架回顾 -- 前端框架

    概述: 对于 JavaScript 社区来说,npm 的主要功能之一就是帮助开发者发掘所需的 npm Registry 中的库和框架.npm 强大的搜索功能能够帮助找到一组相关的软件包,同时其内置的的 ...

  3. python的运维交流学习笔记

    #!/usr/bin/env | #!/usr/bin/python#coding:gbk #python 运维练习 #需求: #1.利用python实现自动监控服务器性能 #2.并将监控到的数据进行 ...

  4. XOR算法的原理和实现

    XOR算法的原理和实现 XOR算法这种方法的原理 当一个数A和另一个数B进行异或运算会生成另一个数C,如果再将C和B进行异或运算则C又会还原为A. 相对于其他的简易加密算法,XOR算法的优点如下. ( ...

  5. hihoCoder #1498 : Diligent Robots【数学】

    #1498 : Diligent Robots 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 There are N jobs to be finished. It t ...

  6. Let the Balloon Rise(水)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1004 Let the Balloon Rise Time Limit: 2000/1000 MS (J ...

  7. Quick Brown Fox

    The quick brown fox jumps over the lazy dog

  8. Asp.Net Core Use MongoDB

    前几天在网上想找一下Asp.Net Core使用MongoDB相关的文章,也看了几篇,发现都是在写简单的例子,这样的例子是不能用在生产环境的,不能用的生产环境的.封装一个东西一定是建立在你对这个东西足 ...

  9. jquery实现上下滑动选择

    $('.rightShow').on('mousewheel', function(ev) { var dir = ev.originalEvent.wheelDelta if(dir == 120) ...

  10. TI-RTOS 之 PWM

    TI-RTOS 之 PWM CC1310 有4个定时器,8个PWM通道,在TI-RTOS它的驱动是写好的,引用时需要包含 PWM.h头文件即可. 一般是任务主体之前,或者主函数进行初始化. Board ...