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

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

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

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

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

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

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

  btn2.οnclick=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.οnclick===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阻止事件的默认行为

转载于:https://www.cnblogs.com/lianghong/p/8384859.html

【总结整理】JavaScript的DOM事件学习(慕课网)相关推荐

  1. 前端JavaScript之DOM事件操作~都是干货

    下面是对DOM操作事件的整理,希望可以帮助到有需要的小伙伴~ 文章目录 DOM事件操作 JavaScript的基础 事件 代码书写步骤 1.获取绑定事件的元素 2.绑定事件 3.编写事件 注意事项 D ...

  2. Javascript核心DOM操作 学习笔记

    DOM .BOM Day01 DOM 1.web APIs和JS基础关联性 1.1 JS的组成 1.2 JS基础阶段以及Web APIs阶段 2.API和Web APIs 2.1 API 2.2 We ...

  3. JavaScript中DOM事件

    DOM事件 什么是事件? 事件就是文档或浏览器窗口中发生的一些特定的交互瞬间.主要有HTML事件和DOM事件. HTML事件:直接在HTML元素标签内添加事件,执行脚本. <!doctype h ...

  4. 学习 慕课网 PHP工程师学习计划--我的笔记汇总

    为了进一步学习PHP,本周我选定了慕课网的PHP工程师学习计划, 从今天2015-07-06 10:24:47开始从头学习:计划本周尽快学习完成本课程,谨此作为笔记. 有个好的学习计划和思路非常非常重 ...

  5. JavaScript HTML DOM 事件(笔记)

    HTML 事件的例子: 当用户点击鼠标时 当网页已加载时 当图像已加载时 当鼠标移动到元素上时 当输入字段被改变时 当提交 HTML 表单时 当用户触发按键时 h1点击事件 <h1 onclic ...

  6. JavaScript之DOM(事件高级)

    事件高级 一.注册事件(绑定事件) 1.传统注册方式 2.方法监听注册方式 1.addEventListener 事件监听方式 2.attachEvent 事件监听方式 3.注册事件兼容性问题 二.删 ...

  7. 【JS】DOM事件模型

    DOM事件模型主要包含4个方面的内容,分别是: 事件流 主流浏览器的事件模型 事件对象 注册与移除事件监听器 下面一一了解下: 首先,什么是DOM?文档对象模型(DOM)是表示文档(比如HTML和XM ...

  8. 前端入门之——javascript day8 DOM对象(DHTML)

    DOM对象(DHTML) 7.1 什么是 DOM? DOM 是 W3C(万维网联盟)的标准.DOM 定义了访问 HTML 和 XML 文档的标准: "W3C 文档对象模型(DOM)是中立于平 ...

  9. 【总结整理】javascript进阶学习(慕课网)

    数组 数组是一个值的集合,每个值都有一个索引号,从0开始,每个索引都有一个相应的值,根据需要添加更多数值. 二维数组 二维数组 一维数组,我们看成一组盒子,每个盒子只能放一个内容. 一维数组的表示: ...

最新文章

  1. Android中ListView的使用以及使用适配器设置数据源
  2. docker 发布tomcat项目_Docker部署java项目[tomcat环境]
  3. spock测试_使用Spock测试您的代码
  4. 太突然!一日本上班族大叔被通知得了诺贝尔奖,他却选择消失了16年,又有重大发现!...
  5. 一个两年Java的面试总结
  6. Android学习笔记(24):进度条组件ProgressBar及其子类
  7. 单点服务器微信公众号,腾讯云联合微信降低开发门槛 微信生态从单点云开发到全面云开发...
  8. dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库....
  9. 数学方面的能力该怎么培养
  10. ganglia集群监控搭建步骤
  11. SQLite3基础教程(二)
  12. 破解庞加莱猜想--中国人干的!
  13. HCIE公开课之VLAN
  14. 破解数字化转型难题,华为云一站式大数据BI赋能企业发展
  15. stm32单片机里面的GPIO是什么意思?
  16. 【Excel神技】之 区域命名
  17. 鸿蒙系统桌面搭配,华为平板 MatePad Pro 来了!首搭鸿蒙系统,与电脑“花样”协同…...
  18. lol祖安服务器维护,触目惊心 被演员与代练所“支配”的英雄联盟
  19. C++中的dynamic_cast和dynamic_pointer_cast
  20. 如何打开数据库的db.opt文件

热门文章

  1. react方法返回html_React全家桶之React基础(推荐新手必看)
  2. CentOS下安装Memcached,Linux下安装Memcached,centos下安装memcached,linux下安装memcached...
  3. 单链表不带头标准c语言实现
  4. dp打开思路3:HDU1069 POJ3616 POJ1088
  5. python基础技巧总结(五)
  6. C++(STL):28 ---关联式容器map用法
  7. 《Python Cookbook 3rd》笔记(2.20):字节字符串上的字符串操作
  8. 《剑指Offer》23:链表中环的入口节点
  9. www.python123.org_python爬虫-requests
  10. 开发中的“软”与“硬”:高画质移动游戏开发之道