event事件的简单学习
2013-10-14 17:38
183 查看
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Event事件的简单学习</title>
</head>
<body>
<button id="btn">clickme</button>
<script>
(function(){
/**
* 事件对象event
*
* 1.在触发某个事件时，会产生一个event对象，该对象中包含了所有与事件有关的信息。
包括导致事件的元素，事件类型以及其他与特定事件相关的信息。所有浏览器都支持event对象，但是支持的方式不同。
*/
/**
* 非IE浏览器学习开始
*/
//demo①
/* var btn = document.getElementById("btn");
btn.onclick = function(){
//1.获取事件的类型 click
console.log(event.type);
//2.获取触发时间的目标元素 button
console.log(event.target);
alert(event.target);
};*/
//demo2②
function handler(event) {
switch(event.type) {
case "click" :
alert("click me");
break;
case "mouseover" :
event.target.style.backgroundColor = "red";
break;
case "mouseout" :
event.target.style.backgroundColor = "";
break;
}
}
var btn = document.getElementById("btn");
// btn.onclick = handler;
btn. = handler;
// btn. = handler;
})();
</script>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>preventDefault()的简单学习</title>
</head>
<body>
<a href="http://www.baidu.com" id="baidu">Baidu</a>
<script>
(function(){
/**
* 1.preventDefault()方法用于取消事件的特定行为。
* 只有cancelable属性为true的事件，才能取消。
*/
/*
document.getElementById("baidu").onclick = function(event){
//我们取消了a标签的默认跳转到百度的行为。
event.preventDefault();
};
*/
/**
* 2.stopPropagation()方法用于停止事件继续传播。
*/
document.getElementById("baidu").onclick = function(event){
//console.log("Button");
alert("Button");
//我们阻止了body的 // alert(event.stopPropagation):
event.stopPropagation();
};
document.body.onclick = function(){
//console.log("body");
alert("Body");
};
})();
</script>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="btn">clickme</button>
<script>
/**
* IE中事件对象
*/
document.getElementById("btn").onclick = function(){
//IE中event对象不能通过参数获得
var event = window.event;
//1.获取事件类型
alert(event.type);
//2.获取触发事件的目标元素，与target相同
// alert(event.srcElement);
//3.取消默认的行为
event.returnValue = false;
//4.取消事件冒泡
event.cancelBubble = true;
};
//当然我们换一种绑定事件的方式，event参数也是可以从参数中取得的。
document.getElementById("btn").attachEvent(" //event可以从参数中取得，也可以使用window.event
alert(event.srcElement);
});
</script>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="btn">clickme</button>
<script src="eventUtil.js"></script>
<script>
(function(){
function handler(event) {
alert("Hello,Button");
var e = EventUtil.getEvent(event);
var target = EventUtil.getTarget(e);
alert(target);
}
var btn = document.getElementById("btn");
EventUtil.addHandler(btn,"click",handler);
})();
</script>
</body>
</html>//夸浏览器的事件对象
var EventUtil = {
addHandler : function(element,type,handler) {
if(element.addEventListener) {
element.addEventListener(type,handler,false);
} else if(element.attachEvent) {
element.attachEvent("on"+type,handler);
} else {
element["on" + type] = handler;
}
},
removeHandler : function(element,type,handler) {
if(element.removeEventListener) {
element.removeEventListener(type,handler,false);
} else if(element.detachEvent) {
element.detachEvent("on" + type,handler);
} else {
element["on" + type] = null;
}
},
getEvent : function(event) {
return event ? event : window.event;
},
getTarget : function(event) {
if(event.target) {
return event.target;
} else {
return event.srcElement;
}
},
preventDefault : function(event) {
if(event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
stopPropagation : function(event) {
if(event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>onkeypress</title>
</head>
<body>
<input type="text" name="" id="txt">
<span id="myspan"></span>
<script src="eventUtil.js"></script>
<script>
(function(){
/**
* onkeydown : 按下键盘上的任意键时触发该事件
*
* onkeypress : 按下字符键和esc键时触发该事件
*
* onkeyup : 按下的键盘上的键向上弹起时触发该事件
*/
/*var txt = document.getElementById("txt");
var span = document.getElementById("myspan");
txt.onkeyup = function(event) {
var e = EventUtil.getEvent(event);
span.innerHTML = e.keyCode;
}*/
/**
* demo2
* 限制输入框中只能输入数字
* 并且可以阻止其复制
*/
var txt = document.getElementById("txt");
var span = document.getElementById("myspan");
txt.onkeydown = function(event) {
var e = EventUtil.getEvent(event);
span.innerHTML = e.keyCode;
if(!(e.keyCode >= 48 && e.keyCode <= 57) &&
e.keyCode != 8 && e.keyCode != 37 &&
e.keyCode != 39 && e.keyCode != 46 &&
!(e.keyCode >= 96 && e.keyCode <= 105)) {
console.log("1");
EventUtil.preventDefault(e);
console.log("2");
}
}
/**
* 屏蔽右键菜单
*/
txt.oncontextmenu = function(event) {
var e = EventUtil.getEvent(event);
EventUtil.preventDefault(e);
}
})();
</script>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义右键菜单</title>
</head>
<body>
<input type="text" name="" id="txt">
<ul id="menu" style="position:absolute;visibility:hidden;background-color:gary;">
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
</ul>
<script src="eventUtil.js"></script>
<script>
(function(){
var txt = document.getElementById("txt");
//txt.oncontextmenu = function(event) {
document.oncontextmenu = function(event) {
var e = EventUtil.getEvent(event);
EventUtil.preventDefault(e);
var pageX = e.pageX;
var pageY = e.pageY;
//IE
if(pageX == undefined) {
pageX = e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
}
if(pageY == undefined) {
pageY = e.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
}
var menu = document.getElementById("menu");
menu.style.left = pageX + "px";
menu.style.top = pageY + "px";
menu.style.visibility = "visible";
};
document.onclick = function() {
document.getElementById("menu").style.visibility = "hidden";
};
})();
</script>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>onbofeunload学习</title>
</head>
<body>
<input type="text" name="" id="username">
<script>
(function(){
var text = document.getElementById("username");
window.onbeforeunload = function() {
var v = text.value;
if(!v) {
return "您确定要放弃吗？？？";
}
};
})();
</script>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>表单的学习</title>
</head>
<body>
<form action="login.jsp" id="myform">
Username:<input type="text" name="" id="username">
<input type="submit" value="login" id="btn">
</form>
<script src="eventUtil.js"></script>
<script>
(function(){
/* var fm = document.getElementById("myform");
EventUtil.addHandler(fm,"submit",function(event){
//验证表单
var username = document.getElementById("username").value;
if(!username) {
alert("用户名必须填写！")
//阻止表单的提交
var e = EventUtil.getEvent(event);
EventUtil.preventDefault(e);
}*/
document.getElementById("btn").onclick = function() {
var username = document.getElementById("username").value;
if(!username) {
alert("you must input username!")
//阻止表单提交
return false; //此处如果用return 还是会提交的。
/**
return 是指程序结束，不往下运行。返回undefined
return flase是阻止标签元素的默认动作，
表单的话只有return false了才不会提交。
*/
}
};
})();
</script>
</body>
</html>可以下载例子：event事件简单学习
本文出自 “我的JAVA世界” 博客，请务必保留此出处http://hanchaohan.blog.51cto.com/2996417/1308839
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- c# 学习笔记之九 事件(event)的使用，一个简单例子揭示机理
- c#学习笔记之九 事件(event)的使用，一个简单的例子揭示其设计理念
- QDialog之屏蔽Esc键（简单深刻，要么重写keyPressEvent然后break忽略此事件，要么重写eventFilter然后return，都是为了忽略此事件）
- Selenium学习笔记6--EventFiringWebDriver网页事件监听
- C#委托、事件学习之（二）——简单按钮委托事件
- Yii2的深入学习--事件Event
- 【Java学习笔记】50：DocumentEvent事件的处理
- unity中input输入事件的简单学习
- 更简单的学习Android事件分发
- Qt学习: QPaintEvent和QMouseEvent的简单程序示例
- js中的event事件对象兼容型写法及事件流学习笔记
- 更简单的学习Android事件分发
- Unity3D 学习 - 通过C#脚本创建简单的按钮、响应事件
- event事件学习小节
- 学习笔记---Javascript事件Event、IE浏览器下的拖拽效果
- jquery学习笔记---jquery事件（$.event.special ）
- mysql 创建简单的事件event
- Silverlight学习笔记(七)-----Silverlight事件处理之鼠标事件实现简单拖拽
- JavaScript 事件之event.preventDefault()与event.stopPropagation()简单介绍
- 第五十节 java学习——动作事件（ActionEvent）