`
zccst
  • 浏览: 3322557 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js 事件基础

 
阅读更多
作者:zccst


3,stopPropagation, preventDefault 和 return false 的区别
stopPropagation :停止事件传播
preventDefault:阻止默认动作
return false:阻止动作(包括默认的和不默认的)
比如,a有跳转功能,通过preventDefault可以不跳转。
定义了一个基础事件,不想被传播至父级,可调用stopPropagation 方法。


2,事件基础2
事件句柄 (Event Handlers)
常见各种带on的方法,(略)

Event的标准属性
有:bubbles, cancelable, currentTarget, evenPhase , target, timeStamp, type

Event的标准方法
有:initEvent, stopPropagation, preventDefault

IE还支持属性
cancelBubble,fromElement,keyCode,offsetX,offsetY,returnValue,srcElement,toElement,x,y

鼠标键盘属性:




<script type="text/javascript">

function check(event)
{
	//区别一:
	//浏览器兼容问题,FF会传递虚参数event,但IE不会。经测试,IE8好像不需要区分
	//if(event){event = event;}else{event = window.event;}
	alert('X:'+event.clientX+' Y:'+event.clientY);
	
	//浏览器兼容问题,FF和IE获取页面id的方法不同。
	if(event.target){alert(event.target.id)}else{alert(event.srcElement.id)}
	
	//区别二:IE是冒泡,FF是捕获
	//IE是逐层向上传递。儿子被点击响应,父亲也响应,爷爷也响应,所有主先以此响应。
	//FF是捕获式。
}

</script>
</head>

<body onclick="alert('body')">
<div onclick="check(event)" id="div1" style="width:200px; height:200px; background:#FF9">检查</div>
<div onclick="alert('grandfather')">
<div onclick="alert('father')">
<div onclick="alert('son')" id="div2" style="width:200px; height:200px;background:red;"><button onclick="alert('self')" value="ffff">点击</button></div>
</div></div>



1,事件基础
Event是事件,比如用户点击就是一个事件。

一,概述
event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等;
event对象只在事件发生的过程中才有效。
event的某些属性只对特定的事件有意义。比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。
IE中事件可以沿着包容层次一点点起泡到上层,也就是说,下层的DOM节点定义的事件处理函数,到了上层的节点如果还有和下层相同事件类型的事件处理函数,那么上层的事件处理函数也会执行。例如, div 标签包含了 a ,如果这两个标签都有onclick事件的处理函数,那么执行的情况就是先执行标签 a 的onclick事件处理函数,再执行 div 的事件处理函数。如果希望的事件处理函数执行完毕之后,不希望执行上层的 div 的onclick的事件处理函数了,那么就把cancelBubble设置为true即可。

二,属性
常见属性
altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX, screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y

基本介绍
1. type:事件的类型,如onlick中的click;

2. srcElement/target:事件源,就是发生事件的元素;

3. button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下多个键,酒把这些值加起来,所以3就代表左右键同时按下;(firefox中 0代表左键,1代表中间键,2代表右键)

4. clientX/clientY:事件发生的时候,鼠标相对于浏览器窗口可视文档区域的左上角的位置;(在DOM标准中,这两个属性值都不考虑文档的滚动情况,也就是说,无论文档滚动到哪里,只要事件发生在窗口左上角,clientX和clientY都是 0,所以在IE中,要想得到事件发生的坐标相对于文档开头的位置,要加上
document.body.scrollLeft和 document.body.scrollTop)

5. offsetX,offsetY/layerX,layerY:事件发生的时候,鼠标相对于源元素左上角的位置;

6. x,y/pageX,pageY:检索相对于父要素鼠标水平坐标的整数;

7. altKey,ctrlKey,shiftKey等:返回一个布尔值;

8. keyCode:返回keydown何keyup事件发生的时候按键的代码,以及keypress 事件的Unicode字符;(firefox2不支持 event.keycode,可以用 event.which替代 )

9. fromElement,toElement:前者是指代mouseover事件中鼠标移动过的文档元素,后者指代mouseout事件中鼠标移动到的文档元素;

10. cancelBubble:一个布尔属性,把它设置为true的时候,将停止事件进一步起泡到包容层次的元素;(e.cancelBubble = true; 相当于 e.stopPropagation();)

11. returnValue:一个布尔属性,设置为false的时候可以组织浏览器执行默认的事件动作;(e.returnValue = false; 相当于 e.preventDefault();)

12. attachEvent(),detachEvent()/addEventListener(),removeEventListener:为制定DOM对象事件类型注册多个事件处理函数的方法,它们有两个参数,第一个是事件类型,第二个是事件处理函数。在
attachEvent()事件执行的时候,this关键字指向的是window对象,而不是发生事件的那个元素;

13. screenX、screenY:鼠标指针相对于显示器左上角的位置,如果你想打开新的窗口,这两个属性很重要;
分享到:
评论

相关推荐

    10-JS事件基础.pptx

    在这个"10-JS事件基础"的教程中,我们将深入理解JavaScript中的事件处理机制,包括事件对象、事件冒泡、DOM事件流以及鼠标和键盘事件。 首先,让我们了解一下什么是事件对象。在JavaScript中,每当发生一个事件(如...

    关于js定时器和js事件基础案例小练习附知识点.html

    每天进步一点点,加油!

    使用JavaScript事件综合查询,js事件大全

    JavaScript事件是浏览器或Node.js环境中发生的特定行为,如用户点击按钮、页面加载完成或输入框获得焦点等。事件驱动编程是JavaScript的核心特性之一,通过监听和处理这些事件,我们可以创建响应式的用户体验。 二...

    js基础知识点思维导图

    本思维导图将深入探讨JS的基础知识点,帮助初学者构建全面的JavaScript知识体系。 1. 变量与数据类型: JavaScript有六种基本数据类型:Undefined、Null、Boolean、Number、String和Symbol(ES6新增),以及一种...

    JavaScript基础教程(pdf版)

    JavaScript,简称为JS,是一种广泛应用于网页和网络应用的轻量级编程语言,与HTML和CSS一起构成了网页开发的三大核心技术。本教程旨在为初学者提供一个全面的JavaScript基础知识学习平台,帮助理解并掌握这种强大的...

    JavaScript基础教程(第8版) 高清版 mobi

    书中从javascript 语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie,并在上一版的基础上新增了两章,讲述jquery 框架的基础知识。本书不仅介绍了基础知识和使用方法,也深入...

    头歌教学实践平台 Web前端开发基础 JavaScript学习手册六:JS条件语句

    JavaScript是Web前端开发的核心语言之一,它为网页和应用程序提供了动态交互的能力。在JavaScript中,条件语句是控制程序流程的重要工具,它们允许我们根据不同的条件执行不同的代码块,从而实现逻辑判断和决策。本...

    javaScript基础版与源码大全

    JavaScript,也被称为JS,是一种广泛应用于网页和网络应用的脚本语言,主要在客户端运行,为用户提供动态交互体验。它是互联网上最流行的编程语言之一,主要用于网页开发、前端交互、后端开发(如Node.js)以及移动...

    js的各种事件,方便使用

    JavaScript事件是网页中发生的特定情况,例如鼠标点击、键盘按键或者页面加载完成。通过事件监听器,我们可以在这些事件发生时执行相应的代码。常见的事件包括: 1. click:鼠标点击事件 2. keydown/keyup:键盘...

    李立超JavaScript基础篇笔记

    JavaScript,简称JS,是由Brendan Eich在1995年创造的一种高级编程语言,最初目的是为了增强网页的交互性,特别是在前端进行表单验证。...这些类型构成了JS编程的基础,理解和掌握它们是学习JavaScript的第一步。

    javascript 基础教程 html版的

    3. 外部脚本:将JavaScript代码写入单独的.js文件,然后通过`&lt;script src="script.js"&gt;&lt;/script&gt;`引用,保持代码的分离和可重用性。 JavaScript操作DOM: 1. Document Object Model(DOM)是HTML和XML文档的编程...

    2.01 JavaScript基础事件以及Event对象(原生态).pdf

    JavaScript 基础事件与 Event 对象 本文将详细介绍 JavaScript 中的基础事件和 Event 对象,包括事件的定义、EventTarget 接收事件接口、addEventListener、removeEventListener、dispatchEvent 方法 serta ...

    一头扎进 JavaScript (基础篇) 视频教程 java1234出品

    本视频教程“一头扎进 JavaScript (基础篇)”由java1234出品,旨在帮助初学者全面掌握JavaScript的基础知识,从而在网页开发领域打下坚实的基础。 JavaScript的核心概念包括变量、数据类型、操作符、控制结构、函数...

    Javascript基础教程版

    JavaScript,又被称为JS,是一种广泛应用于网页和网络应用开发的脚本语言,它主要负责实现客户端的交互性和动态效果。JavaScript是Web开发三大核心技术之一,与HTML和CSS相辅相成,构建了互联网的基石。这个...

    javascript基础实验含源码

    这些文件可能涉及到事件处理(如点击按钮触发函数)、DOM操作(修改页面元素的内容或样式)、数组操作、函数和对象的使用,甚至可能包含了一些JavaScript库或框架的基本应用,如jQuery。 JavaScript还支持面向对象...

    web前端工程师JavaScript基础入门路径学习专题课程

    第3课 JavaScript DOM事件 为页面中的元素绑定键盘或鼠标事件,从而可以触发和实现我们想要的交互效果 第4课 JavaScript BOM基础 学习浏览器对象模型“BOM”,可以对浏览器窗口进行访问和操作,与浏览器“对话” ...

    零基础学javascript教程附带光盘

    通过这个教程,初学者将逐步掌握JavaScript的基本概念和实用技巧,为将来进一步学习前端框架(如React、Vue、Angular)或Node.js后端开发打下坚实基础。同时,实践范例代码是巩固理论知识的最佳途径,所以光盘中的...

    1 妙味课堂原创JavaScript视频教程 JS基础教程5课资料

    妙味课堂的这个原创JavaScript视频教程,旨在帮助初学者系统地学习和掌握JS的基础知识。 教程共分为5课,涵盖了JavaScript的基础内容,以下是每一课可能涉及的关键知识点: **第1课:JavaScript入门** - ...

    js语法事件

    学习JavaScript语法事件,不仅包括上述基础概念,还需要深入理解每个概念的使用场景和细节,以及如何与其他编程技术结合,如jQuery库、React框架等。通过实践项目和不断探索,可以逐步成为一名精通JavaScript的...

    HTML5+JavaScript动画基础 源码

    JavaScript库,如jQuery、GreenSock(GSAP)和Three.js等,提供了更高级的动画控制和优化,使得开发者能够更容易地实现复杂的动画序列。 在这个“HTML5+JavaScript动画基础 源码”中,你可能会发现以下关键知识点:...

Global site tag (gtag.js) - Google Analytics