JavaScript三种绑定事件方式及相互之间的区别分析

本文实例讲述了JavaScript三种绑定事件方式及相互之间的区别。分享给大家供大家参考，具体如下：

JavaScript三种绑定事件的方式：

1.

<div id="btn" onclick="clickone()"></div> //直接在DOM里绑定事件
<script>
function clickone(){ alert("hello"); }
</script>

2.

<div id="btn"></div>
<script>
document.getElementById("btn").onclick = function（）{ alert("hello"); } //脚本里面绑定
</script>

3.

<div id="btn"></div>
<script>
document.getElementById("btn").addeventlistener("click",clickone,false); //通过侦听事件处理相应的函数
function clickone(){ alert("hello"); }
</script>

那么问题来了，1 和 2 的方式是我们经常用到的，那么既然已经有两种绑定事件的方法为什么还要有第三种呢？答案是这样的：

用 "addeventlistener" 可以绑定多次同一个事件，且都会执行，而在DOM结构如果绑定两个 "onclick" 事件，只会执行第一个；在脚本通过匿名函数的方式绑定的只会执行最后一个事件。

1.

<div id="btn" onclick="clickone()" onclick="clicktwo()"></div>
<script>
function clickone(){ alert("hello"); } //执行这个
function clicktwo(){ alert("world!"); }
</script>

2.

<div id="btn"></div>
<script>
document.getElementById("btn").onclick = function（）{ alert("hello"); }
document.getElementById("btn").onclick = function（）{ alert("world"); } //执行这个
</script>

3.

<div id="btn"></div>
<script>
document.getElementById("btn").addeventlistener("click",clickone,false);
function clickone(){ alert("hello"); } //先执行
document.getElementById("btn").addeventlistener("click",clicktwo,false);
function clicktwo(){ alert("world"); } //后执行
</script>

以上；可根据场景灵活选择。

PS:关于javascript常用事件及相关说明还可参考本站在线工具：

javascript事件与功能说明大全：
http://tools.jb51.net/table/javascript_event

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript时间与日期操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • javascript事件委托的方式绑定详解

    javascript事件委托的方式绑定详解

    js事件绑定 事件绑定,这里使用了冒泡的原理,从点击的元素开始,递归方式的向父元素传播事件,这样做的好处是对于大量要处理的元素,不必为每个元素都绑定事件,只需要在他们的父元素上绑定一次即可,提高性能.还有一个好处就是可以处理动态插入dom中的元素,直接绑定的方式是不行的. 之前一直使用的是jquery的on方法做这样的事情,前几天看到公司项目中有实现这种方式的源代码,拿来仔细研究研究,跟大家分享分享. function $bindAction(dom, event, listeners) { #

  • JS中批量给元素绑定事件过程中的相关问题使用闭包解决

    在JS中,你写一个for循环的时候,内部的循环变量I其实是会保存在它运行的函数或类内的,所以你会发现你给元素批量绑定事件的时候,出现i=最后一个循环变量的值,这就很坑爹啊,解决的方案有2钟, 思路就是:把这个循环变量保存起来,不要让它的作用域在整个函数,而是在循环体内 1.使用闭包(如果你不懂闭包,请打开百度:www.baidu.com) 2.使用with关键字,with语法是with( obj ) { //使得可以在此直接访问obj的属性,而不用加obj.XXX } 代码示例: 复制代码 代码

  • js 绑定带参数的事件以及手动触发事件

    1.html代码 复制代码 代码如下: <div> <div id="tab"> <h2>标题一</h2> <h2>标题二</h2> <h2>标题三</h2> <h2>标题四</h2> div> <dl id="tabcon"> <dd>内容一</dd> <dd>内容二</dd> &

  • JS中动态添加事件(绑定事件)的代码

    两种方式:直接给对象添加事件,节点添加事件 例如给一个id为tab1的添加onclick事件 第一种情况: 复制代码 代码如下: var t = document.getElementById("tab1"); t.onclick = function tst(){ alert(''); } 第二种情况 复制代码 代码如下: var tb = document.getElementById("tab1"); if(window.addEventListener){

  • Javascript 事件流和事件绑定

    Javascript 事件流和事件绑定

    事件流 浏览器中的事件流意味着页面上可有不仅一个,甚至多个元素响应同一个事件.而这一个或多个元素响应事件发生的先后顺序在各个浏览器(主要针对IE和Netscape)上是不同的. 冒泡型事件(Dubbed Bubbling) IE上的解决方案就是冒泡型事件(Dubbed Bubbling).冒泡型事件的基本思想是,事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. 示例(1):点击我触发冒泡型事件流 示例(1)的XHTML代码结构:<span id="cnt0

  • js移除事件 js绑定事件实例应用

    复制代码 代码如下: /** * @description 事件绑定,兼容各浏览器 * @param target 事件触发对象 * @param type 事件 * @param func 事件处理函数 */ function addEvents(target, type, func) { if (target.addEventListener) //非ie 和ie9 target.addEventListener(type, func, false); else if (target.att

  • javascript闭包传参和事件的循环绑定示例探讨

    今天看到一个javascript的题目,按常理循环绑定事件,但是得到的结果却不是想要的. 复制代码 代码如下: <a href="#">text</a> <br> <a href="#">link</a> <script> var as = document.getElementsByTagName('a'); for ( var i = as.length; i--; ) { as[i].on

  • JS 事件绑定函数代码

    主要解决了 浏览器兼容,现在可以兼容IE6 7 8 FF 谷歌(废话) IE浏览器里,this指向问题. 直接上代码吧! 复制代码 代码如下: var bind=function(object,type,fn){ if(object.attachEvent){//IE浏览器 object.attachEvent("on"+type,(function(){ return function(event){ window.event.cancelBubble=true;//停止时间冒泡 o

  • javascript attachEvent绑定多个事件执行顺序问题

    常见的绑定事件有直接绑定在页面元素中比如<div id="wrap" onclick="a();"></div>,这个换种方法也就是分离出来写在js代码里如document.getElementById('wrap').onclick = function(){a();},此时如果需要绑定多个方法则直接写在一起即可如document.getElementById('wrap').onclick = function(){a();b();}或&

  • JavaScript给按钮绑定点击事件（onclick）的方法

    本文实例讲述了JavaScript给按钮绑定点击事件(onclick)的方法.分享给大家供大家参考.具体分析如下: 我们可以通过设定按钮的onclick属性来给按钮绑定onclick事件 <!DOCTYPE html> <html> <head> <script> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script

  • javascript 处理事件绑定的一些兼容写法

    绑定事件 复制代码 代码如下: var addEvent = function( obj, type, fn ) { if (obj.addEventListener) obj.addEventListener( type, fn, false ); else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj.attachEvent( "on"+type, function() { obj["e"

随机推荐