码迷,mamicode.com
首页 > 其他好文 > 详细

dow

时间:2017-05-18 23:06:47      阅读:313      评论:0      收藏:0      [点我收藏+]

标签:鼠标事件   下拉   属性   asc   sub   res   ucs   inpu   点击   

事件就是文档或浏览器窗口中发生的一些特定的交互瞬间
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/>
&nbsp;密码:<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事件触发的键的字符代码,配合键盘事件使用。

dow

标签:鼠标事件   下拉   属性   asc   sub   res   ucs   inpu   点击   

原文地址:http://www.cnblogs.com/3x2-1/p/6876011.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!