事件就是文档或浏览器窗口中发生的一些特定的交互瞬间
2、掌握HTML事件
3、掌握DOM0级事件
4、掌握常用的鼠标与键盘事件
5、掌握this的指向
交互是用事件来形成的。
绑定事件的方法2,3
语法:<tag 事件=“执行脚本”></tag>
功能:在HTML元素上绑定事件。
说明:执行脚本可以是一个函数的调用。或者js
就是hmtl事件
事件的执行脚本
(1)ele.onclick = function (){ 执行脚本};
(2)ele.onclick = fn;function fn(){ 执行脚本} ;
<body> 类似年月日的选择器
<select id="sel">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<script type="text/javascript">
var sel=document.getElementById("sel");
sel.onchange=function(){
console.log(this.value) //选择几打印几
}
</script>
</body> //当下拉,选择相应的数字时,系统其实也在打印相应的数字
分析:当下拉列表的选项发生变化时,触发onchange事件,控制台打印下拉列表的value值
<head>
<style type="text/css">
#btn{width:100px;margin-left:65px;}
</style>
</head>
<body>
<form id="form">
用户名:<input type="text"><br/><br/>
密码:<input type="text"><br/><br/>
<input type="submit" value="按钮" id="btn">
</form>
<script type="text/javascript">
var btn=document.getElementById("btn");
var form=document.getElementById("form");
form.onsubmit=function(){
alert("提交成功");}
</script>
</body>
分析:onsubmit事件绑定在<form>标签上,当点击“提交”时,触发onsubmit事件,执行
事件的执行代码
按钮,按下点击onclick《on 科力可》,执行脚本是弹窗
点击按钮,调用函数,鼠标滑变红色,鼠离变成蓝色
<body>
<input type="button" value="弹出” onclick="alert"(" 我是按钮”)">
<!--鼠标划过按钮时调用mouseoverFn的函数-->
<div id
简写:(this,“参数传递”)鼠滑绿,鼠离灰
关于this指向在事件触发的函数中,this是对该DOM对象的引用
事情this绑定在什么样的Dom上,就被什么样的Dom引用。
鼠标事件
onload:页面加载时触发 页加《on 咯的》
onclick:鼠标点击时触发 点击《on 科力可》
onmouseover:鼠标滑过时触发 鼠滑《on 摸s oe》
onmouseout:鼠标离开时触发 鼠离《on 摸s ot》
onfoucs:获得焦点时触发 主要用于表单中
onblur:失去焦点时触发 主要用于表单中
onchange:域的内容改变时发生 主要用在<select>标签
onsubmit:表单中的确认按钮被点击时发生 主要用在<form>标签
onmousedown:鼠标按钮在元素上按下时触发
onmousemove:在鼠标指针移动时发生
onmouseup:在元素上松开鼠标按钮时触发
onresize:当调整浏览器窗口的大小时触发 主要用于window上
onscroll:拖动滚动条滚动时触发
多个按钮,下多个快捷绑定事件的方法。
DOM0级事件
语法:ele.事件=执行脚本
功能:在DOM对象上绑定事件
说明:执行脚本可以是一个匿名函数,也可以是一个函数的调用。
步骤1先通过DOM获取HTML元素
2 .(获取html元素).事件=执行脚本
脚本可以是函数,或者js
获取html元素。
函数的调用,判断是否锁定,以及状态
第二种判断方法
也可以掉自定义函数
点击全选变成反选:
<body>
<input id="btn" type="button" value="全选">
<script type="text/javascript">
//获取按钮,获取html属性
var btn=document.getElementById("btn")
btn.onclick=function(){
if(this.value=="全选"){
this.value="反选";
}else{
this.value="全选";
}
}
</script>
</body>
onload
键盘事件与keyCode属性
onkeydown:在用户按下一个键盘按键时发生
onkeypress:在键盘按键被按下并释放一个键时发生
onkeyup:在键盘按键被松开时发生
keyCode:返回onkeypress、onkeydown或onkeyup事件触发的键的字符代码,配合键盘事件使用。