js有关事件驱动
事件驱动
/*
什么是事件？
1、事件发生了
2、我要对这个事件做对应的处理。
*/
/*
通过 事件绑定 给某一个事件绑定具体的处理事件的行为/函数。
内联模式 事件绑定写在行间
外联模式/脚本模式 规矩语法规范，尽量将css、html和js分开去写。
*/
内联模式：
js
【注】内联模式下js代码不要写在window.onload = function(){ }函数里，这样事件就不会发生,会报错
示例;
外联模式（脚本模式）事件绑定格式
node(要绑定的节点).on+ 事件类型 = function(){
}
绑定示例：
外联模式（脚本模式）
-----------------------------------------------------
事件类型：
- 鼠标事件类型 2. 键盘事件类型 3.HTML事件类型
1.鼠标事件类型
鼠标事件类型（可以添加任何节点上）
click 点击
dblclick 双击
mousedown 按下
mouseup 抬起
mouseover 移入
mouseout 移出
mousemove 鼠标移动，只要被添加事件的元素上移动，就不停的去调用这个函数。
代码示例:
<script> window.onload = function(){ //双击 var oBtn = document.getElementById('btn1'); oBtn.ondblclick = function(){ alert('双击'); } //鼠标按下 var oDiv = document.getElementById('div1'); oDiv.onmousedown = function(){ this.style.backgroundColor = "blue"; //鼠标按下背景变蓝色 } // 鼠标抬起 oDiv.onmouseup = function(){ this.style.backgroundColor = "orange"; //鼠标按下背景变橙色 } // 鼠标移入 oDiv.onmouseover = function(){ this.innerHTML = "移入"; } //鼠标移出 oDiv.onmouseout = function(){ this.innerHTML = "移出"; } //鼠标移动 var i = 0; oDiv.onmousemove = function(){ this.innerHTML = i++; } } </script> </head> <body> <button id = 'btn1'>按钮</button> <div id = 'div1'></div> </body>
2.键盘事件类型
一般添加给输入框标签、一般添加为 window对象。
/*
键盘事件（输入框标签、window）
1、输入
2、快捷键
keydown 键盘按下 如果你按下以后不松手，会连续触发
keyup 键盘抬起
keypress 键盘按下 只支持字符键按下（回车、TAB键、空格也属于字符键），功能键 (shift/ctrl等)是无效的。
*/
代码示例：
<title>Document</title>
<script>
window.onload = function(){
var i = 0;
//键盘按下 只支持字符键按下，功能键是无效的。
window.onkeypress = function(){
document.title = i++; //网页标题名+1
}
//按键按下
/*window.onkeydown = function(){
document.title = i++;//网页标题名+1
}
//按键抬起
window.onkeyup = function(){
document.title = "抬起"; //网页标题名字变成 抬起
}*/
}
</script>
</head>
<body>
</body>
上面代码中的代码 其中一种效果演示：
onkeypress演示
3.HTML事件类型
HTML事件
1、window事件
load 当页面加载完成以后去执行
unload 当页面解构的时候（IE兼容）
scroll 当页面滚动的时候，执行
resize 当页面窗口大小发生变化的时候
2、表单事件
常用
focus 获取焦点
blur 失去焦点
不经常用
change 当文本框(input 或 textarea)内容改变且失去焦点后触发。
select 当用户选择文本框(input 或 textarea)中的一个或多个字符触发。
【注】上述这些事件直接添加在文本框。
【注】下述这两个事件必须添加在form这个标签上
submit 点击submit按钮触发
reset 点击reset按钮触发
a.window事件
onload示例： load 当页面加载完成以后去执行
onunload 单页面解构的时候执行（页面加载后，再次点刷新的时候可以看到效果，关闭页面的时候也会触发，但是因为要关闭了所以看不到效果） 只兼容 IE；
window.onunload = function(){
}
onscroll 当页面滚动的时候，执行
resize 当页面窗口大小发生变化的时候
b.表单事件
常用
focus 获取焦点
blur 失去焦点
不经常用
change 当文本框(input 或 textarea)内容改变且失去焦点后触发。
select 当用户选择文本框(input 或 textarea)中的一个或多个字符触发。
【注】上述这些事件直接添加在文本框。
【注】下述这两个事件必须添加在form这个标签上
submit 点击submit按钮触发
reset 点击reset按钮触发
focus 获取焦点
blur 失去焦点
代码示例（常用）
--------------------------文本框上的--------------------
不常用：
change 当文本框(input 或 textarea)内容改变且失去焦点后触发。
select 当用户选择文本框(input 或 textarea)中的一个或多个字符触发。
onchange
onselect
--------------------------文本框上的end--------------------
-------------------加在form表单上----------------------------
【注】下述这两个事件必须添加在form这个标签上
submit 点击submit按钮触发
reset 点击reset按钮触发
使用示例：
js
html
-------------------加在form表单上end----------------------------
