Event事件：

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>无标题文档</title>

 <script>

 /*

 event : 事件对象 , 当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象，供我们在需要的调用。飞机-黑匣子

 事件对象必须在一个事件调用的函数里面使用才有内容，否则值为unidentified;

 事件函数：事件调用的函数，一个函数是不是事件函数，不在定义的决定，而是取决于这个调用的时候

 兼容

 ie/chrome : event是一个内置全局对象

 标准下 : 事件对象是通过事件函数的第一个参数传入,如 function(ev,a,b,c){};

 如果一个函数是被事件调用的那么，这个函数定义的第一个参数就是事件对象



 clientX[Y] : 当一个事件发生的时候，鼠标到页面可视区的距离

 */

 //alert( event );    //这里没有事件

 /*document.onclick = function() {

     alert(event);

 };*/

 function fn1(ev) {

     //alert( event );

     //alert( ev );

     var ev = ev || event; //兼容标准浏览器与非标准浏览器

     //alert(ev);

     /*for ( var attr in ev ) {

         console.log( attr + ' = ' + ev[attr] );

     }*/

     alert(ev.clientX);

 }

 //fn1();    //不是事件调用的函数，纯粹是函数调用，此时值为unidentified   x

 document.onclick = fn1;    //是事件调用的函数，所以event有内容         √

 </script>

 </head>

 <body>

 </body>

 </html>

Event事件实例：（跟随鼠标移动的div）

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>无标题文档</title>

 <style>

 #div1 {width: 100px; height:100px; background: red; position: absolute;}

 </style>

 <script>

 window.onload = function() {

     //onmousemove : 当鼠标在一个元素上面移动的触发

     //触发频率不是像素，而是间隔时间，在一个指定时间内（很短），如果鼠标的位置和上一次的位置发生了变化，那么就会触发一次

     //var i = 0;

     var oDiv = document.getElementById('div1');

     document.onmousemove = function(ev) {

         //document.title = i++;

         var ev = ev || event;

         var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

         oDiv.style.left = ev.clientX + 'px';

         oDiv.style.top = ev.clientY + scrollTop + 'px';//跟随鼠标在可视区，缺少scroll到顶部的距离，如下图示。

     }

 }

 </script>

 </head>

 <body style="height: 2000px;">

     <div id="div1"></div>

 </body>

 </html>

Javascript 事件对象（二）event事件的更多相关文章

  1. javaScript事件（二）事件处理程序

    一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应 ...

  2. 第一百七十节，jQuery，事件对象，event 对象，默认行为，冒泡

    jQuery,事件对象,event 对象,默认行为,冒泡 学习要点: 1.事件对象 2.冒泡和默认行为 JavaScript 在事件处理函数中默认传递了 event 对象,也就是事件对象.但由于浏览器 ...

  3. 简单总结焦点事件、Event事件对象、冒泡事件

    每学习一些新的东西,要学会复习,总结和记录. 今天来简单总结一下学到的几个事件:焦点事件.Event事件对象.冒泡事件 其实这几个事件应该往深的说是挺难的,但今天主要是以一个小菜的角度去尝试理解一些基 ...

  4. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

  5. javascript 事件对象（event 对象）

    原文: http://www.cnblogs.com/songyaqi/p/5204143.html <html> <head> <title> Track Mou ...

  6. JavaScript的事件对象_键盘事件

    用户在使用键盘时会触发键盘事件.“DOM2 级事件”最初规定了键盘事件,结果又删除了相应的内容.最终还是使用最初的键盘事件,不过 IE9 已经率先支持“DOM3”级键盘事件. 一.键码 在发生 key ...

  7. JavaScript的事件对象_滚轮事件

    用户在使用键盘时会触发键盘事件.“DOM2 级事件”最初规定了键盘事件,结果又删除了相应的内容.最终还是使用最初的键盘事件,不过 IE9 已经率先支持“DOM3”级键盘事件. 一.键码 在发生 key ...

  8. JavaScript（十二）事件

    Dom事件 1.DOM0级事件 on事件 只能 监听冒泡阶段 切只能绑定一个事件 dom.onclick = function(){}; 2.Dom2级事件 可以绑定多次事件    可以通过设置fla ...

  9. JavaScript 运行机制：Event事件循环机制

    JavaScript Event事件循环机制 JS是单线程的,浏览器只分配一个主线程给JS.一次只能执行一个任务,当前任务执行完后在可以执行下一个任务.任务多时,就会形成任务队列排队等待执行.但是非常 ...

  10. day03—JavaScript中DOM的Event事件方法

    转行学开发,代码100天——2018-03-19 1.Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用, ...

随机推荐

  1. AES对称加密和解密

    package demo.security; import java.io.IOException; import java.io.UnsupportedEncodingException; impo ...

  2. IPV6

    (一) iOS 9.0.OS X 10.11 以上的系统 在IPv6的环境下 是支持IP地址访问网络的.所以大家测试机如果是 iOS9.0以上的系统,可以直接通过IP访问.这是因为iOS 9.0之后  ...

  3. Java开发中经典的小实例-（打印九九乘法表）

    public class Test16 {    public static void main(String[] args) {        // TODO Auto-generated meth ...

  4. 深入浅出设计模式——外观模式（Facade Pattern）

    模式动机引入外观角色之后,用户只需要直接与外观角色交互,用户与子系统之间的复杂关系由外观角色来实现,从而降低了系统的耦合度. 模式定义外观模式(Facade Pattern):外部与一个子系统的通信必 ...

  5. linux top命令

    top命令参数 -h:help表示显示帮助的意思 -v:version显示版本的意思,和-h的功能一样 -u:user显示指定用户的进程,例如:top -u root -p:pid显示指定进程,例如: ...

  6. Oracle数据库字段类型说明

    目前Oracle 数据库大概有26个字段类型,大体分为六类,分别是字符串类型.数字数据类型.日期时间数据类型.大型对象(LOB)数据类型.RAW和LONG RAW数据类型.ROWID和UROWID数据 ...

  7. STM32学习笔记(六) SysTick系统时钟滴答实验(stm32中断入门)

    系统时钟滴答实验很不难,我就在面简单说下,但其中涉及到了STM32最复杂也是以后用途最广的外设-NVIC,如果说RCC是实时性所必须考虑的部分,那么NVIC就是stm32功能性实现的基础,NVIC的难 ...

  8. leetcode-188 买卖股票4

    题目 给定一个数组表示股票每天的价格,最多交易k次,且手上最多只能拥有一支股票(即只能先卖出手上现有的股票再去购买新的股票),求最大的收益.     题目链接:买卖股票4     开始思路不清楚,参考 ...

  9. 利用jsoup进行模拟登录

    因为工作的原因,近段时间开始接触jsoup.大概也弄清了用java来爬网页是怎样一个过程.特此,写篇日志以便他日方便查看. Jsoup是一个java平台的能够对xml文档结构的文档进行解析.有点类似于 ...

  10. css学习笔记 1

    对于一个页面,如何控制页面的结构就看如何去理解css的各个属性了,只有了解了css的各个属性后才能更有效的让css控制页面的任何一个结构. css的结构:选择符:{属性名1:属性值; 属性名2:属性值 ...