js关于事件的一些总结(系列一)
2015-06-26 10:42
645 查看
今天小弟在这里说一下 js 关于事件的一些总结 在这里直接上代码 省去啰嗦的步骤以免看烦了 总结的不好希望大家见谅
一、事件的默认事件
事件的默认事件是什么? 就是a标签有一个链接事件 input type标签有一个默认的点击输入事件 等等。。。。
那么问题来了 如果我这里有一个a标签 默认是有一个超链接的 我在a标签上添加了点击事件 那么会不会触发点击事件呢?? 答案是不会 代码来证明一下(经过测试)
可以拿去测试 是真的不会弹出来的
那么怎么去阻止默认事件呢? 办法百度一大堆,但是你会发现有些不兼容 要么就是不兼容ie 要么就是不兼容火狐
IE 阻止默认事件代码
也可以把return false 换成 window.event.returnValue = false; 他们是等价的 你仔细一看就能看出来的
其他浏览器阻止默认事件代码
那么问题又来了 我们难道要去写两个事件?? 如果写一个就会出现不兼容问题 如果写两个 那么我的页面中如果有50个带超链接的a标签 呢?? 需要写多少 如果是五百个呢??
这个时候 我们需要另一个概念 了 事件的检测 一般事件的检测都用if 来检测 一般结构都是if else if 结构
请看如上代码 就是一个检测事件的功能 如果 支持preventDefault(); 那么就用preventDefault(); 否则就用 event.returnValue=false; 只是封装了一下 到时候直接拿过来用 肯定不能每一次调用都加一个if else 这样的话 也不是很成熟的写法。
至于调用代码也上一下 免得说我不仁义
2.事件的阻止事件(冒泡,捕获)
冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
捕获型事件(event capturing):事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。-->水在做开的过程中会出现水上层出现小泡泡 水下层出现大泡泡 可以仔细观察哦
咱们先看一下是怎么冒泡的 (冒泡就像是水开了之后都是从水壶底下 往上边冒泡 而且泡越来越大,)
简单的代码如上 你会发现 点击div只是出现第一个alert 但是点击input 就会先弹出来第二个alert 后又弹出来第一个alert 这个就叫做事件冒泡 但是我们只想点击input的时候出现最后一个alert 不要出现第一个alert 这个时候就需要咱们做一下事件冒泡的阻止 庆幸的是已经有了成熟的办法来解决
上边代码是一个事件的检测 和阻止事件默认事件是一样的思路 也处理了浏览器的兼容问题 调用也是一样 这里就不多说了
下边就是用事件监听来设置浏览器是用事件冒泡还是事件捕获 addEventListener
这里牵扯到了事件流 的概念:侦听器在侦听时有三个阶段:捕获阶段、目标阶段和冒泡阶段。顺序为:捕获阶段(根节点到子节点检查是否调用了监听函数)→目标阶段(目标本身)→冒泡阶段 (目标本身到根节点)。此处的参数确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。 如果将 useCapture 设置为 true,则侦听器只在捕获阶段处理事件,而不在目标或冒泡阶段处理事件。 如果useCapture 为 false,则侦听器只在目标或冒泡阶段处理事件。 要在所有三个阶段都侦听事件,请调用两次 addEventListener,一次将 useCapture 设置为 true,第二次再将useCapture 设置为 false。
百度百科关于addEventListener 链接:http://baike.baidu.com/link?url=5puDtK6dIAEVtT3X9xafqQjbnkQtGpbAypMzSuGaDBOLwJ45qYQVP7Q1udHNWhO_DsDSiisS3mHS0dss8Gc0R_
到此为止 事件的冒泡 事件的捕获 事件的阻止事件 和事件的监听我们都顺了一遍。 讲的不好 多多见谅! 系列二再次讲解一下遗漏的东西。。 周六日在整理一下 写一个关于dom0 和dom2级别事件 和js其他的一些东西 供大家借鉴 学习。。。 后续的js的数组 函数 闭包 原型链 作用域 设计模式 面向对象都会写一些 先承认自己是菜鸟 我只是希望大家看了我的博客能有一点点收获
做个小推广 首发群:前端技术交流群 384064953
一、事件的默认事件
事件的默认事件是什么? 就是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
相关文章推荐
- JavaScript introduction.
- js数组传到后台
- Json经典文章
- js实现数组转换成json
- IText&Html2canvas js截图 绘制 导出PDF
- [LeetCode][JavaScript]Summary Ranges
- Objc与JS间相互调用
- jsp 页面中 判断session是否失效
- jstree 取消选中父节点
- 用gson处理json时bean和json串的对应关系
- javascript变量初始化位置
- javascript实现倒计时(精确到秒)
- js计算2个日期之间相差天数
- href=“#”与href="javascript:void(0)" 的区别
- Extjs sencha cmd打包压缩部署 前台代码压缩
- 详解JavaScript立即执行函数表达式
- arguments对象验证函数的参数是否合法
- Why we made vorlon.js and how to use it to debug your JavaScript remotely
- JavaScript + CSS3 实现的海报画廊特效
- javascript规范