7.事件深入

7.1.事件捕获

事件流分为事件冒泡和事件捕获两种，事件冒泡指事件从里往外传播，而事件捕获刚好相反，指事件从外向內传播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box1{
            width: 600px;
            height: 400px;
            background-color: black;
            margin: 100px auto;
            border: 1px solid
        }
        #box2{
            width: 400px;
            height: 200px;
            margin: 100px auto;
            background-color: orangered;
            border: 1px solid
        }
        #box3{
            width: 200px;
            height: 100px;
            margin: 50px auto;
            background-color: #009f95
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
    <script>
        var oBox1 = document.getElementById("box1")
        var oBox2 = document.getElementById("box2")
        var oBox3 = document.getElementById("box3")
        function fn(){
            alert(this.id)
        }
        oBox1.onclick = fn;
        oBox2.onclick = fn;
        oBox3.onclick = fn;
        // 事件绑定的另外一种形式
        // addEventListener 第一个参数是 事件名称，第二个参数是事件处理函数，第三个参数表示 是否捕获
        // true表示捕获  false表示不捕获，捕获就是冒泡
        // 下面是事件冒泡的写法
        // oBox1.addEventListener('click',fn,false)
        // oBox2.addEventListener('click',fn,false)
        // oBox3.addEventListener('click',fn,false)
        // 下面是事件捕获的写法
        oBox1.addEventListener('click',fn,true)
        oBox2.addEventListener('click',fn,true)
        oBox3.addEventListener('click',fn,true)
    </script>
</body>
</html>

7.2.事件绑定形式总结

第一种写法，直接绑定在元素身上

 <div id="box" onclick="fn(this)"></div>
<script>
    function fn(obj){
        alert(obj.id)
    }
</script>

第二种写法对象.事件 = 事件处理函数

 <div id="box" ></div>
<script>
    var oBox = document.getElementById("box")
    oBox.onclick = function(){
        alert(this.id)
    }
</script>

注意：这种写法有个问题就是，如果同时绑定两个事件处理函数，后面的会把前面的覆盖,例如：

 <div id="box" ></div>
<script>
    var oBox = document.getElementById("box")
    oBox.onclick = function(){
        alert(this.id)
    }
    oBox.onclick = function(){
        alert("nodeing.com")
    }
</script>

第三种写法：addEventListener

<div id="box" ></div>
<script>
    var oBox = document.getElementById("box")
    oBox.addEventListener("click", function(){
        alert(this.id)
    }, false)
    oBox.addEventListener('click', function(){
        alert("nodeing.com")
    }, false)
</script>

注意：这种写法在ie上有兼容性问题，因此，可以封装一个兼容性处理函数

function addEvent(obj, type, fn){
    if(obj.addEventListener){
        obj.addEventListener(type, fn, false);
    } else if(obj.attachEvent){
        obj.attachEvent('on' + type, fn);
    } else {
        obj['on' + type] = fn;
    }
}

7.3.事件取消

function removeEvent(obj, type, fn){
    if(obj.removeEventListener){
        obj.removeEventListener(type, fn, false);
    } else if(obj.detachEvent){
        obj.detachEvent('on' + type, fn);
    } else {
        obj['on' + type] = null;
    }
}

7.4.事件默认行为

如果是通过对象.onclick = fn 这种形式来绑定的，可以直接在事件处理函数中return false来取消

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box{
            height: 200px;
            width: 100px;
            background-color: orangered;
            position: absolute;
            display: none
        }
    </style>
</head>
<body>
    <div id="box" ></div>
    <script>
        var oBox = document.getElementById("box")
        document.oncontextmenu = function(ev){
            var ev = ev || event
            oBox.style.display = "block"
            oBox.style.left = ev.clientX + "px"
            oBox.style.top = ev.clientY + "px"
            // 取消事件默认行为
            return false
        }
        document.onclick = function(){
            oBox.style.display = "none"
        }
    </script>
</body>
</html>

如果是通过addEventListener这种形式来绑定的，需要通过 ev.preventDefault()这种形式来取消

document.addEventListener("contextmenu", function(ev){
    var ev = ev || event
    oBox.style.display = "block"
    oBox.style.left = ev.clientX + "px"
    oBox.style.top = ev.clientY + "px"
    // return false
    ev.preventDefault()
}, false)

螺钉课堂视频课程地址：http://edu.nodeing.com

DOM-BOM-EVENT（7）的更多相关文章

