[DOM Event Learning] Section 2 概念梳理 什么是事件 DOM Event

 

事件

  事件(Event)是用来通知代码,一些有趣的事情发生了.
  每一个Event都会被一个Event对象所表示,这个对象可能还会有一些自定义的字段或者方法,来获取发生什么事情的更多信息.
  Event对象实现了Event接口(https://developer.mozilla.org/en-US/docs/Web/API/Event).
 
  事件可以是任何事情,从最基本的用户交互,到rendering model中自动发生的一些事情.
  有一些官方规范中的标准事件,也有一些特定浏览器使用的内部事件.
 

事件处理器

  要在某个对象发生某个事件(比如一个a标签被点击)的时候得到通知,可以为这个对象的这个事件指定一个event handler.
  指定方法:
  1.用元素名为on{eventtype}的HTML属性, 比如:
<button onclick="return handleClick(event);">
  2.用JavaScript选取元素,设置对应的onXXX属性,比如:
document.getElementById("mybutton").onclick = function(event) { ... }.
  更现代的浏览器可以用addEventListener()方法: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
  但是这个方法不兼容IE9之前的浏览器.
  如果用jQuery来注册监听,框架会帮我们处理浏览器的兼容性问题.
  具体的各种注册监听的方式, 上一篇博文中有总结:http://www.cnblogs.com/mengdd/p/4354339.html
 
  Event handler可以设置在HTML元素上,也可以设置在其他产生事件的对象上,比如window, document, XMLHttpRequest等.
  因为历史原因,一些<body>和<frameset>上的属性实际是在它们的Window对象上设置event handler.
  比如:onblur, onerror, onfocus, onload, onscroll.
 

事件对象

  在时间被触发的时候,回调方法接收一个事件对象作为参数.
  这样你在处理的时候,可以知道当前是什么事件(type), 它的target, 以及相关的事件参数.
  Event是一个接口, 它有一些公共的属性和方法.
  各种具体的事件接口(比如MouseEvent, KeyboardEvent)都是Event的子类.
 
 
  事件对象的方法中:
  event.stopPropagation() 会阻止当前事件的进一步传播.
  event.preventDefault() 会取消可以取消的事件, 但是不阻止事件的进一步传播.
  preventDefault()用来阻止一些默认的行为发生.
 
 

参考资料:

  learn jQuery Events: http://learn.jquery.com/events/
 
 

[DOM Event Learning] Section 2 概念梳理 什么是事件 DOM Event的更多相关文章

  1. [DOM Event Learning] Section 4 事件分发和DOM事件流

    [DOM Event Learning] Section 4 事件分发和DOM事件流 事件分发机制: event dispatch mechanism. 事件流(event flow)描述了事件对象在 ...

  2. [DOM Event Learning] Section 3 jQuery事件处理基础 on(), off()和one()方法使用

    [DOM Event Learning] Section 3 jQuery事件处理基础 on(),off()和one()方法使用   jQuery提供了简单的方法来向选择器(对应页面上的元素)绑定事件 ...

  3. [DOM Event Learning] Section 1 DOM Event 处理器绑定的几种方法

    [DOM Event Learning] Section 1 DOM Event处理器绑定的几种方法   网页中经常需要处理各种事件,通常的做法是绑定listener对事件进行监听,当事件发生后进行一 ...

  4. 一文梳理JavaScript 事件循环(Event Loop)

    事件循环(Event Loop),是每个JS开发者都会接触到的概念,但是刚接触时可能会存在各种疑惑. 众所周知,JS是单线程的,即同一时间只能运行一个任务.一般情况下这不会引发问题,但是如果我们有一个 ...

  5. 【二】jquery之基础概念与jquery对象与dom对象的区别及混合使用

    一:jquery基本概念 1.jquery是一个javascript框架,它是一个轻量级的js库 2.当下流行的js库有: jquery MooTools Prototype 3.$(ducoment ...

  6. event driven的一些概念

    1. event :Something that happens during your application that requires a response. 2.event object:Th ...

  7. 重新审视事件对象event

    前言:之前在学习事件对象event时,一是一直在chrome浏览器(作为主运行环境)下运行调试自个儿程序,二是可能当时对事件对象理解不透彻才导致现在对事件对象的用法陷入了一个大坑,遂以此篇博客记之. ...

  8. 谈谈事件对象-event

    JavaScript 中的事件对象(event) 当我们每次触发一种事件(如点击事件),我们会在回调函数中传入事件对象event.今天就来来谈谈. 1.当我们想判断当前事件是我们想要的事件类型时,可以 ...

  9. JavaScript:事件对象Event和冒泡

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 绑定事件的两种方式 我们在上一篇文章中已经讲过事件的概念.这里讲一下注册 ...

随机推荐

  1. Python 模块学习:os模块

    一.os模块概述 Python os模块包含普遍的操作系统功能.如果你希望你的程序能够与平台无关的话,这个模块是尤为重要的.(一语中的) 二.常用方法 1.os.name 输出字符串指示正在使用的平台 ...

  2. codeforces Round #320 (Div. 2) C. A Problem about Polyline(数学) D. "Or" Game(暴力,数学)

    解题思路:就是求数 n 对应的二进制数中有多少个 1 #include <iostream> #include<cstdio> using namespace std; int ...

  3. JavaScript的Tab切换

    在网页设计中经常要用到tab切换,遂整理了一下常用的两种方法. 先看一下示例代码: HTML: <!doctype html> <html lang="en"&g ...

  4. Apache Sqoop - Overview——Sqoop 概述

    Apache Sqoop - Overview Apache Sqoop 概述 使用Hadoop来分析和处理数据需要将数据加载到集群中并且将它和企业生产数据库中的其他数据进行结合处理.从生产系统加载大 ...

  5. Markdown 语法整理

    Markdown 语法整理 白宁超 2015年7月24日14:57:49 一.字体设置 A First Level Header == A Second Level Header -- # 标题 ## ...

  6. Oracle 11g 编译使用BBED

    环境:RHEL 6.4 + Oracle 11.2.0.4 1. 拷贝缺失文件 2. 编译BBED 3. BBED使用测试 Reference 1. 拷贝缺失文件 11g中缺失几个相关文件,但我们实际 ...

  7. Android APP压力测试(三)之Monkey日志自动分析脚本

    Android APP压力测试(三) 之Monkey日志自动分析脚本 前言 上次说要分享Monkey日志的分析脚本,这次贴出来分享一下,废话不多说,请看正文. [目录] 1.Monkey日志分析脚本 ...

  8. Azure Media Service (1) 使用OBS进行Azure Media Service直播

    <Windows Azure Platform 系列文章目录> 今天正好有客户问如何使用OBS进行Azure Media Service直播,我这里简单介绍一下. 先决条件: 1. OBS ...

  9. Hibernate ——二级缓存

    一.Hibernate 二级缓存 1.Hibernate 二级缓存是 SessionFactory 级别的缓存. 2.二级缓存分为两类: (1)Hibernate内置二级缓存 (2)外置缓存,可配置的 ...

  10. 纯css3手机页面图标样式代码

    全部图标:http://hovertree.com/texiao/css/19/ 先看效果: 或者点这里:http://hovertree.com/texiao/css/19/hoverkico.ht ...