首页 > 代码库 > js中的事件 bom对象 dom对象.
js中的事件 bom对象 dom对象.
3.事件
什么是事件？为什么使用事件?
我们学习事件首先了解一些概念
事件源 事件 监听器
事件源:事件的源头(也就是这个事件是由某某触发的，那么我们就管其叫事件源)
监听器:监听事件发生的组件。那么监听器要想监听事件是否发生，必须注册监听（绑定监听）
js中常用的事件
1.onclick 鼠标点击某个对象 我们在开发中一般会对按钮，文本框或radio checkbox等进行onclick操作.
2.onblur 失去焦点
3.onfocus 获去焦点
4.onchange 改变域的内容 针对于select组件.
5.onload 页面加载成功后.
onunload 页面离开
6.onsubmit 表单提交 ----必须写return
7.关于鼠标操作
onmousedown 某个鼠标按键被按下
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标被移到某元素之上
onmouseup 某个鼠标按键被松开
8.关于键盘操作
onkeydown 某个键盘的键被按下
onkeypress 某个键盘的键被按下或按住
onkeyup 某个键盘的键被松开
对于不同的浏览器，获取事件的方式不一样
阻止默认事件执行以及它的冒泡传播.
----------------------------------------------------------------------------
关于js的事件注册操作方式
1.<input type="button" value="http://www.mamicode.com/按钮" id="btn" onclick="btn();">
注册操作
function btn(){
alert("hello button");
}
2.<input type="button" value="http://www.mamicode.com/按钮" id="btn">
注册操作
window.onload = function() { //当整个窗口onload时，调用函数
//当id为btn的按钮被点击时，调用一个函数。
document.getElementById("btn").onclick = function() {
alert("hello button");
};
}
或
window.onload=myloa; //页面加载后调用myload。
function myload(){
document.getElementById("btn").onclick=myclick;
}
function myclick(){
alert("hello button");
}
以上两种方式的区别：
第一种操作，传递参数比较方便
第二种操作，不能传递参数.
第二种比第一种注册操作优点：第二种方式将html代码与js代码进行分离。
---------------------------------------------------------------------------------
演示事件
1.onload与onunload
onbeforeunload---页面离开前.
示例
<body onl oad="myload();" onunload="myunload();" onbeforeunload="mybeforeunload();">
2. onblur与onfocus
onblur----失去焦点
onfocus---获得焦点
window.onload = function() {
var date;
//t1添加失去焦点事件.
document.getElementById("t1").onblur = function() {
date= new Date()
this.value = http://www.mamicode.com/date.toLocaleString();
};
//t2.获取焦点事件
document.getElementById("t2").onfocus = function() {
this.value=http://www.mamicode.com/new Date(date.getTime()+30*24*60*60*1000).toLocaleString();
};
}
3.onchange---改变域内容
window.onload = function() {
document.getElementById("city").onchange = function() {
//alert(this.options[this.selectedIndex].text);
alert(this.value);
}
}
-----------------------------------------------------------------------------------------------
上午复习
1.练习---目的 html+css+javascript练习
重点:表单校验.
2.事件
1.常用事件.
onclick onolad onsubmit onblur onchange
2.关于注册事件
1.在标签上通过 onclick="fun()" ----可以传递参数.
2.html代码与js代码分离 document.getElementById("id").onclick=function(){};
3.关于事件详细说明.
onload onunload onbeforeunload
onchange
onblur onfocus
失去焦点操作-------
关于校验. ajax当用户名输入完成以后，文本框失去焦点，
会向服务器发送请求，判断用户名是否已经被占用.
---------------------------------------------------------------------------
练习:码表
需要你们查找一个函数 setTimeout
------------------------------------------------------------------------------
鼠标事件
键盘事件
数字文本框
只能输入数字
1.怎样可以得到键盘输入的键值.keyCode
需要得到事件对象.
对于不同的浏览器获取事件对象不一样.
IE：window.event
firefox:需要传递参数. 对于ie浏览器也好使.
我们获取键码值
window.event.keyCode---IE浏览器获取.
对于高版本的firefox也可以使用上面的方式.
对于firefox它上面操作不好使. e.which.
2.关于阻止事件默认行为执行.
if (e && e.stopPropagation) {
e.preventDefault(); //firefox和google浏览器阻止事件默认行为执行
} else {
//IE浏览器阻止事件默认行为执行.
window.event.returnValue = http://www.mamicode.com/false;
}
关于数字文本框的练习
1.怎样获取事件对象(不同浏览) ie:widnow.event firefox：需要传参
2.得到键码值 ie:window.event.keyCode firefox:e.which. 对于高版本的firefox也可以使用keyCode属性.
3.阻止浏览器默认行为执行:(不同的浏览器不同的方式)
-------------------------------------------------------------------
关于事件的冒泡传播.
if(e&&e.stopPropagation){
e.stopPropagation();
}else{
window.event.cancelBubble = true;
}
--------------------------------------------------------------------------------------------------------------
事件的总结:
1.对于常用事件会使用 onclick onblur onchange onsubmit onl oad
2.对于事件的注册方式
3.对于事件中获取事件对象
4.对于阻止事件的默认行为执行与事件传播(会使用)
----------------------------------------------------------------------------------------------------------
BoM对象
BOM---borswer object model 浏览器对象模型.
DOM Window (重点)---它是整个js的顶层对象. window代表一个浏览器窗口或者一个框架 frameset iframe
DOM Navigator -----浏览器信息
DOM Screen ---------关于屏幕像素点操作
DOM History (次重点)---它是记录的浏览记录 go()
DOM Location (重点) ---关于url信息 href 它可以完成超链接任务.
1.window对象
关于window之间的关系
parent 父窗口
top 顶层窗口
opener 找开的窗口
self---代表自己 本窗口
frames[]
练习1:在页面内嵌入一个iframe，在iframe中提供一个输入项，输入后，在iframe外面窗口中显示内容
练习2:打开关闭窗体练习 open() close();
练习3.打开新窗口进行选择，将选择项的值添加到主窗口中.
2.window对象的对话框
3.关于history与location的操作.
history--->go
location---->href
4.setTimeout setInterval
---------------------------------------------
总结:
1.关于form表单的校验
2.关于常用事件
1.对于常用事件会使用 onclick onblur onchange onsubmit onl oad
2.对于事件的注册方式
3.对于事件中获取事件对象
4.对于阻止事件的默认行为执行与事件传播(会使用)
3.关于bom对象
window
属性 parent forms[] opener
方法 open() close() setTimeout setInterval
location
href
history
go
代码:
1.form验证
2.事件----关于onclick onl oad onsubmit onchange onblur练习
3.window所有代码看一遍.
4.关于setTimeout与setInterval必会.
----------------------------------------
js中的事件 bom对象 dom对象.