JS加强学习-BOM学习04

今天主要是将事件的阶段详细讲一下,还有一些是属于事件对象的常用属性和方法。

1. 注册事件和移除事件

注册事件:

addEventListener()

attachEvent()

移除事件:

removeEventListener()

detachEvent()

注意:

需要将元素的事件移除时,需要注意移除事件的执行函数要与注册事件时的执行函数为同一个,如果注册时事件执行函数为一个匿名函数时,就算移除事件时的匿名函数内容一致也无法将事件移除,因为匿名函数每一个都是定义的新的函数,不是唯一。所有注册时的事件执行函数需要进行函数申明后再进行调用函数。

兼容性问题:

移除事件与注册事件对应,也存在兼容性问题。处理兼容这种兼容方式叫能力检测:

注册事件兼容性:

function addEventListener(element, type, listener) {
        //能力检测
        if(element.addEventListener) {
            element.addEventListener(type, listener, false);
        }else if(element.attachEvent) {
            element.attachEvent("on" + type, listener);
        }else{
            element["on" + type] = listener;
        }
    }

移除事件兼容性:

function removeEventListener(element, type, listener) {
        //能力检测
        if(element.removeEventListener) {
            element.removeEventListener(type, listener, false);
        }else if(element.detachEvent) {
            element.detachEvent("on" + type, listener);
        }else{
            element["on" + type] = null;
        }
    }

2. 事件的三个阶段

2.1 捕获阶段:从document开始依次查询触发事件的最底层元素。

2.2 目标阶段:触发事件的元素执行事件处理函数。

2.3 冒泡阶段:依次将触发条件向上传递并执行父元素的同一类型的事件处理函数。

3. 事件冒泡

定义:

元素触发事件并执行完该事件处理函数时会将这个触发条件传递给父级元素,如果父级元素也注册了同样的事件则会被触发执行父元素该事件的处理函数并再传递给父级元素的父级元素,直至document为止。这种情形就行水中气泡一样,从气泡出现开始一直往上冒,直至冒出水面。

优点:

如果子元素们需要注册同样的事件和事件处理程序时可以之间给父元素注册事件,通过事件对象来获取触发事件的目标,且如果子元素需要动态创建时,新创建出来的元素也同时注册了事件,而通过传统遍历子元素依次注册事件的方法无法给动态创建出来的子元素注册事件。 -- 事件委托
缺点:

当父元素注册同一类的事件,但是执行的函数与子元素的执行函数有冲突时会直接影响到子元素的事件执行。可以用事件对象e.stopPropagation()的方法来阻止事件冒泡。

4. 事件对象e的常见属性

上次说过当事件触发时系统会返回一个与事件有关的事件参数e,又可以叫做事件对象,作为对象拥有一些常见的属性需要我们熟悉和学习。(一下就用e来代替事件对象)

4.1 e.target:始终最初触发事件的元素   IE8以前不支持target对应的属性是event.srcElement(ie8以前不支持e,只支持window.event)。

4.2 e.currentTarget:如果没有事件冒泡的情况时和e.target一样,当存在事件冒泡时e.currentTarget就指代当时执行事件处理函数的元素。

4.3 this:始终与e.currentTarget一样的

4.4 阻止事件冒泡

e.stopPropagation()

IE老版本 event.cancelBubble=true

4.5 阻止默认事件的执行

e.preventDefault()

IE老版本 event.returnValue = false

4.6 鼠标事件的参数

type:返回值为事件类型

eventPhase:事件阶段,返回值为一个数字,1代表事件捕获;2代表目标阶段;3代表事件冒泡。

shiftKey/ctrlKey/altKey:按下鼠标同时按下组合键

button:获取鼠标的按键返回一个鼠标键对应的数字

时间: 2024-10-18 11:06:13

JS加强学习-BOM学习04的相关文章

JS加强学习-BOM学习05

