转行学开发，代码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. web前后端数据交互
			
    前后端数据交互是每一名web程序员必须熟悉的过程,前后端的数据交互重点在于前端是如何获取后端返回的数据,毕竟后端一般情况下只需要将数据封装到一个jsonMap,然后return就完了.下面通过一个li ...
    
			
    2. 
						
  2. linux安装mysql8(完整图文笔记)
			
    基本命令 安装 : yum install mysql-community-server 启动 : service mysqld start/restart 停止 : service mysqld s ...
    
			
    3. 
						
  3. 如何将DataTable转换成List<T>
			
    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...
    
			
    4. 
						
  4. 2019 红帽杯 Re WP
			
    0x01 xx 测试文件:https://www.lanzous.com/i7dyqhc 1.准备 获取信息 64位文件 2.IDA打开 使用Findcrypt脚本可以看到 结合文件名是xx,因此猜测 ...
    
			
    5. 
						
  5. IBM公司面试题
			
    进入IBM差不多是每一个IT人的梦想.IBM公司向来以高素质人才作为企业持续竞争力的保证,所以经常出一些千奇百怪的面试题,来考验一个人的综合能力,以下是5道IBM曾经出过的面试题,看看你能作出几道:  ...
    
			
    6. 
						
  6. 40. Combination Sum II (JAVA)
			
    Given a collection of candidate numbers (candidates) and a target number (target), find all unique c ...
    
			
    7. 
						
  7. 一、JsonTree
			
    一.JsonTree [ {"id":"4","pid":"1","name":"大家电& ...
    
			
    8. 
						
  8. ffmpeg使用分析视频
			
    https://www.cnblogs.com/Finley/p/8646711.html 先存下
    
			
    9. 
						
  9. spring security基本知识(二) 自定义认证
			
    配置自定义的用户存储 我们在 SecurityConfig 的配置类中 重写了 configure(AuthenticationManagerBuilder auth) 方法,我们可以通过 Authe ...
    
			
    10. 
						
  10. SpringBoot中资源初始化加载的几种方式
			
    一.问题 在平时的业务模块开发过程中,难免会需要做一些全局的任务.缓存.线程等等的初始化工作,那么如何解决这个问题呢?方法有多种,但具体又要怎么选择呢? 二.资源初始化 1.既然要做资源的初始化,那么 ...
    
			
    11.