设置事件
DOM1级设置事件的方法
1.
<input type = "text" onclick = "funcName()"/>
<script>
function funcName(){
alert();
}
</script>
2.
<input type = "text" onclick = "执行语句"/>
3.<input type = "text" id = "node"/>
<script>
var node = document.getElementById("node");
node.onclick = function funcName(){
alert();
}
</script>
取消事件: node.onclick = null;
DOM2设置事件的方式:
1.主流浏览器(IE9+)
node.addEventListener("事件类型",事件处理函数[,事件流类型]);
node.removeEventListener("事件类型",事件处理函数[,事件流类型]);
2.IE浏览器(IE6,7,8)
node.attachEvent("事件类型",事件处理函数);
node.detachEvent("事件类型",事件处理函数);
事件类型:就是具体事件,比如onclick
事件处理函数:可以是一个有名或者匿名函数;
事件流类型:true代表捕捉型,false代表冒泡型;
冒泡型:事件从子元素内部往外部父元素依次出发;
捕获型:事件从外部父元素开始出发,直到内部子元素事件;
事件对象:事件处理函数的第一个形参就是事件对象;
1.主流浏览器(IE9+)
onde.onclick = function(evt){//evt就是事件对象;
}
node.addEventListener("onclick",functionName(evt));
functionName = function(evt){//evt就是事件对象;
}
2.2.IE浏览器(IE6,7,8)
onde.onclick = function(){
var evt = window.event;//window.event;
}
所以为兼顾兼容性,一般写为
functionName = function(evt){//evt就是事件对象;
e = evt || window.event;
}
事件对象的作用:
1.获得事件相关信息,比如按键的值,鼠标的坐标
e.keyCode;
e.PageX;
2.阻止事件流"
e.stopPropagation();//主流浏览器;
window.event.cancelBubble = true;//(IE6,7,8),取消事件冒泡;
3.阻止浏览器默认行为,比如连接单击的提交,表单的提交;
event.preventDefault();//主流浏览器
event.returnValue = false;//(IE6,7,8),
return false;//dom1级事件设置下起作用;
DOM1级设置事件的方法
1.
<input type = "text" onclick = "funcName()"/>
<script>
function funcName(){
alert();
}
</script>
2.
<input type = "text" onclick = "执行语句"/>
3.<input type = "text" id = "node"/>
<script>
var node = document.getElementById("node");
node.onclick = function funcName(){
alert();
}
</script>
取消事件: node.onclick = null;
DOM2设置事件的方式:
1.主流浏览器(IE9+)
node.addEventListener("事件类型",事件处理函数[,事件流类型]);
node.removeEventListener("事件类型",事件处理函数[,事件流类型]);
2.IE浏览器(IE6,7,8)
node.attachEvent("事件类型",事件处理函数);
node.detachEvent("事件类型",事件处理函数);
事件类型:就是具体事件,比如onclick
事件处理函数:可以是一个有名或者匿名函数;
事件流类型:true代表捕捉型,false代表冒泡型;
冒泡型:事件从子元素内部往外部父元素依次出发;
捕获型:事件从外部父元素开始出发,直到内部子元素事件;
事件对象:事件处理函数的第一个形参就是事件对象;
1.主流浏览器(IE9+)
onde.onclick = function(evt){//evt就是事件对象;
}
node.addEventListener("onclick",functionName(evt));
functionName = function(evt){//evt就是事件对象;
}
2.2.IE浏览器(IE6,7,8)
onde.onclick = function(){
var evt = window.event;//window.event;
}
所以为兼顾兼容性,一般写为
functionName = function(evt){//evt就是事件对象;
e = evt || window.event;
}
事件对象的作用:
1.获得事件相关信息,比如按键的值,鼠标的坐标
e.keyCode;
e.PageX;
2.阻止事件流"
e.stopPropagation();//主流浏览器;
window.event.cancelBubble = true;//(IE6,7,8),取消事件冒泡;
3.阻止浏览器默认行为,比如连接单击的提交,表单的提交;
event.preventDefault();//主流浏览器
event.returnValue = false;//(IE6,7,8),
return false;//dom1级事件设置下起作用;