Javascript事件实例详解
document是位于html标签之上的，可以说是权力最大的。下面的实例当你单击页面上的任何位置都会弹出“a”,正是运用了document的特性。
代码如下:
<script>
document.onclick=function(){
alert('a');
};
</script>
获取鼠标位置clientX,clientY---注意这里仅仅只是可视区的鼠标位置
代码如下:
<script>
document.onclick=function(ev){
if(ev)
{
alert(ev.clientX+','+ev.clientY);
}
else{
alert(event.clientX+','+event.clentY);
};
};
</script>
<script>
document.onclick=function(ev){
/* if(ev)
{
alert(ev.clientX+','+ev.clientY);
}
else{
alert(event.clientX+','+event.clentY);
};
};*/
var oEvent=ev||event;
alert(oEvent.clientX+','+oEvent.clientY);
};
</script>
事件冒泡---一层一层叠加的元素在一起，形成事件冒泡，比如下面的例子：document的最大范围影响了div的响应。
代码如下:
<script>
window.onload=function(){
var obtn=document.getElementById('btn1');
var odiv=document.getElementById('div1');
obtn.onclick=function(ev){
var oEvent=ev||event;
odiv.style.display='block';
oEvent.cancelBubble=true;//清除冒泡
};
document.onclick=function(){
odiv.style.display='none';
};
};
</script>
</head>
<body>
<input type="button" value="显示" id="btn1"/>
<div id="div1" style="width:100px;height:150px;background:#ccc;"></div>
</body>
<title>鼠标移动</title>
<script>
window.onmousemove=function(ev){
var oEvent=ev||event;
var odiv=document.getElementById('div1');
odiv.style.left=oEvent.clientX+'px';
odiv.style.top=oEvent.clientY+'px';
};
</script>
</head>
<body>
<div id="div1" style="width:50px;height:50px;background:blue;position:absolute;"></div>
</body>
键盘改变位置和方向---通过keycode获取键盘的键值来执行相应的操作。
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:#CCC; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
document.onkeydown=function (ev)
{
var oEvent=ev||event;
var oDiv=document.getElementById('div1');
//← 37
//右 39
if(oEvent.keyCode==37)
{
oDiv.style.left=oDiv.offsetLeft-10+'px';
}
else if(oEvent.keyCode==39)
{
oDiv.style.left=oDiv.offsetLeft+10+'px';
}
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
div {width:10px; height:10px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
var aDiv=document.getElementsByTagName('div');
var i=0;
document.onmousemove=function (ev)
{
var oEvent=ev||event;
for(i=aDiv.length-1;i>0;i--)
{
aDiv[i].style.left=aDiv[i-1].style.left;
aDiv[i].style.top=aDiv[i-1].style.top;
}
aDiv[0].style.left=oEvent.clientX+'px';
aDiv[0].style.top=oEvent.clientY+'px';
};
};
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
<script>
document.onkeydown=function (ev)
{
var oEvent=ev||event;
alert(oEvent.keyCode);
};
</script>
ctrlKey---可以通过ctrl+enter组合键来提交内容
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
var oTxt1=document.getElementById('txt1');
var oTxt2=document.getElementById('txt2');
oBtn.onclick=function ()
{
oTxt1.value+=oTxt2.value+'\n';
oTxt2.value='';
};
oTxt2.onkeydown=function (ev)
{
var oEvent=ev||event;
if(oEvent.ctrlKey && oEvent.keyCode==13)
{
oTxt1.value+=oTxt2.value+'\n';
oTxt2.value='';
}
};
};
</script>
</head>
<body>
<textarea id="txt1" rows="10" cols="40"></textarea><br />
<input id="txt2" type="text" />
<input id="btn1" type="button" value="留言" />
</body>
</html>
相关推荐
-
javascript中的事件代理初探
事件在javascript中一直是最强大的对象之一.javascript提供了addEventListener和attachEvent两个方法来为DOM节点绑定事件,jquery作了进一步封装,提供了兼容各个浏览器的bind方法.现在来看,这种传统的事件绑定方式存在着以下不足: 1.可能需要绑定很多的EventHander. 假如页面中某个表有100行,现在必须为每一行绑定一个click事件.那么就必须绑定100个EventHandler,这对页面性能来说有着极大的负担,因为需要创建更多的内存来
-
分享JavaScript获取网页关闭与取消关闭的事件
在做Web开发时,我们经常用到页面关闭事件onbeforeunload,可以给用户一个选择放弃关闭的机会,就比如这个博客编辑器.如果用户选择了离开,那么onunload事件自然会触发:但若用户选择了取消,又该如何检测呢? 我们假定一个页面离开取消事件,叫做onunloadcancel.显然,这个事件应触发在用户按下对话框的取消按钮之后.但关闭提示对话框的触发流程并不是那么简单.我们先来回顾下这个过程: 复制代码 代码如下: window.onbeforeunload = function(){
-
javascript计时器事件使用详解
在 JavaScritp 中使用计时事件是很容易的,两个关键方法是: setTimeout()未来的某时执行代码 clearTimeout()取消setTimeout()setTimeout()语法 复制代码 代码如下: var t=setTimeout("javascript语句",毫秒) setTimeout() 方法会返回某个值.在上面的语句中,值被储存在名为 t 的变量中.假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它.setTimeout() 的第
-
javascript简单事件处理和with用法介绍
这一期介绍一些简单的事件处理: 1.鼠标点击 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Gene
-
javascript页面加载完执行事件代码
复制代码 代码如下: <script type="text/javascript" language="JavaScript"> //: 判断网页是否加载完成 document.onreadystatechange = function () { if(document.readyState=="complete") {
-
javaScript 页面自动加载事件详解
方法1: 复制代码 代码如下: Window.onload=function(){ Var name=document.getElementById("name").val();//加载HTML,并且加载外部所有所有的引用文件(图片,css样式,js等)} 方法2:需要引入Jquery的 .js文件 复制代码 代码如下: $(document).ready(function(){ alert("JQuery的第一个入门案例");//加载HTML,
-
java随机事件分发器示例
以下需求:20%的概率去执行方法A,1%的概率去执行方法B,29%的概率去执行方法C,50%的概率去执行方法D 如果用if随机数之类的语句去判断的话,可能会写的很乱,我写了一个随机分发器,可以规范该操作.使用该分发器后的代码如下: 复制代码 代码如下: //创建一个分发器RandomDispatcher randomDispatcher = new RandomDispatcher(); //设置每种事件的概率,注意,概率之和不一定是100哦randomDispatcher.put(20, 1)
-
JavaScript加强之自定义event事件
复制代码 代码如下: $().ready(function(){ for(var i=0;i<5;i++){ /** * 这种写法不专业,如果处于循环里,就会注册5次事件,点击后alert5次 */ // $("#aa").click(function(){ // alert("hahahaha"); // }); /** * 这种写法才是专业的,在注册一次点击事件前,先解绑点击事件,然后再绑定一个点击事件,所以到最后只绑定了一次点击事件 */ $("
-
jQuery javaScript捕获回车事件(示例代码)
复制代码 代码如下: function getEnter(obj,evt){if(evt.keyCode == 13){var target = $(":input").not(":radio,select,:reset");for(var i=0;i<target.length;i++){if(target.get(i).name==obj.name){i++;if(i==target.length-1){$(target.get(i)).focus();/
-
javascript 按键事件(兼容各浏览器)
第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown.onkeypress和onkeyup这三个事件句柄.一个典型的按键会产生所有这三种事件,依次是keydown,keypress,然后是按键释放时候的keyup. 在这3种事件类型中,keydown和keyup比较底层,而keypress比较高级.这里所谓的高级是指,当用户按下shift + 1时,keypress是对这个按键事件进行解析后
-
JavaScript在for循环中绑定事件解决事件参数不同的情况
有时候要对响应一堆相似的事件,但是每个事件的参数都不同,一开始还以为挺简单的,用个for循环不就得了,结果发现,额,都是使用了最后一个参数... 上网查资料!!!结果大神说用闭包解决 代码: 复制代码 代码如下: for(var i=0;i<10;i++){ btns[i].onclick=(function(i){ return function(){alert(i)} })(i) } 大概原因是直接用btns[i].onclick=function(){alert(i)}时,JavaScri
-
javascript使用onclick事件改变选中行的颜色
html页面的table 中一行一行的显示当然 div也行 可设置在鼠标放上去时改变其颜色 部分代码如下 复制代码 代码如下: <script type="text/javascript">var currentActiveRow; //当前活动行 //改变选中行的颜色function changeActiveRow(obj) { if (currentActiveRow) { currentActiveRow.style.backgroundColor
-
IE8的JavaScript点击事件(onclick)不兼容的解决方法
博客园闪存分页是用JavaScript生成的,今天发现在IE8下点击页码不能翻页,翻页操作是在当前页码的onclick事件中进行的. 开始代码是这么写的: 复制代码 代码如下: var a = document.createElement("a");a.setAttribute("onclick", this.ClickFunctionName + "(" + pageIndex + ");Pager.SetCurrent("
-
javascript阻止scroll事件多次执行的思路及实现
写这个主要是为了解决一些常见网页特效在js解析时预期与效果不同. 原始代码 : 复制代码 代码如下: //测试代码 window.onscroll = function(){ alert("haha"); } 装在script标签内 鼠标滑动之后一直惦记 提示框才可以,所以很不方便 , 而且 目的是鼠标滑动后 只执行一次事件,这个效果显然和实际不符合吧. //代码改进--增加延时器. 既然scroll事件是一个连续触发事件,那我设置一个延迟器,在用户滑动鼠标的时间后执行该函数 ,书不是
-
javascript阻止浏览器后退事件防止误操作清空表单
由于客户大多数是不懂电脑的大菜鸟.所以误操作比较多,有时没有选中文本框,然后不小心按了退格之后,刚刚辛苦填好的表单就什么也后退的没有了.网上查了好多资料,然后整合了一下.分享给大家.也希望酸奶姐姐来看看我的第一篇技术博客.呵呵(别介意我提到了你哦.).废话不多说.上源码. 复制代码 代码如下: $(function(){ //处理键盘事件 禁止后退键(Backspace)密码或单行.多行文本框除外 function banBackSpace(e){ var ev = e || window.ev
-
java开发gui教程之jframe监听窗体大小变化事件和jframe创建窗体
复制代码 代码如下: import java.awt.event.WindowEvent;import java.awt.event.WindowStateListener; import javax.swing.JFrame; public class WinFrame extends JFrame { public WinFrame(){ this.setName("Window 窗口状态"); this.setSize(300,300); this.setDefaultCl
-
JavaScript的事件绑定(方便不支持js的时候)
首先,比如我们使用JavaScript来加强我们的网页,但是我们要考虑到,如果用户的浏览器不支持JavaScript,或者用户disable了JavaScript的功能,那我们的网页能不能正常显示呢?例如下面的例子, 复制代码 代码如下: <a href = "#" onclick = "popUp('http://www.jb51.net') ; return false;"> 其中popUp这个函数是自定义的,新打开一个窗口来限制URL中的网页.但是
-
javascript事件函数中获得事件源的两种不错方法
在javascript的事件响应中,许多情况我们需要获得事件源对象来对其属性进行更改,比如更改img的src属性.在事件响应函数中获得事件源的方法有如下两种: 第一种: 直接把作为一个参数传入.例如 复制代码 代码如下: <div id="myid" onclick="show(this);">text</div> <script type="text/javascript"> function show(ob