今天小弟在这里说一下 js 关于事件的一些总结 在这里直接上代码 省去啰嗦的步骤以免看烦了 总结的不好希望大家见谅
一、事件的默认事件
事件的默认事件是什么？ 就是a标签有一个链接事件 input type标签有一个默认的点击输入事件 等等。。。。
那么问题来了 如果我这里有一个a标签 默认是有一个超链接的 我在a标签上添加了点击事件 那么会不会触发点击事件呢？？ 答案是不会 代码来证明一下（经过测试）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件默认事件 </title> </head> <body> <a href="https://www.baidu.com/" id="Link">连接到百度</a> <script type="text/javascript"> var oA=document.getElementById('Link'); oA.onclik=function () { alert(1) } </script> </body>
可以拿去测试 是真的不会弹出来的
那么怎么去阻止默认事件呢？ 办法百度一大堆，但是你会发现有些不兼容 要么就是不兼容ie 要么就是不兼容火狐
IE 阻止默认事件代码
oA.onclick=function(event){ alert(11) return false; }
也可以把return false 换成 window.event.returnValue = false; 他们是等价的 你仔细一看就能看出来的
其他浏览器阻止默认事件代码
oA.onclick=function(event){ event.preventDefault(); alert(11) }
那么问题又来了 我们难道要去写两个事件？？ 如果写一个就会出现不兼容问题 如果写两个 那么我的页面中如果有50个带超链接的a标签 呢？？ 需要写多少 如果是五百个呢？？
这个时候 我们需要另一个概念 了 事件的检测 一般事件的检测都用if 来检测 一般结构都是if else if 结构
var eventUtil={ preventDefault:function(event){ if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue=false; } } }
请看如上代码 就是一个检测事件的功能 如果 支持preventDefault(); 那么就用preventDefault(); 否则就用 event.returnValue=false; 只是封装了一下 到时候直接拿过来用 肯定不能每一次调用都加一个if else 这样的话 也不是很成熟的写法。
至于调用代码也上一下 免得说我不仁义
box.onclick=function(e){ eventUtil.preventDefault(e); }
2.事件的阻止事件（冒泡，捕获）
冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。-->水在做开的过程中会出现水上层出现小泡泡 水下层出现大泡泡 可以仔细观察哦
咱们先看一下是怎么冒泡的 （冒泡就像是水开了之后都是从水壶底下 往上边冒泡 而且泡越来越大，）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件冒泡和捕获</title> <style type="text/css"> #div1{width: 100px; height: 100px; background: #999;} </style> </head> <body> <div id="div1"> <input type="button" value="按钮" id="input1"> </div> </body> <script type="text/javascript"> window.onload=function () { var oDiv=document.getElementById('div1'), oIn=document.getElementById('input1'); oDiv.onclick=function(){ alert('我是点击div触发的') } oIn.onclick=function(){ alert('我是点击input触发的') } } </script> </html>
简单的代码如上 你会发现 点击div只是出现第一个alert 但是点击input 就会先弹出来第二个alert 后又弹出来第一个alert 这个就叫做事件冒泡 但是我们只想点击input的时候出现最后一个alert 不要出现第一个alert 这个时候就需要咱们做一下事件冒泡的阻止 庆幸的是已经有了成熟的办法来解决
var eventUtil={ stopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } } }
上边代码是一个事件的检测 和阻止事件默认事件是一样的思路 也处理了浏览器的兼容问题 调用也是一样 这里就不多说了
下边就是用事件监听来设置浏览器是用事件冒泡还是事件捕获 addEventListener
这里牵扯到了事件流 的概念：侦听器在侦听时有三个阶段：捕获阶段、目标阶段和冒泡阶段。顺序为：捕获阶段（根节点到子节点检查是否调用了监听函数）→目标阶段（目标本身）→冒泡阶段 （目标本身到根节点）。此处的参数确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。 如果将 useCapture 设置为 true，则侦听器只在捕获阶段处理事件，而不在目标或冒泡阶段处理事件。 如果useCapture 为 false，则侦听器只在目标或冒泡阶段处理事件。 要在所有三个阶段都侦听事件，请调用两次 addEventListener，一次将 useCapture 设置为 true，第二次再将useCapture 设置为 false。
百度百科关于addEventListener 链接：http://baike.baidu.com/link?url=5puDtK6dIAEVtT3X9xafqQjbnkQtGpbAypMzSuGaDBOLwJ45qYQVP7Q1udHNWhO_DsDSiisS3mHS0dss8Gc0R_
到此为止 事件的冒泡 事件的捕获 事件的阻止事件 和事件的监听我们都顺了一遍。 讲的不好 多多见谅！ 系列二再次讲解一下遗漏的东西。。 周六日在整理一下 写一个关于dom0 和dom2级别事件 和js其他的一些东西 供大家借鉴 学习。。。 后续的js的数组 函数 闭包 原型链 作用域 设计模式 面向对象都会写一些 先承认自己是菜鸟 我只是希望大家看了我的博客能有一点点收获
做个小推广 首发群:前端技术交流群 384064953