文档章节

Javascript之事件

 沉非
发布于 2017/08/07 08:56
字数 995
阅读 6
收藏 0

1、什么事事件?

    事件分为两部分:1->行为本身:浏览器天生就赋予其的行为 onclick、onmouseover、onmouseenter、onmouseout、onmouseleave、onmousemove、onmousedown、onmouseup、onmousewheel(鼠标滚动事件)、onscroll(滚动条滚动行为)、onesize(window.onresize;浏览器窗口的大小改变事件)、onload、onunload(浏览器关闭事件)、onfocus(文本框获取焦点事件)、onblur(文本框失去焦点事件)、onkeydown、onkeyup(浏览器按下和抬起行为)......

    哪怕没有给上述的行为绑定方式,事件也是存在的,当我们点击的时候,同样会触发它的onclick行为,只是什么都没有做而已,但是这个事件是存在的

    2->事件绑定:给元素的某一个行为绑定方法:

    //DOM0级事件绑定

    Ele.onclick = function(){}  //  onclick这个行为定义在当前元素的私有属性上

    //DOM2级 事件绑定

    Ele.addEventListener = function(){}  //addEventListener这个属性是定义在当前元素EventTarget这个类得原型上

    重要:不仅仅把绑定的方法执行,而且浏览器还默默地给这个方法传递了一个参数值->mouseEvent(鼠标事件对象),1:它是一个对象数据类型的值,里面包含了很多的属性名和属性值,这些都是用来记录当前鼠标的相关信息的,2:mouseEvent->UIEvent->Event->Object   原型,3:MouseEvent记录的是页面中唯一一个鼠标每次触发时候的相关信息,和到底在那个元素上出发的没有关系

2、关于事件对象MouseEvent的兼容问题

    1:事件对象本身的获取存在兼容问题:标准浏览器是浏览器给方法传递的参数,我们只需要定义形参e就可以获取到;但是在IE6~8中,浏览器不会传递参数,如果需要的话,需要到window.event中查找

    e = e || window.event  //兼容的写法  e.c;ientX/e.clientY 当前鼠标触发点距离左上角的坐标值

    e.pageX/e.pageY:当前鼠标触发点距离body左上角(页面第一屏的最左上角)的x/y轴的坐标,但是此属性在IE6~8是没有这个属性,我们通过使用clientY+滚动条卷去的高度也可以 e.pageX = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft))  e.pageY = e.pageY || (clientY + (document.documentElement.scrollTop || document.body.scrollTop))

     e.type:存储的当前鼠标触发的行为类型"click"

    e.target  事件源,当前鼠标触发的是哪个元素,那么它存储的就是哪个元素,但是在IE6~8不存在这个属性(undefined),用e.srcElement来获取事件源

    e.target = e.target || e.srcElement  //兼容性处理

    e.preventDefault:阻止浏览器的默认行为,在IE6~8中没有这个方法,我们需要使用e.returnValue=false 来代替

        e.preventDafault ? e.preventDefault() : e.returnValue=false      这样写和return false的效果是一样的,都是阻止默认行为

    e.stopPropagation:阻止事件的冒泡传播,在IE6~8中不兼容,使用e.cancelBubble=true来代替

 

事件的传播机制:

    事件的默认传播机制

        捕获事件:从外到内依次查找元素

        目标阶段:当前事件源本身的操作

        冒泡阶段:从内到外依次触发相关的行为(我们最常用的就是冒泡阶段)

    使用DOM0级事件绑定给元素的某一个行为绑定的方法,都是在行为出发后的冒泡阶段把方法执行

    不同浏览器传播的最顶层的位置是不一样的,在谷歌浏览器中是可以传播到document的,在IE中只能传播到HTML

addEventListener:第一个参数是行为类型,第二个参数是给当前的行为绑定方法,第三个参数是控制在哪个阶段发生:true 在捕获阶段发生,false 在冒泡阶段发生

 

onmouseover和onmouseenter 都是鼠标进入的事件,但是onmouseenter不会发生事件的传播,自动的阻止了事件的传播,而onmouseover没有这个功能,需要手动阻止事件的传播

© 著作权归作者所有

粉丝 1
博文 32
码字总数 24934
作品 0
海淀
程序员
私信 提问
JEPLUS平台添加JS事件的方式——JEPLUS软件快速开发平台

JEPLUS平台添加JS事件的方式 很多用户在使用平台的过程中有时候会涉及到比较复杂的功能,这些功能利用平台的配置有时候不能实现,这时候可能就需要来编写一些JS事件来完成功能需求的编写,可...

JEPLUS
2018/06/27
0
0
Javascript是单线程的深入分析

面试的时候发现99%的童鞋不理解为什么JavaScript是单线程的却能让AJAX异步发送和回调请求,还有setTimeout也看起来像是多线程的?还有non-blocking IO, event loop等概念很不清楚。来深入分析...

stone_
2014/04/15
0
0
前端基础-JavaScript

开发工具与关键技术:DW/浏览器 ;简单使用js。 作者:刘佳明 撰写时间:2019年1月 18 日 前面已经随手写过了关于网页编辑的一些基础布局和标签的认识;这篇文章在这里为大家简单的介绍一下关...

没有,
01/18
0
0
JS异步编程之callback

为什么 JS 是单线程? 众所周知,Javascript 语言的执行环境是"单线程"(single thread)。 所谓"单线程",就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执...

南波
02/17
0
0
JEPLUS平台JS事件的操作技巧——JEPLUS软件快速开发平台

JEPLUS平台JS事件的操作技巧 JEPLUS平台使用的是EXTJS4,很多时候一些客户不清楚平台JS事件的API怎么调用,以及JS事件API都有哪些,所以今天这个笔记就简单介绍一些JEPLUS平台JS事件的一些操...

JEPLUS
2018/06/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Angular 英雄编辑器

应用程序现在有了基本的标题。 接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。 创建英雄组件 使用 Angular CLI 创建一个名为 heroes 的新组件。 ng gener...

honeymoose
今天
5
0
Kernel DMA

为什么会有DMA(直接内存访问)?我们知道通常情况下,内存数据跟外设之间的通信是通过cpu来传递的。cpu运行io指令将数据从内存拷贝到外设的io端口,或者从外设的io端口拷贝到内存。由于外设...

yepanl
今天
6
0
hive

一、hive的定义: Hive是一个SQL解析引擎,将SQL语句转译成MR Job,然后再在Hadoop平台上运行,达到快速开发的目的 Hive中的表是纯逻辑表,就只是表的定义,即表的元数据。本质就是Hadoop的目...

霉男纸
今天
5
0
二、Spring Cloud—Eureka(Greenwich.SR1)

注:本系列文章所用工具及版本如下:开发工具(IDEA 2018.3.5),Spring Boot(2.1.3.RELEASE),Spring Cloud(Greenwich.SR1),Maven(3.6.0),JDK(1.8) Eureka: Eureka是Netflix开发...

倪伟伟
昨天
17
0
eclipse常用插件

amaterasUML https://takezoe.github.io/amateras-update-site/ https://github.com/takezoe/amateras-modeler modelGoon https://www.cnblogs.com/aademeng/articles/6890266.html......

大头鬼_yc
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部