首页 > 代码库 > dow

dow

2024-09-23 07:14:24   215人阅读

事件就是文档或浏览器窗口中发生的一些特定的交互瞬间
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="http://www.mamicode.com/1">1</option>
<option value="http://www.mamicode.com/2">2</option>
<option value="http://www.mamicode.com/3">3</option>
<option value="http://www.mamicode.com/4">4</option>
<option value="http://www.mamicode.com/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/>
&nbsp;密码：<input type="text"><br/><br/>
<input type="submit" value="http://www.mamicode.com/按钮" 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="http://www.mamicode.com/弹出” 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="http://www.mamicode.com/全选">
<script type="text/javascript">
//获取按钮，获取html属性
var btn=document.getElementById("btn")
btn.onclick=function(){
if(this.valuehttp://www.mamicode.com/=="全选"){
this.value="http://www.mamicode.com/反选";
}else{
this.value="http://www.mamicode.com/全选";
}
}
</script>
</body>
onload
 
 
键盘事件与keyCode属性
onkeydown：在用户按下一个键盘按键时发生
onkeypress：在键盘按键被按下并释放一个键时发生
onkeyup：在键盘按键被松开时发生
keyCode：返回onkeypress、onkeydown或onkeyup事件触发的键的字符代码，配合键盘事件使用。

dow


联系
我们