js关于事件的一些总结(系列一)
今天小弟在这里说一下 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
js关于事件的一些总结(系列一)的更多相关文章
- python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- js经典试题之w3规范系列
js经典试题之w3规范系列 1:w3c 制定的 javascript 标准事件模型的正确的顺序? 答案:事件捕获->事件处理->事件冒泡 解析:先事件捕获从windows > doc ...
- 浏览器中 JS 的事件循环机制
目录 事件循环机制 宏任务与微任务 实例分析 参考 1.事件循环机制 浏览器执行JS代码大致可以分为三个步骤,而这三个步骤的往复构成了JS的事件循环机制(如图). 第一步:主线程(JS引擎线程)中执行 ...
- 探讨Js的事件的冒泡阶段
近来看到了一个新的知识点叫Js的事件冒泡,因此决定自己来研究一番. 大家应该都知道,Js中的事件处理分为三个阶段,1:事件的捕获阶段,2:处于目标阶段,3:事件的冒泡阶段.那么什么是事件的捕获和冒泡呢 ...
- 浅谈js的事件冒泡机制
很多人都听说过,js的事件冒泡机制,其实,这个说法还是比较生动形象的,就是一个水泡在水底下,冒泡到水面的过程. 那js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document ...
- js键盘事件全面控制详解
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...
- Js 冒泡事件阻止
Js 冒泡事件阻止 1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览 ...
- js event 事件兼容浏览器 ie不需要 event参数 firefox 需要
js event 事件兼容浏览器 ie不需要 event参数 firefox 需要 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- JS通用事件监听函数
JS通用事件监听函数 版本一 //把它全部封装到一个对象中 var obj={ readyEvent:function (fn){ if(fn==null){ fn=document; } var o ...
随机推荐
- TCP/IP协议组随笔
原文:https://my.oschina.net/xianggao/blog/654677 IP层负责网络主机的定位,数据传输的路由,由IP地址可以唯一的确定Internet上的一台主机. TCP层 ...
- MVC流程图
MVC请求流程图 一 MVC流程图 二 流程步骤 客户端浏览器发送请求到MVC应用程序. Global.ascx接收这个请求,并且执行基于使用RouteTable,RouteData,UrlRouti ...
- python langid实现语种识别
2017-04-26 语料数据入库时有个小需求,需要用一个字段存储语料的语种,偶然发现langid可以实现这一功能,再次感叹python的好用! #coding=utf-8 import langid ...
- SpringMVC处理MYSQL BLOB字段的上传
任务: uos.docfile的content字段是longblob类型的,通过页面将文件存储到这个字段里. 页面代码: <div class="box"> <d ...
- 如何在 Linux 下大量屏蔽恶意 IP 地址
很多情况下,你可能需要在Linux下屏蔽IP地址.比如,作为一个终端用户,你可能想要免受间谍软件或者IP追踪的困扰.或者当你在运行P2P软件时.你可能想要过滤反P2P活动的网络链接.如果你是一名系统管 ...
- java jdk 环境变量设置
我的电脑点右键,选择“属性”,选择“高级”标签,进入环境变量设置,分别设置如下三个环境变量: 设置JAVA_HOME: 一是为了方便引用,比如,JDK安装在C:\jdk1.6.0目录里,则设置JAVA ...
- 如何手动编译运行带包 java 程序
带包的java程序比普通java程序的编译稍微复杂一些.例如下面的例子: package cn.guopeng; import java.util.*; public class hello { pu ...
- VMware下的ubuntu12.04不识别usb设备问题的解决方法
情况一:U盘通过USB连接到Ubuntu后,点击VM—removable devices,无usb信息? 解决方法: 在“服务”中启动“VMware USB Arbitration Service”服 ...
- hbase的数据模型
hbase类似bigTable是一个分布式的数据库,它是一个稀疏的,长期存储的,多维的,排序的映射表,这张表的索引是行关键字,列关键字,时间戳.hbase中的数据都是字符串,没有类型. ...
- 【MIG专项测试组】如何准确评测Android应用的流畅度?
转自 腾讯Bugly 叶方正,2008年加入腾讯,就职于无线研发部[专项测试组].曾经负责多个产品的性能优化工作,积累大量的移动终端平台优化以及评测经验. 怎样获取SM值? 前文我们分析了通过测量应用 ...