本文为原创,转载请注明出处: cnzt       文章:cnzt-p

http://www.cnblogs.com/zt-blog/p/6676913.html

1. 分类

IE -- 冒泡型

现代浏览器 -- 捕获型冒泡型

2. DOM事件流

捕获(window? --> document --> 父 --> 子) --> 目标 --> 冒泡(子 --> 父 --> document --> window?) 
*********DOM标准的事件模型最独特的性质是,文本节点也会触发事件(在IE不会)*********

3. 事件句柄 VS 事件监听器

事件句柄:onclick  只能监听一次

  onclick = function(){}  /  onclick = null

事件监听器:允许注册多个监听器

  ie   --  attachEvent("onclick", callback)  /  detachEvent("onclick", callback)

        *****callback回调函数中的this指向window!!!

  DOM标准 -- addEventListener("click", callback, ifCapture)  /  removeEventListener("click", callback, ifCapture)

      ifCapture指明事件是捕获型事件(true,捕获阶段调用)还是冒泡型事件(false,冒泡阶段调用)。

callback中的this执行注册事件的element

4. 事件对象

  ie -- window.event

  DOM标准 -- callback中的参数e

5. 事件的目标元素获取

  ie --  event.srcElement

  DOM标准 -- e.target

6. 阻止冒泡

  ie --  event.cancelBubble = true;

  DOM标准 -- e.stopPropagation(); -- 也可阻止捕获继续向下传递

7. 阻止默认行为

  ie --  event.returnValue = false;

  DOM标准 -- e.preventDefault();

综合:

  return false;

Javascript标准事件模型的更多相关文章

  1. javascript之事件模型

    事件模型 冒泡型事件(Bubbling):事件由叶子节点沿祖先节点一直向上传递到根节点 捕获型事件(Capturing):由DOM树最顶元素一直到最精确的元素,与冒泡型事件相反 DOM标准事件模型:D ...

  2. 什么是事件代理?DOM2.0标准事件模型的三个阶段

    体验更优排版请移步原文:http://blog.kwin.wang/programming/js-event-delegation.html 事件代理,又称事件委托(Delegation),就是将处理 ...

  3. JavaScript DOM 事件模型

    JavaScript DOM 事件模型 JavaScript 是基于面向对象和事件驱动的一门语言,事件模型是 DOM 中至关重要的内容,理解事件驱动机制.事件反馈.事件冒泡.事件捕获以及事件委托能帮助 ...

  4. JavaScript DOM事件模型

    早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类. 1.DOM事件模型.DO ...

  5. 【repost】JavaScript 事件模型 事件处理机制

    什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...

  6. JavaScript——事件模型

    DOM事件流: DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素结点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事件,这个传播过程可称为DOM事件 ...

  7. JavaScript 事件模型 事件处理机制

    什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...

  8. 轻松学习JavaScript二十七:DOM编程学习之事件模型

    在介绍事件模型之前,我们先来看什么是事件和什么是event对象. 一事件介绍 JavaScript事件是由訪问Web页面的用户引起的一系列操作,使我们有能力创建动态页面.事件是能够被 JavaScri ...

  9. 说说JavaScript中的事件模型

    1.javascript中为元素添加事件处理程序的方法有以下几种方式,可以为javascript元素添加事件处理程序 (1) 直接将事件处理代码写在html中(2) 定义一个函数,赋值给html元素的 ...

随机推荐

  1. pocket API学习笔记

    最近安装了pocket离线阅读软件. 为了收藏需要的URL,每次都要打开浏览器.然后按google工具条上的pocket+. 网页多的时候,这个过程就非常缓慢. 根据pocket网站的API介绍,我可 ...

  2. Java随机产生中文昵称

    有时候我们注册一个网站第一次登陆系统会产生一个随机昵称供用户选择,在项目测试阶段遇到了这个问题,因为注册时没有让用户填写昵称,于是找了两种产生随机中文昵称的方法: 代码如下 package com.u ...

  3. js 字符串截取 substring() 方法、 substr() 方法、slice() 方法、split() 、join();

    三种 js 截取字符串的方法: substring() 方法: substr() 方法: slice() 方法: 1.:substring() 方法:string.substring(from, to ...

  4. SVM-支持向量机 学习 1

    参考 https://zhuanlan.zhihu.com/p/42334376 https://blog.csdn.net/liugan528/article/details/79448379 ht ...

  5. autoHeight # 动态高度添加 用 window.addEventListener('resize', function () {

    动态高度添加 用 window.addEventListener('resize', function () { mounted () { this.init() window.addEventLis ...

  6. Asp.Net Core 入门(二)——Startup.cs做了什么

    上篇介绍了Program.cs中Main做了什么,这篇我们来讨论下Startup.cs它又做了什么呢? 我们新建一个Asp.Net Core Mvc项目,先来开一下Startup的代码 public ...

  7. vue获取v-model数据类型boolean改变成string

    问题描述 今天产品问我一线上bug,怎么radio类型改不了 问题分析 看代码,之前的哥们儿是怎么写的 //页面 <div class="ui-form-box"> & ...

  8. windows图标变空白解决方案

    背景 对磁盘软件路径进行规整,把磁盘不同类型软件进行分类存储后,部分软件在windows桌面为空白,有些在start menu不为空白但是发送至桌面后却变成空白 解决方法 工具:search ever ...

  9. MySQL丨03丨基本语句

    MySQL语句都是以 ; 号结尾的 看库(刘大婶直接面对的是各种档案袋) show databases; 建库(新弄了一个档案袋) create database database_name; 删库( ...

  10. phpStrom+xdebug调试php

    1>xdebug下载 1.1>xdebug官网可以根据phpinfo()源代码来提供对应版本的xdebug,地址:https://xdebug.org/wizard.php 如下截图 1. ...