理解JS绑定事件

2024-12-03 21:40:05

本文为大家详细分析了JS绑定事件，供大家参考，具体内容如下

绑定事件有兼容性问题，在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的区别了。

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

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

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

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

由于html是从上至下加载的,通常我们如果在head部分引入javascript文件,那么我们都会在javascript的开头添加window.onload事件,防止在文档问加载完成时进行DOM操作所出现的错误.如果有多个javascript文件,那么极有可能出现多个window.onload事件,但是最后起作用的只有一个,这时候就需要使用事件绑定来解决这个问题了. IE方式 attachEvent(事件名称, 函数),绑定事件处理函数 detachEvent(事件名称, 函数),解除绑定 DO
js添加绑定事件的方法

先介绍js添加事件通用方法,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p id="p1">测试添加事件:firefox使用addEventListener,ie使用attachEvent<br> 点击此p标签
JavaScript绑定事件监听函数的通用方法

事件绑定的3中常用方法:传统绑定.W3C绑定方法.IE绑定方法.但是,在实际开发中对于我们来讲重要的是需要一个通用的.跨浏览器的绑定方法.如果我们在互联网上搜索一下会发现许多方法,以下是比较知名的几种方法: 在开始学期下面几种方法之前,应当讨论一下,一个好的addEvent()方法应当达到哪些要求: a.支持同一元素的同一事件句柄可以绑定多个监听函数: b.如果在同一元素的同一事件句柄上多次注册同一函数,那么第一次注册后的所有注册都被忽略: c.函数体内的this指向的应当是正在处理事件的节点(
javascript attachEvent绑定多个事件执行顺序问题

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

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

复制代码代码如下: </pre><pre name="code" class="javascript"><html> <body> <input type="button" name="input[]" value="按钮1" /><br /> <input type="button" name="

理解JS绑定事件

相关推荐

随机推荐