2016年5月27日上午(妙味课堂js基础-3笔记一(事件))

一、event事件

  1、什么是event事件对象?

      用来获取事件的详细信息:鼠标位置、键盘按键

        ——例子:获取鼠标位置:clientX

        ——document的本质:document.childNodes[0].tagName

  (1)首先对于点击事件,如果我们想要在页面打开后,在页面的任何一个地方点击都会弹出来一个框,那我们应该怎么做呢?

<script type="text/javascript">
        window.onload=function () {
            document.body.onclick=function () {
                alert("a");
            };
        }
    </script>
</head>
<body style="border:1px solid red;">
</body>

  当是上面这个代码的时候我们发现body缩成一小条在页面最上方只有点击最上方的时候才会弹出框,(一般情况下body撑不起来)那我们怎么办呢,是哪里出了问题呢?现在我们接着来看:

  <script type="text/javascript">
        window.onload=function () {
            document.onclick=function () {
                alert("a");
            };
        }
    </script>
</head>
<body style="border:1px solid red;">
</body>

  现在我们直接来给document加事件,那么就可以实现无论点击哪里都会有反应;那么现在问题又来了,document到底是什么呢?那我们现在就来探究一下咯:

  a、document就是网页;(对,没错)

  b、document就是节点;引用一下(childNode)返回一个元素的子节点;

<script type="text/javascript">
        alert(document.childNodes[1].tagName);    //HTML
    </script>

  在视频上显示的是childNodes[0]显示的是“!”,而在childNodes[1]显示的是HTML,因此可以把document堪称是最顶层的虚拟的父节点。

  2、事件对象(获取鼠标位置)

  (1)下面就是一个事件对象的写法:(点击页面然后执行一个函数;)

<script type="text/javascript">
        document.onclick=function () {
            alert(event.clientX);
        }
    </script>

  其实上面的event就是一个事件对象,它里面包含了事件的各种信息;其中clientX就是其中一个;

<script type="text/javascript">
        document.onclick=function () {
            alert(event.clientX+","+event.clientY);    //在火狐下不弹出来,出现错误!
        }
    </script>

  在火狐下事件处理函数则需要添加参数;

<script type="text/javascript">
        document.onclick=function (ev) {
            alert(ev.clientX+","+ev.clientY);      //ev在IE下为undefined,但是在火狐下面则是一个鼠标事件对象;
        }
    </script>

  而这个代码在IE下面确显示不出来:因此需要处理兼容性;

<script type="text/javascript">
        document.onclick=function (ev) {
            if(ev){
                alert(ev.clientX+","+ev.clientY);
            }
            else {
                alert(event.clientX+","+event.clientY);
            }
        }
    </script>

  但是这个在我的电脑上的IE上面还是显示不出来?什么原因呢?

  注意:因为这个时间对象用的次数太多了,如果我们每次用的时候都要这么写的话那就太麻烦了,那怎么办呢?接下来我们继续来看:

   获取event对象(兼容性写法):

      ——var oEvent=ev||event;

  (2)或

<script type="text/javascript">
        var a=12||‘abc‘;      //12
        alert(a);
    </script>

  这样的话那我们上面的鼠标点击显示位置事件就可以用这种方式来简化代码了......

<script type="text/javascript">
        document.onclick=function (ev) {
            var oEvent=ev||event;
                alert(oEvent.clientX+","+oEvent.clientY);
            }
    </script>

  3、事件流

     (1)事件冒泡

        取消冒泡:oEvent.cancelBubble=true

        例子:仿select控件

        DOM事件流

  

  

    

  

时间: 2024-10-10 16:40:30

2016年5月27日上午(妙味课堂js基础-3笔记一(事件))的相关文章

2016年5月27日下午(妙味课堂js基础-3笔记三(事件))

一.默认行为 1. 什么是事件的默认行为(默认事件) (1)浏览器不需要我们去编写,浏览器自身就已经具备的功能:(点击右键弹出页面菜单) (2)如何阻止默认行为 2. 上下文菜单:oncontextmenu(右键菜单) <script type="text/javascript"> document.oncontextmenu=function () { alert("a") }; </script> 点击右键就会弹出a,且会出现右键菜单:

2016年5月27日下午(妙味课堂js基础-3笔记二(事件))

