Javascript 事件对象（二）event事件
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事件的更多相关文章
- javaScript事件（二）事件处理程序
一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应 ...
- 第一百七十节，jQuery，事件对象，event 对象，默认行为，冒泡
jQuery,事件对象,event 对象,默认行为,冒泡 学习要点: 1.事件对象 2.冒泡和默认行为 JavaScript 在事件处理函数中默认传递了 event 对象,也就是事件对象.但由于浏览器 ...
- 简单总结焦点事件、Event事件对象、冒泡事件
每学习一些新的东西,要学会复习,总结和记录. 今天来简单总结一下学到的几个事件:焦点事件.Event事件对象.冒泡事件 其实这几个事件应该往深的说是挺难的,但今天主要是以一个小菜的角度去尝试理解一些基 ...
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
- javascript 事件对象（event 对象）
原文: http://www.cnblogs.com/songyaqi/p/5204143.html <html> <head> <title> Track Mou ...
- JavaScript的事件对象_键盘事件
用户在使用键盘时会触发键盘事件.“DOM2 级事件”最初规定了键盘事件,结果又删除了相应的内容.最终还是使用最初的键盘事件,不过 IE9 已经率先支持“DOM3”级键盘事件. 一.键码 在发生 key ...
- JavaScript的事件对象_滚轮事件
用户在使用键盘时会触发键盘事件.“DOM2 级事件”最初规定了键盘事件,结果又删除了相应的内容.最终还是使用最初的键盘事件,不过 IE9 已经率先支持“DOM3”级键盘事件. 一.键码 在发生 key ...
- JavaScript（十二）事件
Dom事件 1.DOM0级事件 on事件 只能 监听冒泡阶段 切只能绑定一个事件 dom.onclick = function(){}; 2.Dom2级事件 可以绑定多次事件 可以通过设置fla ...
- JavaScript 运行机制：Event事件循环机制
JavaScript Event事件循环机制 JS是单线程的,浏览器只分配一个主线程给JS.一次只能执行一个任务,当前任务执行完后在可以执行下一个任务.任务多时,就会形成任务队列排队等待执行.但是非常 ...
- day03—JavaScript中DOM的Event事件方法
转行学开发,代码100天——2018-03-19 1.Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用, ...
随机推荐
- MVC中Razor的使用 及路径问题
语法: @ 可以编写一条C#语句@{} 可以编写一组C#语句@: 将文字内容直接输出到页面上去@() 在一句中将一段C#代码包括起来,证明这一句完整的C#代码 引用命名空间:@using 空间名称 H ...
- Hibernate的关联映射——单向1-N关联
Hibernate的关联映射--单向1-N关联 单向1-N关联的持久化类里需要使用集合属性.因为1的一端需要访问N的一端,而N的一端将以集合(Set)形式表现.从这个意义上来看,1-N(实际上还包括N ...
- 赤红血OL
包含海量的PSD文档!!全PSD源文档-446M.你值得拥有! <ignore_js_op> <ignore_js_op> <ignore_js_op> <i ...
- C#编写最小化时隐藏为任务栏图标的 Window appllication.
1.设置WinForm窗体属性showinTask=false 2.加notifyicon控件notifyIcon1,为控件notifyIcon1的属性Icon添加一个icon图标. 3.添加窗体最小 ...
- jdom xml解析
import org.jdom.Document; import org.jdom.Element; import org.jdom.input.SAXBuilder; import org.xml. ...
- UART总线（异步）
UART用一条传输线将数据一位位地顺序传送,以字符为传输单位通信中两个字符间的时间间隔多少是不固定的, 然而在同一个字符中的两个相邻位间的时间间隔是固定的 数据传送速率用波特率来表示, 指单位时间内载 ...
- Android系统架构-----Android的系统体系架构
一.Android的系统体系结构 在入门了一个简单的Android的Hello World以后,我们首先来看一下我们Android的整体系统架构图: 这个就是我们Android的整体系统架构图了,我们 ...
- Android layout_weight的用法
android:layout_weight是指LinearLayout先给里面的控件分配完大小之后剩余空间的权重. 下面通过举例说明: <LinearLayout xmlns:android=& ...
- 三星在GPL下发布其exFAT文件系统实现源码
exFAT文件系统是微软的一个产品,设计让外置储存设备和PC之间实现无缝的TB级数据转移和数据交换,它只支持Windows和OS X,不支持Linux.作为一个含有大量专利的私有产品,没有人会预计它会 ...
- Windows Store App 插值动画
插值动画支持DoubleAnimation.ColorAnimation和PointAnimation类型的动画.其中比较常用的是DoubleAnimation动画,它可以用来控制界面元素的Doubl ...