每学习一些新的东西,要学会复习,总结和记录。

今天来简单总结一下学到的几个事件:焦点事件、Event事件对象、冒泡事件

其实这几个事件应该往深的说是挺难的,但今天主要是以一个小菜的角度去尝试理解一些基本的知识点。

1.焦点事件:

  1.1概念理解:

  想象场景:当一堆text文本框出现在面前,当点击其中一个文本框,它就会响应用户,并出现光标闪动(这时,点击令它获得焦点)。

  所以说:焦点事件是用来让浏览器区分哪一个对象是用户要进行操作(输入值、选择、跳转)的。

  总结===》  浏览器(区分)哪一个对象(是)用户(要) 操作(的)

  回到场景来说,就是出现光标那个,它被点击后,与其他文本框不一样,提示用户此文本框是可以操作(输入)的!

 

  1.2设置方式:   

    点击设置、Tab键切换、JS来设置

     (注意:不是所有元素都能接受焦点的:DIV、P等就不能,只有能够响应用户的才可以设置焦点)

  1.3.焦点事件()

         Obj.onfocus = function ( ){  };:当元素获取时触发事件

Obj.onblur = function( ){  }  :当元素失去焦点时触发

  1.4.焦点方法

    Obj.onfocus();  给指定元素设置焦点

Obj.onblur ();  给指定元素失去焦点

Obj.select();  选择指定元素里面的文本内容

2.Event 事件:

  在理解冒泡事件和捕获事件前,先来理解一下什么叫做 Event 事件。

  2.1概念:

    Event:事件对象(事件发生的状态)

    想象场景:当用鼠标点击一个按钮时,当前点击按钮的(激活状态、鼠标的位置)等信息,都是点击事件的事件对象

    也就是说:事件对象是指 当一个事件发生时,当前对象 发生这个事件 有关信息

   

  2.2兼容性:

    event具有兼容性问题。 

    标准下:IE/chrome里event是一个内置全局对象 ,也就是已经进行定义了   var event

    非标准下:FF中的事件对象,是通过事件函数的第一个事件参数传入的

    兼容性处理:

 function fn1(ev){
var ev=ev || event;
alert(ev);
} document.onclick = fn1; //通过点击调用事件

    注意:事件对象必须在一个事件调用下才生成事件函数,也就是说,不能够fn1();这样直接调用,要通过 obj.onclikc = fn1;这种类型的调用方法。

3.冒泡事件:

  3.1概念:

    当一个元素接收到一个事件时,会将这个事件传给它的父级,直到最顶层window

 <div id="div1">
<div id="div2">
<div id="div3"></div> //已经为div3设置了绝对定位到div1和div2外面
</div> <script>
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
function fn1(){
alert(this.id);
}
oDiv1.onclick = fn1; //点击div1会同时触发div2、3的onclck事件(冒泡)
oDiv2.onclick = fn1;
oDiv3.onclick = fn1;
</script>

  3.2冒泡事件的阻止:

    event.cancleBubble = true;  //阻止当前对象的当前事件的冒泡

 function fn1(){
alert(this.id);
event.cancleBubble = true;
}

  3.3冒泡事件的简单应用:

     冒泡效应会将对象当前发生的事件传递传递到父级,这乍一看让人感觉非常不好,但总的来说, 冒泡还是利大于弊的。接下来讨论一个有关利方面的例子。

     应用例子:如下图,鼠标滑动到分享到时,紫色Div会出来;离开紫色div或者分享到div时,紫色div消失。

     思路:学习了冒泡我们知道,具有事件传递的效果,当我们鼠标滑动到”分享到“时,自动就有一个onmouserover事件发生了(鼠标事件),这时这个事件会传递到他的父级,因此我们只要去设置父级的onmouseover事件就可以了,分别是鼠标移入left为0px;移出left=-100px;

     

   <div id="div1">
<div id="div2">分享到</div>
</div>
<script>
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2'); //根据事件冒泡机制,oDiv2.onmouseover是发生的只是没有写出来,
//因此会触发父级的onmouseover事件,即使没有碰到父级,也可以通过div2的事件传给父级元素
oDiv1.onmouseover = function(){
oDiv1.style.left = 0+'px';
};
oDiv1.onmouseout = function(){
oDiv1.style.left = -100+'px';
};

