-
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
<input type="button" value="HTML事件" id="btn" onclick="showMes()">
<input type="button" value="DOM0事件" id="btn2">
<input type="button" value="DOM2事件" id="btn3">
<input type="button" value="IE事件" id="btn4">
</div>
<script type="text/javascript">
//HTML事件，将触发事件放在HTML里面。可以直接写，也可以封装。
function showMes(){
alert("hello world");
}
var d=document;
var btn2=d.getElementById("btn2"),
btn3=d.getElementById("btn3"),
btn4=d.getElementById("btn4");
//DOM0事件，在js里触发事件，便于修改；当触发的事件=null为删除该事件。
/*btn2.onclick=function(){
alert("这是通过DOM0级添加的事件");
}
btn2.onclick=null;*/ //null不加引号。删除事件后，点击按钮将不再跳出弹框。
//DOM2事件，处理事件addEventListener("其包括三个参数，触发、函数、false"),删除事件removeEventLiatener("同样包含三个参数")。
//注意：DOM2的触发事件不加“on”，且此方法不支持IE浏览器。
/*btn3.addEventListener("click",showMes,false);
btn3.removeEventListener("click",showMes,false);*/
//IE事件
//IE8以及更早浏览器只支持事件冒泡
//添加事件attachEvent("其包含两个参数，触发、函数（触发需要加‘on’）")，删除事件detachEvent("统一包含两个参数")。
//btn4.attachEvent("onclick",showMes);
//btn4.detachEvent("onclick",showMes);
//封装一个DOM0,DOM2,IE事件，谁行谁用上。
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]=handler;
}
}
}
eventutil.addhandler(btn3,'click',showMes);
eventutil.removehandler(btn3,'click',showMes);
</script>
</body>
</html>
查看全部 -
Dom键盘事件
查看全部 -
type 事件属性 target 事件目标 stopPropagation() 阻止事件冒泡 preventDefalut() 阻止事件默认行为
查看全部 -
node.addEventListener(eventName, function, eventType) node.removeEventListener(eventName, function, eventType)
查看全部 -
DOM0级事件：简单，易维护，跨浏览器
查看全部 -
hmtl 事件处理程序
优点：事件明确
缺点：不方便代码修改和维护
查看全部 -
事件冒泡，在冲突的时候要阻止
查看全部 -
dom0级 其实就是 先把元素取出来 然后在添加 funciton 事件
查看全部 -
DOM2级事件处理程序，addEventListener()和removeEventListener()有三个参数：要处理的事件名、作为事件处理程序的函数和布尔值。布尔值true：在捕获阶段调用事件处理程序。false：在冒泡阶段调用事件处理程序
查看全部 -
HTML事件处理程序最大的缺点：HTML和JS代码紧密的耦合在一起
查看全部 -
布尔值--false：表示在冒泡阶段调用事件处理程序(可以最大限度的兼容浏览器)，一般设为false；true表示在捕获阶段调用事件处理程序
查看全部 -
《JavaScript高级程序设计》中讲了，DOM0级对每个事件只支持一个事件处理程序，这也正是DOM2级相对DOM0级的好处，即DOM2级对每个事件支持多个事件处理程序。
查看全部 -
布尔值：true:捕获级 false：冒泡级
查看全部 -
function showMes() {
alert('Hello world!');
}
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');
btn2.onclick = function () {
alert('这是DOM0级事件');
}
btn2.onclick = null;
// //DOM2级事件
// btn3.addEventListener('click',showMes,false);
// btn3.removeEventListener('click',showMes,false);
// btn3.attachEvent('onclick',showMes);
// btn3.detachEvent('onclick',showMes);
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.detaachEvent('on' + type, handler);
} else {
element['on' + type] = handler;
}
}
}
eventUtil.addHandler(btn3, 'click', showMes);
eventUtil.removeHandler(btn3, 'click', showMes);
查看全部 -
function showMes() {
alert('Hello world!');
}
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');
btn2.onclick = function () {
alert('这是DOM0级事件');
}
btn2.onclick = null;
// //DOM2级事件
// btn3.addEventListener('click',showMes,false);
// btn3.removeEventListener('click',showMes,false);
// btn3.attachEvent('onclick',showMes);
// btn3.detachEvent('onclick',showMes);
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.detaachEvent('on' + type, handler);
} else {
element['on' + type] = handler;
}
}
}
eventUtil.addHandler(btn3, 'click', showMes);
eventUtil.removeHandler(btn3, 'click', showMes);
查看全部
举报