浅谈 javascript 事件处理
事件处理
一、事件源:任何一个HTML元素(节点),body、div、button
二、事件:你的操作
鼠标:
click 单击
dblick 双击
oncontextmenu 文本菜单
<body oncontextmenu="return false">//禁止右键的程序
mouseover 放上
mouseout 离开
mousedown 按下
mouseup 抬起
mousemove 鼠标移动
键盘:
keypress 键盘事件
keyup 抬起
keydown 按下
文档:
load 加载
onload 是页面加载完成之后触发的事件
unload 关闭
breforeunload关闭之前
表单:
focus 焦点事件
blur 失去焦点
submit 提交事件
change 改变事件
其它:
scroll 滚动
selectstart 选择事件
三、事件处理程序
第一种:
格式:<tag on事件="事件处理程序" />
实例:
<script>
function show(){
var one=document.getElementById("one");
alert(one.innerText);
}
show();
</script>
<body>
<div id="one">
wwwwwwwwwwwwwwwww
</div>
<input type="button" onclick="show()" value="show">
第二种:
直接在javascript里边对象.on处理程序
<div id="two">
你好,脚本之家https://www.jb51.net
</div>
<script>
var one=document.getElementById("two");
one.onclick=function(){
this.style.backgroundColor="red";
}
</script>
第三种:
基本没什么人用
<script for="事件源ID" event="事件">事件处理程序</script>
<div id="th">
你好,脚本之家https://www.jb51.net
</div>
<script for="th" event="onclick">
var one=document.getElementById("th");
one.style.backgroundColor="red";
</script>
小伙伴们是否了解了javascript的事件处理了呢,有疑问就给我留言吧。
相关文章
JavaScript中操作字符串之localeCompare()方法的使用
这篇文章主要介绍了JavaScript中操作字符串之localeCompare()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06JavaScript中的this,call,apply使用及区别详解
本文结合基本javascript的权威书籍中的内容,根据自己的理解,通过相关示例向大家展示了javascript中this,call,apply使用及区别,非常的细致全面,希望大家能够喜欢。2016-01-01javascript SpiderMonkey中的函数序列化如何进行
JavaScript中如何进行函数序列化,函数序列化的作用是什么?本文将介绍SpiderMonkey中的函数序列化,有需要的朋友可以参考下2012-12-12Zero Clipboard js+swf实现的复制功能使用方法
如何使用 Zero Clipboard ,其实注意测试环境要在 web环境中。2010-03-03ECMAScript 5严格模式(Strict Mode)介绍
这篇文章主要介绍了ECMAScript 5严格模式(Strict Mode)介绍,本文讲解了如何启用严格模式、启用严格模式后对变量和属性、函数、with语句的影响,需要的朋友可以参考下2015-03-03
最新评论