简单总结焦点事件、Event事件对象、冒泡事件的更多相关文章

  1. XAML实例教程系列 - 事件(Event) 五

    Kevin Fan分享开发经验,记录开发点滴 XAML实例教程系列 - 事件(Event) 2012-06-19 01:36 by jv9, 1727 阅读, 7 评论, 收藏, 编辑 Events, ...

  2. C#中的委托(Delegate)和事件(Event)

    原文地址:C#中的委托(Delegate)和事件(Event) 作者:jiyuan51 把C#中的委托(Delegate)和事件(Event)放到现在讲是有目的的:给下次写的设计模式--观察者(Obs ...

  3. 前端基本知识(一):W3C标准&&冒泡事件,捕获事件,W3C DOM对象模型,对比分析

    W3C标准是万维网联盟, 其他的可以参考万维网版本的更新内容 一.W3C标准 二.W3C DOM事件 三.冒泡事件 四.捕获事件 一.W3C标准 其实网页是由三分部组成:1.结构(structure) ...

  4. javaScript事件机制深入学习(事件冒泡,事件捕获,事件绑定方式,移除事件方式,阻止浏览器默认行为,事件委托,模拟浏览器事件,自定义事件)

    前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...

  5. (转)C#中的委托(Delegate)和事件(Event)

    转自:http://blog.chinaunix.net/uid-576762-id-2733751.html   把C#中的委托(Delegate)和事件(Event)放到现在讲是有目的的:给下次写 ...

  6. C# 事件 event 【转】

    C#事件(event)解析   事件(event),这个词儿对于初学者来说,往往总是显得有些神秘,不易弄懂.而这些东西却往往又是编程中常用且非常重要的东西.大家都知道windows消息处理机制的重要, ...

  7. WPF 路由事件 Event Routing

    原文:WPF 路由事件 Event Routing 1.路由事件介绍 之前介绍了WPF的新的依赖属性系统,本篇将介绍更高级的路由事件,替换了之前的.net普通事件.相比.net的事件,路由事件具有更强 ...

  8. 事件EVENT与waitforsingleobject的使用

    事件event与waitforsingleobject的配合使用,能够解决很多同步问题,也可以在数据达到某个状态时启动另一个线程的执行,如报警. event的几个函数: 1.CreateEvent和O ...

  9. 经典线程同步 事件Event

    阅读本篇之前推荐阅读以下姊妹篇: <秒杀多线程第四篇 一个经典的多线程同步问题> <秒杀多线程第五篇 经典线程同步关键段CS> 上一篇中使用关键段来解决经典的多线程同步互斥问题 ...

  10. 多线程面试题系列(6):经典线程同步 事件Event

    上一篇中使用关键段来解决经典的多线程同步互斥问题,由于关键段的"线程所有权"特性所以关键段只能用于线程的互斥而不能用于同步.本篇介绍用事件Event来尝试解决这个线程同步问题.首先 ...

随机推荐

  1. index rang scan

    根:分支的范围,范围块的地址 ----- begin tree dump branch: 0x1000c93 16780435 (0: nrow: 5, level: 1)    leaf: 0x10 ...

  2. yum命令常见方法

    yum check-update 检查可更新的所有软件包 yum update 下载更新系统已安装的所有软件包 yum upgrade 大规模的版本升级,与yum update不同的是,连旧的淘汰的包 ...

  3. UDP 收/发 广播包

    网络通信基础 如果网络中两个主机上的应用程序要相互通信,其一要知道彼此的IP,其二要知道程序可监听的端口.因为同一主机上的程序使用网络是通过端口号来区分的. UDP Socket的使用过程: 1. 初 ...

  4. 数学概念——G 最大公约数

    G - 数论,最大公约数 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit ...

  5. UVAlive3415 Guardian of Decency(最大独立集)

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=34831 [思路] 二分图的最大独立集. 即在二分图中选取最多的点, ...

  6. Prime Ring Problem(搜索)

    http://acm.hdu.edu.cn/showproblem.php?pid=1016 / 题意; 给你一个数n ,求出所有的排列 这些排列的特征是任意相邻的两数只和是素数,而且首位只和也是素数 ...

  7. [Locked] Largest BST Subtree

    Largest BST Subtree Given a binary tree, find the largest subtree which is a Binary Search Tree (BST ...

  8. [Java] JavaMail 发送 html 格式、带附件的邮件

    本案例演示发送 html 格式,可带附件的邮件发送.发送纯文本邮件的例子可参照上一篇博文JavaMail 简单案例. EmailHelper, Email 的帮助类,向帮助类提供 SMTP 服务器域名 ...

  9. linux运维社区站点收集

    1, 新世纪linux社区 offical locator: http://www.21ops.com/industry-news/24370.html 2,

  10. Java中对象的深复制和浅复制详解

    1.浅复制与深复制概念 ⑴浅复制(浅克隆) 被复制对象的所有变量都含有与原来的对象相同的值,而所有的对其他对象的引用仍然指向原来的对象.换言之,浅复制仅仅复制所考虑的对象,而不复制它所引用的对象. ⑵ ...