1. 事件默认行为及阻止方式
1.1 浏览器的默认行为
JavaScript事件本身所具有的属性,例如a标签的跳转,Submit按钮的提交,右键菜单,文本框的输入等。
1.2 阻止默认行为的方式
event.preventDefault(); event.returnValue = false; return false;
//IE低版本和其他版本都支持return false,而其他两种IE低版本不支持。
<a href="">click here.</a>
<script type="text/javascript">
var aLink = document.getElementsByTagName("a")[0];
aLink.onclick = function(e){
var evt = e || event;
console.log("aaa");
//return false; //1
//evt.preventDefault(); //2
evt.returnValue = false; //3
}
</script>
自定义右键菜单 oncontextmenu
ul{ /*菜单的css样式*/
display: none;
position: absolute;
top: 0;
left: 0;
}
var oUl = document.getElementsByTagName("ul")[0];
document.oncontextmenu = function(e){ //右键点哪里,在哪里出现菜单
var evt = e || event;
oUl.style.display = "block";
oUl.style.left = evt.clientX + "px";
oUl.style.top = evt.clientY + "px";
}
小例子来练手:
// 文本框只能输入数字
var aInput = document.getElementsByTagName("input")[0];
aInput.onkeydown = function(e){
var evt = e || event;
//console.log(evt.keyCode);//48-57
if(evt.keyCode < 48 || evt.keyCode > 57){
return false;
}
}
2. DOM2级事件处理程序
DOM2级事件处理程序可以为一个元素添加多个事件处理程序。其定义了两个方法用于添加和删除事件处理程序:addEventListener()和removeEventListener()。
添加事件监听器:addEventListener(事件名,处理函数,布尔值)
移除事件监听器:removeEventListener(事件名,处理函数,布尔值)
注意:事件名不带on,处理函数为函数指针,布尔值代表冒泡或捕获。现在的版本可以省略第三个参数,默认值为false
这个布尔值为true,在捕获阶段处理事件,为false,在冒泡阶段处理事件,默认为false。
var outer = document.getElementById("outer");
outer.addEventListener("click",foo,true); //添加事件监听器
outer.removeEventListener("click",foo,true); //移除
function foo(){
console.log("aaa");
}
//通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除;移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除,需另外定义一个函数
*普通时间不存在兼容问题,而DOM2级事件存在兼容性问题,IE低版本对象不支持“addEventListener”属性或方法,
IE下的事件监听器:attachEvent(事件名,处理函数),detachEvent(事件名,处理函数) 注意:事件名带on。
道高一尺,魔高一丈,我们可以自己封装一个函数解决兼容问题。
function foo(){
console.log("aaa");
}
function addEvent(obj){
if(obj.addEventListener){
return obj.addEventListener("click",foo);
}else{
return obj.attachEvent("onclick",foo);
}
}
addEvent(outer);
3. 事件委托机制
利用事件冒泡的原理,把本应添加给某元素上的事件委托给他的父级(外层)。
实现拖拽效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
100px;
height: 100px;
background: aquamarine;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
var oDiv = document.getElementsByTagName("div")[0];
oDiv.onmousedown = function(e){
var evt = e || event;
_left = evt.offsetX;
_top = evt.offsetY;
document.onmousemove = function(e){
var evt = e || event;
x = evt.clientX - _left;
y = evt.clientY - _top;
if(x<=0){x=0;}
if(x >= document.documentElement.clientWidth - oDiv.offsetWidth){
x = document.documentElement.clientWidth - oDiv.offsetWidth;
}
if(y >= document.documentElement.clientHeight - oDiv.offsetHeight){
y = document.documentElement.clientHeight - oDiv.offsetHeight;
}
if(y<=0){y=0;}
oDiv.style.left = x + "px";
oDiv.style.top = y + "px";
}
document.onmouseup = function(){
document.onmousemove = null;
}
}
</script>
</body>
</html>