关闭

JS绑定事件

标签: javascript绑定事件绑定事件参数详解
2749人阅读 评论(0) 收藏 举报
分类:

绑定事件有兼容性问题,在IE早期版本中使用的是obj.attachEvent(),而其他浏览器使用的则是addEventListener().
这两个方法都有三个参数,分别为:事件类型,事件函数,最后一个是布尔值,true或者是false.
true表示在事件捕获阶段执行,false表示在事件冒泡阶段执行。
由于IE只支持事件冒泡,所以同大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,即默认为”false”
这样可以最大限度地兼容各种浏览器。 最好只在需要在是事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段。 如果不是特别需要,不建议在事件捕获阶段注册事件处理程序。
兼容各浏览器的事件绑定:

 function addEvent(obj, eventType, callback, bubble){
  if(obj.addEventListener){
   obj.addEventListener(eventType, callback, bubble);
  }else{
   obj.attachEvent(eventType, callback, bubble);
  }
 }

调用时,注意callback函数不需要加括号,与setTimeout类似。

这部分都比较容易理解,对于最后一个参数,相信很多人并不是非常理解,总之我还是需要写程序测试一下才真正弄通。

HTML部分内容:

<!doctype html>
<html lang="en">
    <head>
    <!--网站编码格式,UTF-8 国际编码,GBK或 gb2312 中文编码-->
        <meta charset="UTF-8">
        <meta name="Keywords" content="关键词一,关键词二">
        <meta name="Description" content="网站描述内容">
        <meta name="Author" content="">
        <title>Document</title>
    <!--css js 文件的引入-->
    </head>
    <body>
        <div id="out"> 
        <p>我是路人甲</p>
        <div id="middle">  
            <div id="inner">最里面的</div>  
        </div>  
        <p>我是路人乙</p>
        </div>
    </body>
</html>

js内容:(第一种情况)

<script>
    var out = document.getElementById('out');  
    var middle = document.getElementById('middle');  
    var inner = document.getElementById('inner'); 
    //点击inner时,触发顺序为:inner-------middle------out
    out.addEventListener('click',function(){alert("我是最外面的");},false);     
    middle.addEventListener('click',function(){alert("我是中间的");},false);       
    inner.addEventListener('click',function(){alert("我是最里面的");},false); 
</script>

js内容:(第二种情况)

<script>
    var out = document.getElementById('out');  
    var middle = document.getElementById('middle');  
    var inner = document.getElementById('inner'); 
    //点击inner时,触发顺序为:out------inner-------middle
    out.addEventListener('click',function(){alert("我是最外面的");},true);      
    middle.addEventListener('click',function(){alert("我是中间的");},true);    
    inner.addEventListener('click',function(){alert("我是最里面的");},true); 
</script>

js内容:(第三种情况)

<script>
    var out = document.getElementById('out');  
    var middle = document.getElementById('middle');  
    var inner = document.getElementById('inner'); 
    //点击inner时,触发顺序为:out------inner-------middle
    out.addEventListener('click',function(){alert("我是最外面的");},true);      
    middle.addEventListener('click',function(){alert("我是中间的");},false);       
    inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>

js内容:(第四种情况)

<script>
    var out = document.getElementById('out');  
    var middle = document.getElementById('middle');  
    var inner = document.getElementById('inner'); 
    //点击inner时,触发顺序为:out-------middle------inner
    out.addEventListener('click',function(){alert("我是最外面的");},true);      
    middle.addEventListener('click',function(){alert("我是中间的");},true);    
    inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>

js内容:(第五种情况)

<script>
    var out = document.getElementById('out');  
    var middle = document.getElementById('middle');  
    var inner = document.getElementById('inner'); 
    //点击inner时,触发顺序为:middle-------inner------out
    out.addEventListener('click',function(){alert("我是最外面的");},false);     
    middle.addEventListener('click',function(){alert("我是中间的");},true);    
    inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>

js内容:(第六种情况)

