JavaWeb - JS事件 -详细解说_综合

JS事件

1.简述

是什么：通常鼠标或热键的动作我们称之为事件(Event)，eg：点击，表单提交，值发生变化，鼠标移入，鼠标移出

作用：通过JS事件，我们可以完成页面的指定特效

2.JS事件驱动机制

页面上的特效我们可以理解在JS事件驱动机制下进行

JS事件驱动机制

事件源：专门产生事件的组件

事件：由事件源所产生的动作或事情

监听器：专门处理事件源产生的事件

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>事件驱动机制</title><script>function run(){alert("ziqi");}</script></head><body><!-- 事件源 ：按钮事件 ： 点击事件 onclick监听器 ：run（）方法注册监听器：onclick = "run()"--><input type="button" value="one" onclick="run()" /></body>
</html>

3.七种常见的JS事件

1.点击事件 ( onclick ) ：由鼠标或热键点击元素组件时触发

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script>function run1(){alert("弹出框");}</script></head><body>    <!-  文本域点击事件--><input type="text" onclick="run1()"/></body>
</html>

2.焦点事件

焦点：即整个页面的注意力，默认一个正常页面最多仅有一个焦点，通常焦点也能反映用户目前的关注点，或正在操作的组件

a. 获取焦点事件 ( onfocus ) ：当元素组件获取焦点时触发

b.失去焦点事件 ( onblur ) ：元素组件失去焦点时触发

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script>function run1(){alert("获取焦点了");}</script></head><body><!--文本框 获取焦点时  失去焦点时  将onfocus 改为 onblur 弹出一个对话框--><input type="text" onfocus="run1()"/></body>
</html>

3.域内容改变事件 ( onchange ) ：元素组件的值发生改变时触发元素组件的值发生改变时触发

<body><!-- 当选择框 值发生改变时，弹出一个对话框--><select onchange="run1()"><option value="bj">北京</option><option value="sh">上海</option><option value="gz">广州</option></select></body>

4.加载完毕事件 ( onload ) ：元素组件加载完毕时触发

意义：获取元素对象，保证元素对象先加载，建议是把获取元素对象代码放在最后，有了加载完毕事件就可以放任意位置，只要在元素上面添加加载完毕事件，先加载完毕再执行即可

	<!--在body标签加载完毕后， 弹出一个对话框，对话框必须等标签加载完后才能加载--><body onload="run1()">先加载内容</body>

5.表单提交事件 ( onsubmit ) ：表单提交按钮被点击时触发

注意：该事件需要返回Boolean类型的值来执行，提交/阻止表单数据的操作 -事件的到true 提交表单数据 -事件得到false 阻止表单数据提交

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script>function run1(){alert("表单的提交按钮被点击了");<!-- 可以用于表单校验 -->return false;}</script></head><body><!--表单提交按钮被点击----  执行run1onsubmit   用于表单的校验该事件也能够控制表单的提交     true   允许表单提交false   阻止表单提交  -点击提交按钮无法将表单信息提交上去--><form onsubmit="return run1()"><input type="text" name="uname" /><br /><input type="submit" value="提交" /></form></body>
</html>

6.键位弹起事件 ( onkeyup ) ：键位弹起事件:在组件中输入某些内容时，键盘键位弹起时触发该事件

可以用于输入校验

<body><input type="text" onkeyup="run1()"/></body>

7. 常用鼠标事件

a.鼠标移入事件 ( onmouseover ) ：鼠标移入事件:鼠标移入某个元素组件时触发

b.鼠标移出事件 (onmouseout) ：鼠标移出事件:鼠标移出某个元素组件时触发

	<body><!--鼠标移入文本框，  弹出一个对话框--><input type="text"  onmouseover="run1()"/></body>

4.. 两种JS事件绑定方式

1.元素句柄绑定方式

该事件以元素属性的方式写到标签内部，进而绑定对应函数

优点： 1，开发便捷； 2，传参方便； 3.可以绑定多个函数；

缺点： JS与HTML代码高度糅合在一起，不利于多部门的项目开发维护

绑定一个函数

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script>function run1(){alert("run1");}function run2(str){alert(str);}function run3(obj){alert(obj.value);}</script></head><body><!-- 绑定一个无参函数 --><input type="text" value="1111" onclick="run1()"/><br /><!-- 绑定一个有参函数  ，参数就是一个字符串 --><input type="text" value="2222" onclick="run2('你好啊')"/><br /><!-- 绑定一个有参函数  ，参数就是一个元素对象 --><input type="text" value="3333" onclick="run3(this)"/><br /></body>
</html>

绑定多个函数

	<body><!-- 绑定多个函数 ， 函数的排序就是执行顺序 --><input type="text" value="1111" onclick="run1(),run2(),run3()"/><br /></body>

2.DOM绑定方式 ( 推荐使用 )

使用DOM属性方式绑定事件

优点：使得HTML代码和JS代码完全分离

缺点：1，不能传递参数解决：匿名函数解决

2.一个JS事件只能绑定一个函数，匿名函数校验绑定多个函数

第一种，普通绑定方式

DOM绑定方式对象.事件属性一次只能绑定一个函数，不能传递参数 window.οnlοad=run1;
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script>function run1(){alert("run1");}window.onload=run1；</script></head><body><input type="text" id="t1"/></body>
</html>

第二种，匿名函数绑定方式

DOM绑定方式匿名函数可以绑定多个函数，可以传递参数
window.οnlοad=function(){
run1();
};

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script>function run1(){alert("run1");}function run2(){alert("run2");}//当页面加载完毕时，  元素对象已经加载到内存中window.onload=function(){//使用DOM方式获取到元素对象var t1=document.getElementById("t1");t1.onclick=function(){run1();run2();};};</script></head><body><!--为文本框  onclick事件绑定上两个函数，run1和run2--><input type="text" id="t1"/></body>
</html>

JavaWeb - JS事件 -详细解说