1、什么是事件
通过鼠标、键盘对浏览器页面所做的动作就是事件。
事件一旦发生需要有事件处理,该处理称为“事件驱动”,事件驱动通常由函数担任
onclick:鼠标点击
onmouseover:鼠标移入
onmouseout:鼠标移出
onkeyup:键盘按下并抬起
onkeydown:键盘按下
onchange:内容改变
onblur:失去焦点
onfocus:获得焦点
onsubmit:表单提交
2、设置事件
2.1、dom一级事件设置
①<input type=”text” onclick=”函数名称()” />
function 函数名称(){this[window]}
②<input type=”text” onclick=”过程代码this[itnode]” />
③itnode.onclick = function(){this[itnode]} 匿名函数
④itnode.onclick = 函数名称; 有名函数
function 函数名称(){this[itnode]}
取消dom1级事件:
itnode.onclick = null;
2.2、dom二级事件设置
1) 主流浏览器方式(包括IE9以上 版本浏览器):
itnode.addEventListener(事件类型,事件处理[,事件流]);
itnode.removeEventListener(事件类型,事件处理[,事件流]);
2) IE浏览器方式(IE6/7/8):
itnode.attachEvent(事件类型,事件处理);
itnode.detachEvent(事件类型,事件处理);
事件类型:就是我们可以设置的具体事件,例如onclick/onmouseover等
主流浏览器方式没有”on标志”,例如addEventListener(‘click’,...);
IE浏览器方式有”on”标志,例如attachEvent(‘onclick’)
事件处理:事件驱动,可以是一个有名/匿名 函数
例如addEventListener(‘click’,function(){}/有名函数);
事件流:true捕捉型、[false冒泡型]
事件取消(removeEventListener/detachEvent)操作具体要求:
① 事件处理 必须是有名函数,不可以是匿名函数。
② 事件取消的参数与绑定的参数完全一致(数量/内容)
dom2级事件设置的特点:
① 可以为同一个对象设置多个同类型事件。
② 事件取消也非常灵活。
③ 对事件流也有很好的处理控制。
<html>
<head>
<title>事件设置</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
</script>
<style type="text/css">
div{width:300px; height:200px; background-color:pink;}
</style>
</head>
<body>
<h2>dom2级事件设置</h2>
<div>Today is cloud</div>
</body>
</html>
<script type="text/javascript">
var dv = document.getElementsByTagName('div')[0];
dv.addEventListener('click',function(){
dv.style.backgroundColor = "lightblue";
});
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
</script>
<style type="text/css">
div{width:300px; height:200px; background-color:pink;}
</style>
</head>
<body>
<h2>dom2级事件取消操作</h2>
<div>everyday is beautiful</div>
<input type="button" value="取消" onclick="cancel()" />
</body>
</html>
<script type="text/javascript">
var dv = document.getElementsByTagName('div')[0];
function cancel(){
dv.removeEventListener('click',f1);
dv.removeEventListener('mouseover',over);
}
dv.addEventListener('click',function(){ dv.style.backgroundColor = "lightblue";});
dv.addEventListener('click',function(){ console.log('I am here');});
function over(){dv.style.backgroundColor = "lightgreen";}
dv.addEventListener('mouseover',over);
function out(){dv.style.backgroundColor = "pink";}
dv.addEventListener('mouseout',out);
</script>
3、事件流
多个彼此嵌套元素,他们拥有相同的事件,最内部元素事件被触发后,外边多个元素的同类型事件也会被触发,多个元素他们同类型事件同时执行的效果称为“事件流”
事件流分为两种类型(如果学过flash的话,可以看出非常相似):
冒泡型:事件从内部往外部依次执行。
捕捉型:事件从外部往内部依次执行。
//addEventListener(类型,处理,事件流true捕捉/[false冒泡]);
IE浏览器从开始到后期事件流始终是“冒泡型”的,直到IE9以后版本两种都开始支持。
网景的Navigator浏览器(现在火狐浏览器的许多血统来源于navigator浏览器)一开始的事件流是”捕捉型”。后期事件流有改进,针对捕捉型、冒泡型都可以支持。
4、事件对象
事件对象,每个事件(包括鼠标、键盘事件)触发执行的过程中,都有对应的事件对象,通过事件对象可以获得鼠标相对页面的坐标信息、通过事件对象也可以感知什么键子被 触发执行、通过事件对象还可以阻止事件流产生、阻止浏览器默认动作。
4.1、获取事件对象
①主流浏览器(IE9以上版本浏览器):
事件处理函数的第一个形参就是 事件对象
例如:
node.onclick = function(evt){evt就是事件对象}
addEventListener(类型,function(evt){}/函数名字);
function 函数名称(evt){}
红色的evt就是事件对象
② IE(6/7/8)浏览器
node.onclick = function(){window.event事件对象}
全局变量event就是事件对象
全局变量直接上级对象是window。可以通过window访问全局变量信息。
window.document.getElementById()
4.2、事件对象的作用
1) 获得鼠标的坐标信息
event.clientX/clientY;
event.pageX/pageY;
event.screenX/screenY;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
</script>
<style type="text/css">
div{width:700px; height:3000px; background-color:pink;}
</style>
</head>
<body>
<h2>事件对象作用</h2>
<div>Today is very good</div>
</body>
</html>
<script type="text/javascript">
var dv = document.getElementsByTagName('div')[0];
dv.onclick = function(evt){
console.log(evt.clientX+"---"+evt.clientY);
console.log(evt.pageX+"---"+evt.pageY);
console.log(evt.screenX+"---"+evt.screenY);
}
</script>
2) 阻止事件流:
event.stopPropagation();
window.event.cancelBubble = true;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
</script>
<style type="text/css">
div{width:400px; height:300px; background-color:pink;}
p{width:300px; height:200px; background-color:lightgreen;}
span{background-color:lightblue;}
</style>
</head>
<body>
<h2>事件流效果</h2>
<div>
<p>
<span>哈哈哈哈</span>
</p>
</div>
</body>
</html>
<script type="text/javascript">
var dv = document.getElementsByTagName('div')[0];
var ps = document.getElementsByTagName('p')[0];
var sn = document.getElementsByTagName('span')[0];
dv.addEventListener('click',
function(evt){
console.log('11111');
evt.stopPropagation();
});
ps.addEventListener('click',
function(evt){
console.log('22222');
evt.stopPropagation();
});
sn.addEventListener('click',
function(evt){
console.log('33333');
evt.stopPropagation();
});
</script>
3) 感知被触发键盘键子信息
event.keyCode 获得键盘对应的键值码信息
通过事件触发时候获得的keyCode数值码信息可以对应键盘的键子信息。
4) 阻止浏览器默认动作
浏览器默认动作,注册form表单页面,提交表单的时候,浏览器的页面会根据action属性值进行跳转,这个动作称为“浏览器默认动作”。
form表单提交的时候,需要对各个表单域进行验证,如果验证失败则禁止浏览器跳转。
event.preventDefault();
event.returnValue = false;
return false;
5、加载事件onload
什么是加载事件:
js代码执行时候,需要html&css的支持,就让html代码先执行(先进入内存),js代码后执行
js代码在最后执行的过程就是“加载过程”,通常通过“加载事件”实现加载过程
加载事件onload可以保证js代码后于html&css执行,其要在最后执行。
具体设置:
<body onload=”加载函数()”>
window.onload = 匿名/有名 函数; //推荐
<script type="text/javascript">
$(function () {
$('pre.prettyprint code').each(function () {
var lines = $(this).text().split('\n').length;
var $numbering = $('<ul/>').addClass('pre-numbering').hide();
$(this).addClass('has-numbering').parent().append($numbering);
for (i = 1; i <= lines; i++) {
$numbering.append($('<li/>').text(i));
};
$numbering.fadeIn(1700);
});
});
</script>
分享到:
相关推荐
第3章 JavaScript事件处理 第4章 JavaScript基于对象编程 第5章 文档对象模型 DOM 第6章 String Math Array等数据对象 第7章 Window及相关顶级对象 第8章 Document对象">该资源为8个PDF文档教程 适合JS开发初学者 ...
事件驱动及事件处理 范例:自动装卸载;获取版本号 • 四、 基于对象的JavaScript语言 对象的基础知识 常用对象的属性和方法 范例:时钟 • 五、 创建新对象 对象的定义 创建对象实例 对象方法的...
JavaScript入门教程 JavaScript事件处理
事件的处理程序可以是任意 JavaScript 语句,但是我们一般用特定的自定义函数(function)来处理事情。指定事件处理程序有三种方法:方法一 直接在 HTML 标记中指定。这种方法是用得最普遍的。方法是: 代码如下:<...
第3章 JavaScript事件处理.pdf 第4章 JavaScript基于对象编程.pdf 第5章 文档对象模型(DOM).pdf 第6章 String、Math、Array等数据对象.pdf 第7章 Window及相关顶级对象.pdf 第8章 Document对象.pdf 内容 绝对清楚 ...
《JavaScript基础教程(第8版)》循序渐进地讲述了JavaScript及相关的CSS、DOM、Ajax、jQuery等技术。书中从JavaScript语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie,并在上...
第一页 Javascript高级教程 第二页 本教程的课程计划 第三页 一个if-then-else的快捷方式 第四页 什么是变量 第五页 变量的使用方法 第2课 第一页 Javascript高级教程-第2日 第二页 神奇的字符串处理 第三...
如果在使用javascript的时候涉及到event处理,就需要知道event在不同的浏览器中的差异,主要的JavaScript的事件模型有三种(参考《Supporting Three Event Models at Once》),它们分别是NN4、IE4+和W3C/Safar。
课件中讲了对象,javaScript结构、事件处理、预定义对象,javaScript多媒体应用
本教程从基础语法、DOM操作、事件处理、Ajax等方面全面讲解了JavaScript的核心知识点,同时结合实际案例进行讲解,让学习者能够快速上手实践。本教程适用于想要从零开始学习JavaScript的初学者,也适用于想要深入...
API,记述了这些API中的每一个JavaScript对象、方法、性质、构造函数、常量和事件处理程序。 这本最畅销的JavaScript参考书的第四版已经进行了全面的更新,其中涵盖JavaScript 1.5(ECMAScript Version 3)的详细...
第3章 JavaScript事件处理.pdf 第4章 JavaScript基于对象编程.pdf 第5章 文档对象模型(DOM).pdf .第6章 String、Math、Array等数据对象.pdf 第7章 Window及相关顶级对象.pdf 第8章 Document对象.pdf
本JavaScript教程是一份全面的学习指南,旨在为读者提供对JavaScript编程语言的深入理解。教程内容涵盖了JavaScript的基本语法、变量、数据类型、运算符、循环、函数、对象、数组、错误处理等基础知识,同时也包括了...
一、概述 二、语言的基础 三、基本对象 四、函数 五、Navigator浏览器对象 六、Screen屏幕对象 七、Window窗口对象 八、History历史对象 九、Location地址对象 十、Document文档对象 十一、事件处理
本教程介绍了 JavaScript 的基础语法、常用方法以及一些实际案例,包括变量和数据类型、条件语句和循环、函数、事件处理等内容。JavaScript 是一种强大的脚本语言,可以用于开发各种交互式网页和 Web 应用。
javascript 基础教程 1.JavaScript基础.ppt 2.JavaScript核心对象.ppt 3.JavaScript浏览器对象.ppt 4.JavaScript表单处理.ppt
非常详细的教程。 包括:JavaScript语言基础,JavaScript事件处理, JavaScript对象编程,DOM对象模型,Document对象,Window及相关顶级对象,String、Math、Array等对象