今天小弟在这里说一下 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关于事件的一些总结（系列一）的更多相关文章

  1. python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  2. js经典试题之w3规范系列

    js经典试题之w3规范系列 1:w3c 制定的 javascript 标准事件模型的正确的顺序? 答案:事件捕获->事件处理->事件冒泡 解析:先事件捕获从windows > doc ...

  3. 浏览器中 JS 的事件循环机制

    目录 事件循环机制 宏任务与微任务 实例分析 参考 1.事件循环机制 浏览器执行JS代码大致可以分为三个步骤,而这三个步骤的往复构成了JS的事件循环机制(如图). 第一步:主线程(JS引擎线程)中执行 ...

  4. 探讨Js的事件的冒泡阶段

    近来看到了一个新的知识点叫Js的事件冒泡,因此决定自己来研究一番. 大家应该都知道,Js中的事件处理分为三个阶段,1:事件的捕获阶段,2:处于目标阶段,3:事件的冒泡阶段.那么什么是事件的捕获和冒泡呢 ...

  5. 浅谈js的事件冒泡机制

    很多人都听说过,js的事件冒泡机制,其实,这个说法还是比较生动形象的,就是一个水泡在水底下,冒泡到水面的过程. 那js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document ...

  6. js键盘事件全面控制详解

      js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...

  7. Js 冒泡事件阻止

    Js 冒泡事件阻止   1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览 ...

  8. js event 事件兼容浏览器 ie不需要 event参数 firefox 需要

    js event 事件兼容浏览器    ie不需要 event参数   firefox 需要 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  9. JS通用事件监听函数

    JS通用事件监听函数 版本一 //把它全部封装到一个对象中 var obj={ readyEvent:function (fn){ if(fn==null){ fn=document; } var o ...

随机推荐

  1. Chrome的开发必备小技巧

    谷歌Chrome,是当前最流行且被众多web开发人员使用的浏览器.最快六周就更新发布一次以及伴随着它不断强大的开发组件,使得Chrome成为你必备的开发工具.例如,在线编辑CSS,console以及d ...

  2. EXISTS语句的子查询

    一.EXISTS运算符简介: 使用EXISTS语句可以测试集合是否为空,EXISTS语句通常与子查询结合在一起使用.只要子查询中至少返回一个值,则EXISTS语句的值就为True.EXISTS子查询的 ...

  3. [置顶] kubernetes资源类型--ingress

    Ingress在K8S1.1之前还没有. 概念 Ingress是一种HTTP方式的路由转发机制,为K8S服务配置HTTP负载均衡器,通常会将服务暴露给K8S群集外的客户端. Ingress是一个允许入 ...

  4. How does a single thread handle asynchronous code in JavaScript?

    原文:https://www.quora.com/How-does-a-single-thread-handle-asynchronous-code-in-JavaScript ----------- ...

  5. Web 目录枚举与遍历漏洞解决

    "目录枚举漏洞"解决方法 一.名词解释 网站目录枚举漏洞:指黑客利用非法攻击手段扫描符合"8.3"命名原则的目录与文件. 二.验证工具:scanner-comp ...

  6. Android Activity之间经典切换动画

    package com.iteye.androidtoast; import java.util.ArrayList; import java.util.List; import android.ap ...

  7. 倍福TwinCAT(贝福Beckhoff)基础教程6.1 TwinCAT如何与高级语言通讯

    因为使用TwinCAT的人用途不同,重视点就不同.如果用来代替传统PLC+HMI做项目的,很少会需要用到跟高级语言通讯,但是如果是用来做运动控制平台如做机器人运动控制器的,就肯定会用到.不管是否用得上 ...

  8. Linux——Virtualenv和pip小探

    转载自:http://mengzhuo.org/blog/virtualenv%E5%92%8Cpip%E5%B0%8F%E6%8E%A2.html 本文献给那些看着参差不齐的中文文档/教程,但还在坚 ...

  9. vue-router 导航守卫

    记住参数或查询的改变并不会触发进入/离开的导航守卫.你可以通过观察 $route 对象来应对这些变化,或使用 beforeRouteUpdate 的组件内守卫. 1.全局守卫 const router ...

  10. angularjs与server交互

    真正的应用须要和真实的server进行交互,移动应用和新兴的Chrome桌面应用可能是个例外,可是对于此外的全部应用来说,不管你是想把数据持久化到云端.还是须要与其它用户进行实时交互.都须要让应用与s ...