1. 正则表达式 我们学习正则表达式主要的是学习它的规则(语法),还有就是学习正则表达式在JS中的对象RegExp的属性和方法. 1.1 正则表达式定义: 它是用来操作字符串的一种逻辑公式,具体就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个“特定字符串的规则”,用这个“规则”来对字符串进行一种过滤和选择. 1.2 正则表达式的特点: 1.2.1 具有非常强的灵活性.逻辑性和功能性 1.2.2 可以用极简单的方式迅速地达到对字符串的复杂控制. 1.2.3 由于能满足各种情况的组合,

JS加强学习-BOM学习02

BOM的更多的用于特效方面的展示,接下来的学习就是将许多以前用到的知识与现在的结合后做出各种不同的动态效果来. 所以在这部分学习中涉及到的新知识会比较零散,甚至会将以前的知识部分衔接起来. 1. offsetParent 获取当前元素最近的设置了定位的父元素,如果没有父元素定位则选择的是body元素. 这样就可以容易理解offsetLeft的意义了,它是相对于offsetParent的距离. 2. offsetHeight 获取盒子的大小(border + height + padding):只

JS加强学习-BOM学习01

BOM   浏览器对象模型 1. 定时器 1.1 设置定时器: setTimeout(string/function,delay);间隔一定时间后执行一次,且只执行一次. setInterval(string/function,delay);每间隔一定时间后执行一次,一直执行下去. 这两个定时器的返回值是数字类型的定时器ID. 1.2 清除定时器: clearTimeout(定时器Id): clearInterval(定时器Id). 设置定时器和清除定时器需对应设置,不建议使用与设置定时器不一致

PhotoSwipe.js 相册展示插件学习

PhotoSwipe.js官网:http://photoswipe.com/,在这个网站上可以下载到PhotoSwipe的文件以及相关的例子. 这个组件主要是用来展示图片.相册用的,还是很实用的. 一.使用这个组件需要引入两个js文件: 1 <script type="text/javascript" src="simple-inheritance.min.js"> 2 <script type="text/javascript"

Js脚本之jQuery学习笔记(1)

Js脚本之jQuery学习笔记(1) 一.javascript基础 单行注释 多行注释 /* */ 数据类型 数值型 字符串型 布尔型 空值 未定义值 转义字符 函数定义:1234567891011121314<head><script language="javascript"function test(m){var xixi="嘻嘻"alert("这是javascript")document.write(xixi + m)}

JS中模板嵌套学习(代码)

<script src="script/jquery-1.4.2.js"></script>    <script src="script/jsrender.js"></script>    <script id="header" type="text/x-jsrender">        <tr>               <th>序号&

深度学习caffe:Ubuntu16.04安装指南(3)

caffe [完全版] 2017-01-19 配置如下: caffe + cuda8.0[GPU加速[只支持N卡]] + cudnn5.1 + opencv3.1 + python2.7 + boost58 , 主要参考了caffe官方教程 Ubuntu 16.04 or 15.10 Installation Guide 开始前,请先阅读: 深度学习caffe:Ubuntu16.04安装指南(2) 正式开始安装前,你需要一台已经安装好了Ubuntu16.04系统的电脑,然后/home分区最好有尽

JS中childNodes深入学习

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <div id="box"> <div></div> <div></div> <div></div> </div> <script

Andorid开发学习---ubuntu 12.04下搭建超好用的安卓模拟器genymotion 安装卸载virtualbox 4.3

什么是Genymotion? Genymotion是一套完整的工具,它提供了Android虚拟环境.它简直就是开发者.测试人员.推销者甚至是游戏玩家的福音. Genymotion支持Windows.Linux和Mac OS等操作系统,容易安装和使用:按简单的安装过程,选择一款Android虚拟设备,开启后就体验Genymotion带来的快感吧.-----引自百度百科 一.下载并安装genymotion 1.下载genymotion http://www.genymotion.cn/#theme=