转行学开发，代码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. 4G 内存怎么读取一个 5G 的数据？
			
    方法一:可以通过生成器,分多次读取,每次读取数量相对少的数据(比如 500MB)进行处理,处理结束后在读取后面的 500MB 的数据. 方法二:可以通过 linux 命令 split 切割成小文件,然 ...
    
			
    2. 
						
  2. SGU 521 North-East ( 二维LIS 线段树优化 )
			
    521. "North-East" Time limit per test: 0.5 second(s)Memory limit: 262144 kilobytes input:  ...
    
			
    3. 
						
  3. Burp Suite详细使用教程-Intruder模块详3
			
    Burp Suite使用详细教程连载的第三章.0×02 Intruder—内置有效负荷测试使用技巧内置有效负荷测试选择项如下图: 今天的小技巧使用的是 numbers,给大伙科普下:Numbers 数 ...
    
			
    4. 
						
  4. sqlserver 创建 aspstate的方法
			
    找到路径 C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727 不同版本找不同版本的路径 在命令行执行命令 aspnet_regsql.exe -ssadd -s ...
    
			
    5. 
						
  5. 简单的物流项目实战，WPF的MVVM设计模式(四)
			
    接下来写ViewModels 创建运单的ViewModel类 public class CreateExpressWindowViewModel: NotificationObject { priva ...
    
			
    6. 
						
  6. vue梳理（2）
			
    -app.vue作为根组件被挂载到index.html文件里,其他的所有组件都是在app.vue组件里做文章. 展示给用户的就是app.vue里的内容,你觉得删的没有内容了但实际还有很多是因为什么呢? ...
    
			
    7. 
						
  7. web.xml文件头声明各个版本参考
			
    Servlet 3.1 Java EE 7 XML schema, namespace is http://xmlns.jcp.org/xml/ns/javaee/ <web-app xmlns ...
    
			
    8. 
						
  8. Java设计模式之——代理设计模式
			
    1.什么是代理设计模式 所谓代理模式是指客户端并不直接调用实际的对象,而是通过调用代理,来间接的调用实际的对象. 这里举一个栗子:就拿我们平时租房子来举例子,好比租客和房主之间的关系,我们租房子往往不 ...
    
			
    9. 
						
  9. python二维码模块(qrcode)
			
    qrcode模块安装 运行命令行工具(cmd),使用pip安装工具分别安装qrcode. pip install qrcode 先来个简单的例子 import qrcode # 二维码内容 data  ...
    
			
    10. 
						
  10. laplace transform 拉普拉斯变换
			
    参考网址: 1. https://en.wikipedia.org/wiki/First-hitting-time_model 2. https://en.wikipedia.org/wiki/Lap ...
    
			
    11.