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

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

          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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/452796.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python面试题总结(6)--数据类型(综合)

1. Python 里面如何实现 tuple 和 list 的转换&#xff1f; 答&#xff1a; Python 中的类型转换&#xff0c;一般通过类型强转即可完成 tuple 转 list 使用 list() 方法 list 转 tuple 使用 tuple() 方法 2. 我们知道对于列表可以使用切片操作进行部分元素的选择&#xff0c…

项目经理需要的思维批判

想做好项目经理&#xff0c;就一定要改变你的思维方式。这对于技术出身的朋友尤其重要。 清末人们自以为天朝&#xff0c;他国皆为蛮夷。结果如何呢&#xff1f;丧师辱国&#xff0c;自己沦为病夫。其根本莫非自己脑筋不对头&#xff1f;后来又搞洋务运动&#xff0c;以为洋人…

NavigationView更改菜单icon和title颜色变化效果

NavigationView menu默认icon和title会随着菜单状态改变而改变&#xff0c;选择某个菜单后再次打开侧边菜单后会发现该菜单的icon和title会变成应用的主颜色&#xff0c;其他菜单项仍然为黑色。 如果想关闭系统默认的这个效果&#xff0c;有两种方式&#xff1a; 1. XML布局文件…

java项目打镜像_docker通过dockerfile打java项目镜像

环境&#xff1a;centos7思路&#xff1a;java -jar 启动的项目打包成docker images进行运行创建dockerfile——>创建shell脚本——>打包images1、dockerfile内容如下[rootk8s-master xxl-execl]# more dockerfile#网上拖取java8的镜像FROM java:8MAINTAINER zhangshan-m…

什么是数据库

数据库&#xff08;Database&#xff0c;简称DB&#xff09;是长期储存在计算机内、有组织的、可共享的大量数据的集合。1.数据库的基本特征2.数据按一定的数据模型组织、描述和储存3.可为各种用户共享4.冗余度较小5.数据独立性较高6.易扩展

NumPy常用属性及方法

NumPy是高性能科学计算和数据分析的基础包。部分功能如下&#xff1a; ndarray, 具有矢量算术运算和复杂广播能力的快速且节省空间的多维数组。用于对整组数据进行快速运算的标准数学函数&#xff08;无需编写循环&#xff09;。用于读写磁盘数据的工具以及用于操作内存映射文件…

Windows下gmssl使用记录

使用gmssl进行计算sm4&#xff0c;编译的版本是gmssl2.0&#xff0c;2.1版本编译不过去 第一步下载软件&#xff0c;下载Visual Studio 2010旗舰版、nasm-2.13.03-installer-x86、ActivePerl-5.22.4.2205-MSWin32-x86-64int-403863这三个软件&#xff0c; 注意vs版本不能太低&a…

公司管理项目管理中的技巧

如果在项目实施中选出最难解决的几个问题&#xff0c;那么管理问题一定名列前茅。在管理问题中&#xff0c;团队管理又是其中的难点。一个项目管理的好坏&#xff0c;很大程度就体现在团队的建设和管理上。团队管理涉及到管理学、心理学和哲学等诸多方面内容&#xff0c;具体实…

数据库管理系统

什么是数据库管理系统位于用户与操作系统之间的一层数据管理软件是基础软件&#xff0c;是一个大型复杂的软件系统 数据库管理系统的用途科学地组织和存储数据、高效地获取和维护数据数据定义功能提供数据定义语言&#xff08;DDL&#xff09;定义数据库中的数据对象数据组织、…

kangle服务器搭建java_linux下kangle虚拟主机-架设java空间的教程及心得

1. chmod x jdk-6u31-linux-i586-rpm.bin2. ./jdk-6u31-linux-i586-rpm.bin复制代码(注&#xff1a;如果下载的版本不同输入实际版本)2.下载插件包:1. wget http://www.kanglesoft.com/download/ent/easypanel-tomcat-lin-1.0.tar.gz2. tar xzf easypanel-tomcat-lin-1.0.tar.g…

Django项目--登录判断装饰器

view.py中定义登录判断装饰器函数 def login_required(view_func):登录判断装饰器def wrapper(request, *view_args, **view_kwargs):# 判断用户是否登录if request.session.has_key(islogin):# 用户已登录,调用对应的视图return view_func(request, *view_args, **view_kwarg…

Apple着手抛弃32位macOS应用程序

\看新闻很累&#xff1f;看技术新闻更累&#xff1f;试试下载InfoQ手机客户端&#xff0c;每天上下班路上听新闻&#xff0c;有趣还有料&#xff01;\\\Apple已经着手抛弃macOS上的32位应用程序了。macOS的下一个维护更新版本High Sierra 10.13.4将会在用户打开32位应用程序时对…

HiveQL与SQL区别

1、Hive不支持等值连接 •SQL中对两表内联可以写成&#xff1a;•select * from dual a,dual b where a.key b.key;•Hive中应为•select * from dual a join dual b on a.key b.key; 而不是传统的格式&#xff1a;SELECT t1.a1 as c1, t2.b1 as c2FROM t1, t2WHERE t1.a2 t…

Django项目--csrf攻击

1.案例流程图&#xff1a; 2.django防止csrf的方式&#xff1a; 1 ) Django中默认打开csrf中间件。settings.py文件中&#xff1a; MIDDLEWARE_CLASSES (django.contrib.sessions.middleware.SessionMiddleware,django.middleware.common.CommonMiddleware,django.middlewar…

数据库管理系统与数据库系统

数据库&#xff1a;容纳数据的仓库。数据库系统&#xff1a;数据库、数据库管理系统、硬件、操作人员的合在一起的总称。数据库管理系统&#xff1a;用来管理数据及数据库的系统。数据库系统包含数据库管理系统、数据库及数据库开发工具所开发的软件&#xff08;数据库应用系统…

如果你扯了团队后腿,你应该内疚

现在&#xff0c;我看到很多人扯了团队的后腿&#xff0c;一句道歉就了事&#xff0c;更甚者就以另一种方式来表达&#xff1a;你们没有给我足够的培训&#xff0c;你们的工作方式我无法接受&#xff0c;我工资太低&#xff0c;你们做的事情不够酷&#xff0c;你们做的事情不赚…

mysql count(*),count(1)与count(column)区别

2019独角兽企业重金招聘Python工程师标准>>> count(*)对行的数目进行计算&#xff0c;包含NULL count(column)对特定的列的值具有的行数进行计算&#xff0c;不包含NULL值。 count()还有一种使用方式&#xff0c;count(1)这个用法和count(*)的结果是一样的。 性能问…

Java IO API记录

文件路径&#xff1a; public static final String FILEPATH File.separator"Users" File.separator"xuminzhe"File.separator"Documents"File.separator"io"; 1.创建文件 public static void main(String[] args) {File filenew File…

Flask项目--预防csrf攻击原理

1.CSRF机制原理 2.csrf成功攻击示意图 3.csrf防御