转行学开发，代码100天——2018-05-02

1.事件对象

JavaScript中事件对象通常用定义变量ev或event表示。为了兼顾浏览器兼容问题，定义事件对象为

var oEvent = ev||event;

2.鼠标事件

鼠标事件通常有获取鼠标点击位置clientX;clientY

鼠标移动事件：onmousemove;

鼠标点击事件：onmousedown;

鼠标抬起事件：onmouseup;

如设置一个鼠标跟随程序：

物体跟随鼠标移动。

<!DOCTYPE html>

<html>

<head>

    <title>javascript 鼠标事件</title>

    <style type="text/css">

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

    </style>

    <script type="text/javascript">

        document.onmousemove = function(ev)

        {

            var oEvent = ev||event;

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

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

            oDiv.style.left = oEvent.clientX+"px";

            oDiv.style.top = oEvent.clientY+scrollTop+"px";

        }

    </script>

</head>

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

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

</body>

</html>

注意：在使用clientX和clientY时一定要结合scrollLeft和scrollTop一起使用。

在这里可以试着去封装一个获取鼠标坐标的函数。

//鼠标坐标值获取

function getPos(ev)

{

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

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

    return {

        x:ev.clientX+scrollLeft,

        y:ev.clientY+scrollTop

    };

}

3.事件冒泡

事件冒泡通常会影响网页运行效果，一般需要设置阻止事件冒泡的发生。

如一个模仿select按钮的效果，通过点击按钮，弹出内容框；点击视图中其他区域，内容框消失。

其代码如下：

<!DOCTYPE html>

<html>

<head>

    <title>仿select效果</title>

    <style type="text/css">

        #div1{width: 200px; height: 200px;background: #ccc;display: none;}

    </style>

    <script type="text/javascript">

        window.onload = function()

        {

            var btn1 = document.getElementById("btn1");

            var div1 = document.getElementById("div1");

            btn1.onclick = function(ev)

            {

                var oEvent = ev||event;

                div1.style.display = "block";

                alert("按钮被点击了");

                oEvent.cancelBubble = true;

            }

            document.onclick = function()

            {

                div1.style.display = "none";

                alert("document被点击了");

            }

        }

    </script>

</head>

<body>

<input id="btn1" type="button" value="显示" >

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

</body>

</html>

可以看到，代码中对按钮添加了阻止冒泡的功能，oEvent.cancelBubble = true;

否则在点击显示按钮后，先后弹出

"按钮被点击了"
"document被点击了"
但实际上内容灰色框并不会显示。

所以在事件的使用中至少需要注意以下问题：

1）兼容性问题
2）事件冒泡问题

												


											
day47—JavaScript事件基础应用的更多相关文章
	

    
								
  1. JavaScript事件基础-10-2.HTML事件;  DOM0级事件;  掌握常用的鼠标与键盘事件 ;   掌握this的指向;
		
    JavaScript事件基础 学习目标 1.掌握什么是事件 2.掌握HTML事件 3.掌握DOM0级事件 4.掌握常用的鼠标与键盘事件 5.掌握this的指向 什么是事件 事件就是文档或浏览器窗口中发 ...
    
		
    2. 
						
  2. JavaScript事件基础知识总结【思维导图】
		
    另外附上来自Nicholas C.Zakas<JavaScript高级程序设计 第3版>中的跨浏览器兼容EventUtil对象. var EventUtil = { //注册事件 addH ...
    
		
    3. 
						
  3. javascript 事件基础
		
    一:事件流 事件流描述的是从页面中接收事件的顺序.  事件冒泡 <div id="one"> <div id="two"> <di ...
    
		
    4. 
						
  4. 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）
		
    前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...
    
		
    5. 
						
  5. JAVASCRIPT事件详解-------原生事件基础....
		
    javaScirpt事件详解-原生事件基础(一)   事件 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,通过监听特定事件的发生,你能 ...
    
		
    6. 
						
  6. JS基础知识：Javascript事件触发列表
		
    Javascript是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言. JavaScript使我们有能 ...
    
		
    7. 
						
  7. JavaScript RegExp 基础详谈
		
    前言: 正则对于一个码农来说是最基础的了,而且在博客园中,发表关于讲解正则表达式的技术文章,更是数不胜数,各有各的优点,但是就是这种很基础的东西,如果我们不去真正仔细研究.学习.掌握,而是抱着需要的时 ...
    
		
    8. 
						
  8. JavaScript事件详解-Zepto的事件实现（二）【新增fastclick阅读笔记】
		
    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...
    
		
    9. 
						
  9. 解析Javascript事件冒泡机制
		
    本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 【ES6】对象的新功能与解构赋值
			
    ES6 通过字面量语法扩展.新增方法.改进原型等多种方式加强对象的使用,并通过解构简化对象的数据提取过程. 一.字面量语法扩展 在 ES6 模式下使用字面量创建对象更加简洁,对于对象属性来说,属性初始 ...
    
			
    2. 
						
  2. springmvc,springboot单元测试配置
			
    1. springmvc单元测试配置 <dependency> <groupId>junit</groupId> <artifactId>junit&l ...
    
			
    3. 
						
  3. 前端开发HTML&css入门——一些其他常用的文本标签
			
    em标签和strong标签 i标签和b标签 small标签 cite标签 q标签和blockquote标签 em主要表示语气上的强调,em在浏览器中默认使用斜体显示strong表示强调的内容,比em更 ...
    
			
    4. 
						
  4. Nginx 服务器配置
			
    include:实现对配置文件所包含的文件设定 default_type:默认类型二进制流,当文件类型未定义使用这种方式,用浏览器访问 PHP 文件会出现 下载窗口 log_format:指定日志输出 ...
    
			
    5. 
						
  5. go语言学习——变量、常量、循环、条件、switch、数组和切片
			
    1.变量 package main import "fmt" func main() { 个或者多个变量. var a string = "initial" f ...
    
			
    6. 
						
  6. Git之仓库管理
			
    介绍以及安装: Git 是一个开源的分布式版本控制软件,用以有效.高速的处理从很小到非常大的项目版本管理. Git 最初是由Linus Torvalds设计开发的,用于管理Linux内核开发.Git  ...
    
			
    7. 
						
  7. Python----公开课
			
    # 构造函数- 类在实例化的时候,执行一些基础性的初始化的工作- 使用特殊的名称和写法- 在实例化的时候自动执行- 是在实例化的时候第一个被执行的函数- ----------------------- ...
    
			
    8. 
						
  8. SpringCloud学习系列-Eureka服务注册与发现(3)
			
    修改microservicecloud-provider-dept-8001 1.修改pom 增加内容 <!-- 将微服务provider侧注册进eureka --> <depend ...
    
			
    9. 
						
  9. 【leetcode】1144. Decrease Elements To Make Array Zigzag
			
    题目如下: Given an array nums of integers, a move consists of choosing any element and decreasing it by  ...
    
			
    10. 
						
  10. 在mac上安装rabbitmq
			
    在 OS X 上安装 RabbitMQ¶ 在 Snow Leopard 上安装 RabbitMQ 最简单的方式就是 Homebrew ——OS X 上的一款新颖别致,光彩动人的包管理系统. 在本例中, ...
    
			
    11.