<script>
    var out = document.getElementById('out');  
    var middle = document.getElementById('middle');  
    var inner = document.getElementById('inner'); 
    //点击inner时,触发顺序为:out-------inner------middle
    out.addEventListener('click',function(){alert("我是最外面的");},true);      
    middle.addEventListener('click',function(){alert("我是中间的");},false);       
    inner.addEventListener('click',function(){alert("我是最里面的");},true);
</script>

看完以上六种情况对应的结果,相信您已经能够深刻理解,最后一个参数为true或false的区别了。

0
0
查看评论

js动态绑定事件方法

1.给对象绑定事件 var t = document.getElementById("tab1"); t.onclick = function tst(){ alert(''); } 2.绑定事件监听函数addEventListene...
  • okyoung188
  • okyoung188
  • 2016-10-29 14:35
  • 2381

js 绑定带参数的事件

标题一 标题二 标题三 标题四 div> 内容一 内容二 内容三 内容四 var tab = document.getElementById("tab").getElementsByTagName("h2"); fun...
  • fox123871
  • fox123871
  • 2015-04-21 23:05
  • 3064

js的动态绑定事件和静态绑定事件的this的指向

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>...
  • lzh657083979
  • lzh657083979
  • 2017-10-27 09:14
  • 155

JS 生成的元素事件绑定注意事项

JS 生成的元素事件绑定注意事项标签: Jquery, addEventListner, removeEventListener, onclick如果页面要通过 ajax 接入数据,那么很多页面元素可能都是等到数据进来后才通过 JavaScript 生成的。如果我们要给生成的元素绑定 click b...
  • github_37483541
  • github_37483541
  • 2017-02-09 15:16
  • 999

JS动态生成HTML时,on不能绑定事件

使用JS拼接HTML页面时,使用on不能绑定事件; 解决方法: $(document).delegate(".good","click",function(){}  第一个参数为选择器,第二个为需要绑定的事件
  • g_m123456_7
  • g_m123456_7
  • 2017-06-21 09:32
  • 357

js给dom元素绑定事件的三种方式

在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定;在JavaScript代码中绑定;绑定事件监听函数 一. 在DOM元素中直接绑定 这里的DOM元素,可以理解为HTML标签。JavaScript支持在标签中直接绑定事件,语法为:    ...
  • RedaTao
  • RedaTao
  • 2017-10-14 16:25
  • 808

js动态绑定事件

在页面中使用动态绑定事件,我们很容易就想到了onpropertychange、oninput和onchange。 首先说下这三个区别。 onchange:当前属性值发生改变,并且有鼠标或者键盘触发,并失去焦点。 onpropertychange:属性值发生改变。但是他是IE专属事件,并在IE9...
  • kechuangww
  • kechuangww
  • 2015-06-11 10:27
  • 1238

Js循环绑定事件处理

很多时候我们在开发过程需要for循环给元素组绑定js事件,但是直接敲的话,事件响应的效果只能和最后一个元素一样,如下面的错误代码: js闭包运用 1 2 3 var btn=document.getElementsByTagName('button'...
  • Szu_AKer
  • Szu_AKer
  • 2016-06-15 17:05
  • 1089

js中事件绑定3种方法以及事件委托

事件绑定首先,我先来介绍我们平时绑定事件的三种方法。 1.嵌入dom<button onclick="open()">按钮</button><script> function open(){ alert(1) } </scrip...
  • blueblueskyhua
  • blueblueskyhua
  • 2017-04-23 14:06
  • 1438

js动态生成的元素绑定事件

只有一个原则,就是新生成节点与节点绑定事件必须在一个函数作用域内 你好 var info=document.getElementById("info"); info.addEventListener('click',function(){ ...
  • qq_26222859
  • qq_26222859
  • 2017-06-08 16:02
  • 618
    个人资料
    • 访问:671210次
    • 积分:46936
    • 等级:
    • 排名:第75名
    • 原创:113篇
    • 转载:0篇
    • 译文:0篇
    • 评论:196条
    博客专栏
    最新评论