转行学开发，代码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. Javascript高级面试
			
    原型 异步 一.什么是单线程,和异步有什么关系 单线程:只有一个线程,同一时间只能做一件事原因:避免DOM渲染的冲突解决方案:异步 为什么js只有一个线程:避免DOM渲染冲突 浏览器需要渲染DOM J ...
    
			
    2. 
						
  2. 6-3 如何解析简单的XML文档
			
    元素节点.元素树 >>> from xml.etree.ElementTree import parse >>> help(parse) Help on funct ...
    
			
    3. 
						
  3. django学习笔记（四）
			
    1.请求周期 url> 路由 > 函数或类 > 返回字符串或者模板语言? Form表单提交: 提交 -> url > 函数或类中的方法 - .... HttpRespon ...
    
			
    4. 
						
  4. 08-Django加载静态文件
			
    1.css文件以及js文件要放在static目录下,static和templates属于同级目录 2.在Django项目的同名项目文件的setting.py中,最后添加静态文件夹static目录路径  ...
    
			
    5. 
						
  5. HTML的条件注释及hack技术
			
    在很多时候,前端的兼容性问题,都很让人头痛!幸运的是,微软从去年声明:从2016年1月12日起,微软将停止为IE8(包括IE8)提供技术支持和安全更新.整个前端圈子都沸腾起来,和今年七月份Adobe宣 ...
    
			
    6. 
						
  6. ThinkPHP中的display()和fetch()的区别
			
    fetch()传入的参数是模板名,用模板文件来输出; display()传入的是字符串,输出传递的内容.
    
			
    7. 
						
  7. 2018 Web 开发者路线图[转载]
			
    2018 Web 开发者路线图[转载] https://qianduan.group/posts/5a66f36e0cf6b624d2239c74?hmsr=toutiao.io&utm_me ...
    
			
    8. 
						
  8. 16.Linux-CentOS系统进入单用户模式修改root用户密码操作
			
    问题描述: root用户密码忘记,进入单用户重置root用户密码 解决步骤: 1.重启服务器,在系统显示内核版本界面后“按E键”,进入内核启动项2.找到Linux16这一行段,将“ro”修改成“rw” ...
    
			
    9. 
						
  9. hdu 3530 单调队列最值
			
    /** HDU 3530 单调队列的应用 题意: 给定一段序列,求出最长的一段子序列使得该子序列中最大最小只差x满足m<=x<=k. 解题思路: 建立两个单调队列分别递增和递减维护(头尾删 ...
    
			
    10. 
						
  10. 【leetcode】1110. Delete Nodes And Return Forest
			
    题目如下: Given the root of a binary tree, each node in the tree has a distinct value. After deleting al ...
    
			
    11.