一.鼠标事件 1.鼠标位置 可视区位置:clientX.clientY(鼠标的坐标) 这里我们注意,现在我们只知道它是鼠标的坐标,但是我们不知道它是鼠标的什么坐标,现在我们来看一个实例: ——例子1:跟随鼠标的Div (1)onmousemove 事件会在鼠标指针移动时发生. 注释:每当用户把鼠标移动一个像素,就会发生一个 mousemove 事件.这会耗费系统资源去处理所有这些 mousemove 事件.因此请审慎地使用该事件. <head> <style type="tex

妙味课堂——JavaScript基础课程笔记

集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热身课程 写JS的步骤 先实现布局 想出实现原理 了解JS语法 希望把某个元素移除的实现 display: none; 显示为无 visibility: hidden; 隐藏 width \ height 透明度 left \ top 拿与背景色相同的div盖住该元素 利用margin值 …… 获取元

全国身份证前6位地区编码归属地(2016年06月27日)共6724条

简介: 前段时间在忙单位的一个小系统,用来管理从业人员的电子档案,最核心.复杂的功能已经完成,现在基本告一段落.用户可上传已扫描或拍照的档案图片,然后选择一个(已导入数据库)的从业人员信息,将扫描件与数据库信息对应,便于日后查询,也减轻了档案室的日常工作量.现在单位已经有一个成熟的系统用来管理从业人员信息,但只有一个档案编号,无法查询纸质档案信息,经常查档案就找档案室,太繁琐.带来各种麻烦.而从业人员涉及到的信息字段比较多,好在原系统可以导出数据库信息,我直接导入新系统就可以用了.省的操作员在录

4月27日上午学习日志

2017年4月27日上午把昨天记忆的英语单词的多种词意用自己组句的方法联系起来再记忆一遍,然后再学10个考研高频词汇,完成英语app的打卡.

2016年4月27日作业

1.写全文:论信息系统项目的范围管理 2.写架构:论项目的计划与监控:论项目的进度管理. 论信息系统项目的范围管理 摘要 2014年年底,x市全面启动公安基础信息化建设工作.视频监控建设作为基础信息化建设的重要组成部分,被正式纳入建设日程.我作为公司项目经理,全程参与项目的建设工作.本项目一期(2015年度)投资1.3亿,主要是安装2123个全高清摄像机,搭建11个视频监控管理平台,建设10个视频监控专用机房,解决"三区三口"等重要公共安全区域视频监控看得见.看得清.能发现.可追踪的问

2016年3月27日_JAVA学习笔记

1.前一天晚上开通了博客,今天是第一天写博客,或者说是日记吧. 右手的骨折还没完全康复,也还不知道要多久.现在仍然是左手用鼠标,而且无名指明显也不会打字了.毕竟已经3个月没有怎么用过了,所以完全恢复应该还需要一段时间吧. 2.JAVA中存在有嵌套类的情况,所谓嵌套类就是在一个类中还存在着一个类,这个类以成员变量的形式存在.在毕老师的视频中介绍了几种内部类的调用方法. //外部.内部.方法为非静态, //外部.内部 n = new 外部().new 内部(); //n.show(); //外部和方

2016年4月27日_JAVA学习笔记_JAVA中常见的API(一)String

1.String在JAVA中是一个单独的类,只不过是一种特殊的,专门用来表示字符串的类.之前接触到的创建方式很简单,就是跟C语言中创建变量一样, String aString = "This is a String."; //变量类型为String,变量名为aString,内容为"This is a String.". 在学习API时,接触到了一种特别的创建方式.因为String是一个类,那么就肯定可以用其构造器方法来创建相应的对象. String aString

C++第二天笔记2016年01月27日(周三)P.M

1.  Point(Point p,int r):p(_p){} 对象p  p.print();//代码复用调用Point中的打印函数 2.  对象成员变量,没有显示使用初始化列表做初始化,编译器依旧会自动调用成员变量所属类中的构造函数(默认构造)对对象成员变量进行初始化. 3.  const: const修饰函数时,只能修饰类的成员函数. const成员函数体内 不能修改成员变量的值 const成员函数体内只能调用const成员函数 const对象只能调用const成员函数 4.  析构函数: