js中事件绑定方法大致有三种:

1.在DOM元素中绑定

<input  onclick="alert('在DOM中绑定')"  type="button"  value="点击我" />

也可以在onclick中填写函数,与addeventlistener不同的是,在onclick中的函数允许小括号,而后者不允许。

2.在JavaScript代码中绑定

<input  id="demo"  type="button"  value="点击我" />
<script type="text/javascript">
document.getElementById("demo").onclick=function(){
alert(this.getAttribute("type"));
}
</script>

3.通过事件绑定函数来绑定

<input type="button" id="myBtn" value="点我"/>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction()
{
document.getElementById("demo").innerHTML = "Hello World";
}
</script>

其实1,2是同一种绑定方法,并且1,2同时存在时2会覆盖1,因为onclick是一种属性。

而第三种事件监听可以给同一个对象绑定多个函数,不会覆盖,而是依次执行。

js事件绑定函数的更多相关文章

  1. 兼容IE9以下和非IE浏览器的原生js事件绑定函数

    事件绑定函数的demo如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt ...

  2. JS中事件绑定函数,事件捕获,事件冒泡

    1 事件绑定:事件与函数绑定以及怎么取消绑定 1.1 元素.onclick这种形式,如下: <div id="div1">aaa</div> <scr ...

  3. JS+Zero Clipboard swf复制到剪贴板 兼容浏览器(bind事件绑定函数)

    转自http://www.ipmtea.net/css_ie_firefox/201107/07_499.html 1.ZeroClipboard其实是国外的一个js类库,源码结构如: var Zer ...

  4. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  5. js事件绑定细节说明

    javascript绑定事件: 经常用jQuery去写,时间长了对原生态的js事件绑定的知识会慢慢淡化或者遗忘了,必须翻出来再次总结,今天再次把js原生态事件的处理做个总结. 从最初开始,谁刚接触ja ...

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

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

  7. js课程 5-13 js事件绑定和鼠标事件注意事项有哪些

    js课程 5-13  js事件绑定和鼠标事件注意事项有哪些 一.总结 一句话总结:js代码的灵魂就是改变标签的属性和样式,就这两种. 1.js触发改的东西是哪两样? 属性和样式 2.js如何让页面用标 ...

  8. js事件绑定及深入

    学习要点: 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现 ...

  9. js 事件绑定

    事件绑定的方式 1.  DOM  元素行内绑定 <div onclick="alert(1)"></div>   2. js on+eventType do ...

随机推荐

  1. Node.js学习笔记(三): 事件机制

    大部分的nodejs核心api都建立在异步的事件驱动架构之上,所以events是Node.js 最重要的模块,它提供了唯一的接口.events 模块不仅用于用户代码与 Node.js 下层事件循环的交 ...

  2. echarts3 中 热力图的属性大全

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  3. [Haskell] 为什么列表操作++很昂贵?

    博主是haskell新手.学习haskll的时候遇到了一些问题,在寻求答案的过程中产生了一些思考,可能理解存在偏差,希望各位不吝赐教. 提出问题 <Learn you a haskell for ...

  4. Codeforces Round #434 (Div. 2, based on Technocup 2018 Elimination Round 1)&&Codeforces 861B Which floor?【枚举,暴力】

    B. Which floor? time limit per test:1 second memory limit per test:256 megabytes input:standard inpu ...

  5. Codeforces Round #300(A.【字符串,多方法】,B.【思维题】,C.【贪心,数学】)

    A. Cutting Banner time limit per test:2 seconds memory limit per test:256 megabytes input:standard i ...

  6. C++课程设计类作业2

    不要问我一个晚上在干啥,就写写这种烦到极点的类,啰嗦! #include <bits/stdc++.h> using namespace std; class complexed { pu ...

  7. CodeForces798-B. Mike and strings-string中的find()函数

    好久好久好久之前的一个题,今天翻cf,发现这个题没过,补一下. B. Mike and strings time limit per test 2 seconds memory limit per t ...

  8. Prim最小生成树板子

    普里姆算法可以称为"加点法",每次迭代选择代价最小的边对应的点,加入到最小生成树中.算法从某一个顶点s开始,逐渐长大覆盖整个连通网的所有顶点. 邻接矩阵存图  时间复杂度O(n^2 ...

  9. linux下vi编辑某文件时,操作出现 错误提示: E325: ATTENTION 2, Found a swap file by the name ".p1.c.swp"

    当我在linux下用vi打开p1.c文件时 root@iZ2zeeailqvwws5dcuivdbZ:~/1/01/指针# vi p1.c 会出现如下信息: E325: ATTENTION Found ...

  10. cesium编程入门(三)开始使用cesium开发

    搭建最简的开发环境 这一节来搭建一个最简单的能运行的helloworld,以后的代码也会在这一节的基础上慢慢增加 创建文件夹 mkdir cesium-test cd cesium-test 引入编译 ...