JS事件
通常鼠标或热键的动作我们称之为事件(Event)
通过 JS 事件,我们可以完成页面的指定特效。
一、JS事件驱动机制简述
警察抓小偷
事件源 小偷
事件 偷东西
监听器 警察
注册/绑定监听器 警察盯着小偷
事件源:专门产生事件的组件。
事件:由事件源所产生的动作或者事情。
监听器:专门处理事件源所产生的事件。
注册/绑定监听器:让监听器时刻监听事件源是否有指定事件产生,如果事件源产生指定事件,则调用监听器处理
二、常见的JS事件
1、点击事件(onclock)
由鼠标或热键点击元素组件时触发
<script>
function run1(){
alert("弹出")
}
</script>
<body>
<input type="text" value = "点击“ οnclick="run1()"/>
</body>
2、焦点事件
a、获取焦点事件(onfocus)
焦点:整个页面的注意力
默认一个正常页面最多一个焦点
例如:文本框中闪烁的小竖线
获取焦点事件:当元素组件获取焦点时触发
<script>
function run1(){
alert("获取焦点了")
}
</script>
<body>
<input type="text" onfocus="run1()"/>
</body>
b、失去焦点事件(nobler)
失去焦点时触发
<script>
function run1(){
alert("失去焦点了")
}
</script>
<body>
<input type="text" onblur="run1()"/>
</body>
3、域内容改变事件(onchange)
元素组件的值发生改变时触发
<select onchange="run1()">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select>
4、加载完毕事件(onload)
元素组件加载完毕时触发
<body onload="run1()">
</body>
5、表单提交事件(on submit)
表单的提交按钮被点击时触发
用于表单的校验——控制表单的提交
true 允许表单提交
false 阻止表单提交
<script>
function run1(){
....;
return true;
}
</script>
<form onsubmit="return run1()">
<input type="text" name="uname" /></form><br />
<input type="submit" value="提交" />
</form>
6、键位弹起事件(onkeyup)
在组件中输入某些内容时,键盘键位弹起时触发该事件
<input type="text" onkeyup="run1()"/>
7、常用鼠标事件
a、鼠标移入事件(onmouseover)
鼠标移入事件:鼠标移入某个元素组件时触发
<input type="text" onmouseover="run1()"/>
b、鼠标移出事件(onmouseout)
鼠标移出事件:鼠标移出某个元素组件时触发
<input type="text" onmouseout="run1()"/>
三、JS事件的两种绑定方式
1、元素事件句柄绑定
将事件以元素属性的方式写到标签内部,进而绑定对应函数
<input type="text" onmouseout="run1()"/>
//传这个文本框对象
<input type="text" onmouseout="run1(this)"/>
//绑定多个事件,绑定顺序就是执行顺序
<input type="text" onmouseout="run1(),run2(),run3()"/>
优点:
开发快捷
传参方便
可以绑定多个函数
缺点:
JS和HTML高度糅合在一起,不利于多部门的项目开发维护
2、DOM绑定方式
使用DOM属性方式绑定属性
<script>
window.onload=run1; //一次绑定一个函数,不能传参
window.onload=function(){ //匿名函数,可以绑定多个参数,可以传递参数
run1();
run2();
run3();
};
</script>
<script>
function run1(){
}
function run2(){
}
window.onload=function(){
//使用DOM方式获取到元素对象
var t1 = document.getElementById("t1");
//改变这个元素的属性
ti.onclick=function(){
run1();
run2();
}
}
</script>
<input type="text" id="t1"/>
优点:
HTML和JS代码完全分离
利用匿名函数可以解决缺点