首先提到event，先要明白event的产生，也要先明白焦点，什么是焦点。焦点 : 使浏览器能够区分用户输入的对象，当一个元素有焦点的时候，那么他就可以接收用户的输入。

我们可以通过一些方式给元素设置焦点。而并不是所有元素都能够接收焦点的，能够响应用户操作的元素才有焦点。例如：

<input type="text" />   <a href="http://www.baidu.com">百度</a>

　　说到input，平时用的较多的是onfocus : 当元素获取到焦点的时候触发，onblur : 当元素失去焦点的时候触发。当然还有是不常用：obj.select() -选择指定元素里面的文本内容。

　　

//点击btn时，选中text中的内容

oBtn.onclick = function() {

    oText.select();

}

　　接下来才是event : 事件对象 , 当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象，供我们在需要的调用。而刚刚说的，event会保存相关信息，比如说用来鼠标位置、键盘按键。Event对象的兼容：ev = ev || window.event。而接踵而来的就有clientX[Y] ，它是--当一个事件发生的时候，鼠标到页面可视区的距离。我们可以通过一段代码查看event对象中的属性。

function fn1(ev) {

    var ev = ev || event;

    for ( var attr in ev ) {

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

    }

}

document.onclick = fn1;

　

　event对象的所有相关属性，都会打印在控制台上。

　　而由event延伸出来的一个小Demo，就是可以随鼠标任意移动的div。

　　详见：随鼠标任意移动的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 = ;

    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';

    }

}

</script>

</head>

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

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

</body>

</html>

　　

提到事件，一定会想到事件冒泡 : 当一个元素接收到事件的时候，会把他接收到的所有传播给他的父级，一直到顶层window.事件冒泡机制。而阻止冒泡 : 当前要阻止冒泡的事件函数中调用 event.cancelBubble = true; 比较简单一个就是模拟的下拉列表。

<!DOCTYPE HTML>

<html>

<head>

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

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

<style>

#div1 {width:100px; height:200px; border: 1px solid red; display: none;}

</style>

<script>

window.onload = function() {

    var oBtn = document.getElementById('btn');

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

    oBtn.onclick = function(ev) {

        var ev = ev || event;

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

        oDiv.style.display = 'block';

    }

    document.onclick = function() {

        oDiv.style.display = 'none';

    }

}

</script>

</head>

<body>

    <input type="button" value="按钮" id="btn" />

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

</body>

</html>

　　　　　　　　

　　

Event事件详解的更多相关文章

  1. JavaScript——event事件详解

    1.事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时候,我们给这个元 ...

  2. JavaScript事件详解-jQuery的事件实现（三）

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  3. JavaScript事件详解-Zepto的事件实现（二）【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  4. JavaScript事件详解-zepto的事件实现

    zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们 ...

  5. JS中的event 对象详解

    JS中的event 对象详解   JS的event对象 Event属性和方法:1. type:事件的类型,如onlick中的click:2. srcElement/target:事件源,就是发生事件的 ...

  6. JAVASCRIPT事件详解-------原生事件基础....

    javaScirpt事件详解-原生事件基础(一)   事件 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,通过监听特定事件的发生,你能 ...

  7. (转)javascript中event对象详解

    原文:http://jiajiale.iteye.com/blog/195906 javascript中event对象详解          博客分类: javaScript JavaScriptCS ...

  8. iOS中—触摸事件详解及使用

    iOS中--触摸事件详解及使用 (一)初识 要想学好触摸事件,这第一部分的基础理论是必须要学会的,希望大家可以耐心看完. 1.基本概念: 触摸事件 是iOS事件中的一种事件类型,在iOS中按照事件划分 ...

  9. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

随机推荐

  1. 1018. Public Bike Management (30)

    时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue There is a public bike service i ...

  2. shell自定义函数

    Linux中提供了很多内置的函数,但有时我们需要根据自己的需求来创建自定义函数.下面介绍一下关于shell编程中的自定义函数. 1.函数定义 function hello(){    echo &qu ...

  3. 【postgresql】创建自增SEQUENCE

    CREATE SEQUENCE circlefence_id_seq START WITH 1 INCREMENT BY 1 NO MINVALUE NO MAXVALUE CACHE 1; alte ...

  4. eclipse里maven项目An error occurred while filtering resources解决办法（转载）

    转自:http://liyanjie918.blog.163.com/blog/static/20227290201581143110105/ 在使用eclipse构建maven项目时,突然出现错误提 ...

  5. EXTJS 4.2 资料 控件之Window窗体添加html

    //这里要跳转页面 var subWindow = new Ext.Window({ title: '窗口', width: width, height: height, modal: true,// ...

  6. 【BZOJ1468】Tree

    Description 给你一棵TREE,以及这棵树上边的距离.问有多少对点它们两者间的距离小于等于K Input N(n<=40000) 接下来n-1行边描述管道,按照题目中写的输入 接下来是 ...

  7. Binary search for the first element greater than target

    We all know how to search through an array for an element whose value equals the target value, but h ...

  8. PHP5 session 详解

    http协议是WEB服务器与客户端(浏览器)相互通信的协议,它是一种无状态协议.所谓无状态,指的是不会维护http请求数据,http请求是独立的,非持久的.而越来越复杂的WEB应用,需要保存一些用户状 ...

  9. jquery类选择器无法取得对象问题原因

    <html> <script type="text/javascript" src="jquery-1.9.1.js"></scr ...

  10. hdu 1907 John

    很简单的博弈论问题!!(注意全是1时是特殊情况) 代码如下: #include<stdio.h> #include<iostream> using namespace std; ...