BOM基础（四）
最近写的文章感觉内容不像之前那么充实,内容可能也有点杂.对于DOM,和BOM来说,要理解是不难的,难的是做的时候.要自己想的到,而且,对于目前阶段来说,BOM还存在着很大的兼容性问题,最主要就是要兼容 ...
DOM 事件深入浅出（二）
在DOM事件深入浅出(一)中,我主要给大家讲解了不同DOM级别下的事件处理程序,同时介绍了事件冒泡和捕获的触发原理和方法.本文将继续介绍DOM事件中的知识点,主要侧重于DOM事件中Event对象的属性 ...
JavaScript DOM动态创建（声明）Object元素
http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用Java ...
Ext JS学习第十六天事件机制event（一） DotNet进阶系列(持续更新) 第一节：.Net版基于WebSocket的聊天室样例第十五节：深入理解async和await的作用及各种适用场景和用法第十五节：深入理解async和await的作用及各种适用场景和用法前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G
code&monkey Ext JS学习第十六天事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习今天我们来说一说什么是事件,对于事件 ...
c#中的delegate（委托）和event（事件）
c#中的delegate(委托)和event(事件) 一.delegate是什么东西? 完全可以把delegate理解成C中的函数指针,它允许你传递一个类A的方法m给另一个类B的对象,使得类B的对象能 ...
js的DOM操作整理（整理）
js的DOM操作整理(整理) 一.总结一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...
DOM学习笔记（二）对象方法与属性
所有 HTML 元素被定义为对象,而编程接口(对象的访问)则是对象方法和对象属性. 事实上,常用的只用window对象及其子对象document对象,以及事件Event对象. Window 对象 Wi ...
DOM之事件（一）
DOM事件,就是浏览器或用户针对页面可以做出的某种动作,我们称这些动作为DOM事件.它是用户和页面交互的核心.当动作发生(事件触发)时,我们可以为其绑定一个或多个事件处理程序(函数),来完成我们想要实 ...
DOM的概念（1）
什么是DOM? 通过 JavaScript,您可以重构整个HTML文档.您可以添加.移除.改变或重排页面上的项目.要改变页面的某个东西,JavaScript就需要对HTML文档中所有元素进行访问的入口 ...
JavaScript DOM学习总结（一）
DOM 什么是DOM?简单地说DOM是一套对文档内容进行抽象和概念化的方法. W3C给出的DOM定义是这样的:"一个与系统平台和编程语言无关的接口,程序和脚本以通过这个接口动态的访问和修 ...

随机推荐

Rocket - config - Keys & Params
https://mp.weixin.qq.com/s/Y42EWrO7IoHRD_yHD4iRLA 介绍配置项.配置值以及他们的使用方式. 参考链接: https://docs.qq.com/ ...
Johnson-Trotter(JT)算法生成排列
对于生成{1,……,n}的所有n!个排列的问题,我们可以利用减治法,该问题的规模减一就是要生成所有(n-1)!个排列.假设这个小问题已经解决了,我们可以把n插入到n-1个元素的每一种排列中的n ...
Java实现 LeetCode 623 在二叉树中增加一行（遍历树）
623. 在二叉树中增加一行给定一个二叉树,根节点为第1层,深度为 1.在其第 d 层追加一行值为 v 的节点. 添加规则:给定一个深度值 d (正整数),针对深度为 d-1 层的每一非空节点 N, ...
Java实现 LeetCode 556 下一个更大元素 III（数组的翻转）
556. 下一个更大元素 III 给定一个32位正整数 n,你需要找到最小的32位整数,其与 n 中存在的位数完全相同,并且其值大于n.如果不存在这样的32位整数,则返回-1. 示例 1: 输入: 1 ...
Java实现蓝桥杯VIP算法训练相邻字母
试题算法训练相邻字母资源限制时间限制:1.0s 内存限制:256.0MB [问题描述] 从键盘输入一个英文字母,要求按字母的顺序打印出3个相邻的字母,指定的字母在中间.若指定的字母为Z,则打印 ...
Java中lang包的常用方法介绍
JAVA API(图片来源:实验楼) 包装类 Integer包装类方法返回值功能描述 byteValue() byte 以 byte 类型返回该 Integer 的值 intValue() in ...
java实现第四届蓝桥杯剪格子
剪格子题目描述如图p1.jpg所示,3 x 3 的格子中填写了一些整数. 我们沿着图中的红色线剪开,得到两个部分,每个部分的数字和都是60. 本题的要求就是请你编程判定:对给定的m x n 的格子 ...
MySQL数据库字符集和排序规则的四个级别
MySQL数据库字符集和排序规则有四个级别的默认设置:服务器,数据库,表和列. 最初,服务器字符集和排序规则取决于启动mysqld时使用的选项.可以使用 --character-set-server该 ...
Python--函数&过程
函数式编程与过程式编程打的区分:过程是没有返回值的函数,过程在python3中也有返回值,为None 函数的作用:代码复用.保持代码的一致性.使代码更容易扩展过程的定义与调用: 1 def func ...
List集合排序的方法
1.list集合中的对象实现Comparable接口 public class User implements Comparable<User>{ private Integer id; ...

DOM-BOM-EVENT（7）