事件:在文档或者浏览器窗口中发生的一些,特定的交互瞬间

HTML和JavaScript的交互通过事件 来实现

比如:1.滚动条向下滑动,加载图片 2.图片轮播,鼠标由2-5页调换

本章内容
1、理解事件流
2、使用事件处理程序
3、不同的事件类型
一、事件流
事件流描述的是从页面中接受事件的顺序。
IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流
1、事件冒泡
 事件冒泡,即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上转播至最不具体的节点(文档)。
2、事件捕获
 事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件。

二、事件处理程序
1、HTML事件处理程序

直接赋值在标签上,用事件调用,麻烦,改动至少要改两个地方
2、DOM0级事件处理程序

比较传统的方式:把一个函数赋值给一个事件的处理程序的属性,简单,可跨浏览器

  btn2.onclick=showMessage;// 函数调用不加引号不叫括号
3、DOM2级事件处理程序
  DOM2级事件定义了两个方法:用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()

  它们都接收三个参数:

    要处理的事件名;//去掉on

    作为事件处理程序的函数;// 函数调用不加引号不叫括号

    一个布尔值。//主要用false

true在捕获阶段调用事件处理程序,false在冒泡阶段调用事件处理程序(主要)

btn3.addEventListener('click',showMessage,false);//ie不起作用

btn3.removeEventListener('click',showMessage,false)
4、IE事件处理程序
  attachEvent()添加事件
  detachEvent()删除事件

btn3.attachEvent('onclick',showMessage);

btn3.detachEvent('onclick',showMessage);//事件还是要有on
  这两个方法接收相同的两个参数:(事件处理程序名称, 事件处理函数)//两个参数的原因:因为IE8及更早期的版本只支持事件冒泡,默认加到冒泡阶段

支持ie事件处理器的浏览器有ie和opera

5、跨浏览器的事件处理程序

//element.'on'+type
//element.('on'+type)
//element.onclick===element['onclick']

js中用element.加属性都等价于element[]

三、事件对象
事件对象event : 在触发DOM上的某个事件的时候都会产生一个事件对象
1、DOM中的事件对象
  (1)、type:获取事件类型
  (2)、target:用于获取事件目标,事件给谁加上,事件来自于哪个属性     或者节点名称(element.target.nodeName)  
  (3)、event.stopPropagation() 阻止事件冒泡  event.preventDefault()  写了这个函数后,就不会向上冒泡
  (4)、event.preventDefault() 阻止事件的默认行为

默认行为:比如:<a href='#'>超链接</a>

    a标签的默认行为就是跳转

    bubbles属性 canselable属性
2、IE中的事件对象
  (1)、type:获取事件类型
  (2)、srcElement:用于获取事件的目标
  (3)、cancelBubble=true阻止事件冒泡  
  (4)、returnValue=false阻止事件的默认行为

【总结整理】JavaScript的DOM事件学习(慕课网)的更多相关文章

  1. JavaScript HTML DOM 事件

    JavaScript HTML DOM 事件 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应. 实例 Mouse Over Me 对事件做出反应 我们可以在事件发生时执行 ...

  2. javascript:理解DOM事件

    首先,此文不讨论繁琐细节,但是考虑到读者的心灵感受,本着以积极向上的心态,在此还是会列举示例说明. ​标题为理解DOM事件,那么在此拿一个简单的点击事件为例,希望大家看到这个例子后能触类旁通. DOM ...

  3. js之DOM入门(慕课网学习笔记)

    DOM简介 获得元素 document.getElementById('') 1.通过id获得元素内容 document.getElementsByTagName('') 2.通过标签获得元素内容 d ...

  4. 前端笔记之JavaScript(十)深入JavaScript节点&DOM&事件

    一.DOM JavaScript语言核心.变量的定义.变量的类型.运算符.表达式.函数.if语句.for循环.算法等等.这些东西都属于语言核心,下次继续学习语言核心就是面向对象了.JavaScript ...

  5. JavaScript基础—dom,事件

    Js基础-DOM 1:dom:文档对象模型 Dom就是html页面的模型,将每个标签都作为一个对象,js通过调用dom中的属性,方法就可以对网页中的文本框,层等元素进行编程控制.Dom就是一些让jav ...

  6. 前端JavaScript之DOM事件操作

    DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. 1.DOM(Document Object Moduel):文档对象模型 定义了访问和操作HTML文档的标准法,把HT ...

  7. 松软科技web教程:JavaScript HTML DOM 事件监听器

    addEventListener() 方法 实例 添加当用户点击按钮时触发的事件监听器: document.getElementById("myBtn").addEventList ...

  8. javascript将DOM事件处理程序封装为event.js 出现的低级错误记录

    将 DOM 0级事件处理程序和DOM2级事件处理程序 IE事件处理程序封装为eventUtil对象,达到跨浏览器的效果.代码如下: var eventUtil = { // 添加事件句柄 addEve ...

  9. JS DOM事件学习

    DOM查找方法: document.getElementByID("id") document.getElementsByTagName("tag") 返回一个 ...

随机推荐

  1. 改善程序与设计的55个具体做法 day7

    条款18:让接口容易被正确使用,不易被误用 这里说的接口是广义上的接口,即包括但不限于函数接口.类接口.template接口等,每一种接口都是客户与你的代码进行交互的手段. 我们对客户的所谓“资质或水 ...

  2. Flex自定义组件开发

    一般情况下需要组件重写都是由于以下2个原因:1.在FLEX已有组件无法满足业务需求,或是需要更改其可视化外观等特性时,直接进行继承扩展.2.为了模块化设计或进一步重用,需要对FLEX组件进行组合.而F ...

  3. Delphi 的类型与指针

    Delphi 的指针分为 "类型指针" 和 "无类型指针" 两类.Delphi 中的类型, 常用的也得有几百个, 我们可以给每种类型定义相应的类型指针.其实 D ...

  4. sdut oj 操作系统实验--SSTF磁盘调度算法【操作系统算法】

    操作系统实验--SSTF磁盘调度算法 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 磁盘调度在多道程序设计的计算机系统中,各个进 ...

  5. Eclipse debug neutron-server

    1 首先停掉neutron-server kill neutron-server in screen by ctr-c q-svc 2 cp /usr/local/bin/neutron-server ...

  6. POJ 2831 Can We Build This One:次小生成树【N^2预处理】

    题目链接:http://poj.org/problem?id=2831 题意: 给你一个图,每条边有边权. 然后有q组询问(i,x),问你如果将第i条边的边权改为x,这条边是否有可能在新的最小生成树中 ...

  7. django使用bootstrap前端框架

    一.下载bootstrap相关文件,放在项目目录中.在blog 应用中新建static目录,bootstrap文件放在此目录下. bootstrap下载网址:http://v3.bootcss.com ...

  8. python代码docstring生成文档之sphinx

    在使用python中,我们一般在模块,类,函数下使用docstring添加字符串说明性文档,使开发人员更好的可以看懂此代码是做什么用的.然而写了那么多的注释,我们想要一篇文档怎么办,第一种办法不可能将 ...

  9. 关于C++多态的理解

    多态,即多种形态.对于具有继承关系的一类对象,子类表现出了父类的某些特性,但是表现的不一样,这就是多态的现实体现.例如动物可以发声,但是狗是旺旺,狗是动物的一种,但是表现了不同的叫的特点,这就是多态. ...

  10. codeforces 633B B. A Trivial Problem(数论)

    B. A Trivial Problem time limit per test 2 seconds memory limit per test 256 megabytes input standar ...