js事件流

来源：互联网发布：巧克力哪一款好吃知乎编辑：程序博客网时间：2024/06/06 04:36

1.HTML事件处理程序:

JS事件放在HTML里面。

<!DOCTYPE html><html><head><title>HTML事件处理程序</title></head><body><div><input type="button" value="按钮" onclick="show"></div><script type="text/javascript">function show(){alert('hello world')}</script></body></html>

2.DOM0级事件处理程序：

<!DOCTYPE html><html><head><title>DOM0级事件处理程序</title></head><body><div id="box"><input type="button" value="按钮" id="btn"></div><script type="text/javascript">var btn=document.getElementById('btn');btn.onclick=function(){alert('hello world')}btn.onclick=null;//取消onclick事件</script></body></html>

3.DOM2级事件处理程序

<!DOCTYPE html><html><head><title>DOM2级</title></head><body><div id="box"><input type="button" value="按钮" id="btn"></div><script type="text/javascript">//DOM2级事件定义了两个方法//用于处理指定和删除事件程序的操作//addEventListener()和removeEventListener()//接收三个参数：要处理的时间名、事件处理程序、布尔值（true:捕获阶段、false:冒泡阶段）//一个按钮上可以添加多个事件var btn=document.getElementById('btn');btn.addEventListener('click',function(){alert('hello world');},false);//删除事件的参数必须和添加事件的一样，btn.removeEventListener('click',function(){alert('hello world');},false);</script></body></html>

4.IE事件处理程序

<!DOCTYPE html><html><head><title>IE事件处理程序</title></head><body><div id="box"><input type="button" value="按钮" id="btn"></div><script type="text/javascript">//attachEvent()添加事件//detachEvent()删除事件//接收相同的两个参数：事件名称、事件程序var btn=document.getElementById('btn');btn.attachEvent('onclick',function(){alert('hello')});btn.detachEvent('onclick',function(){alert('hello')})</script></body></html>

5.跨浏览器事件处理程序

<!DOCTYPE html><html><head><title>跨浏览器事件处理</title></head><body><div id="box"><input type="button" value="按钮" id="btn"></div><script type="text/javascript">function show(){alert('hello');}var eventUtil={//添加事件addHandler:function(element,type,handler){if(element.addEventListener){addEventListener(type,handler,false);}else if(element.attachEvent){attachEvent('on'+type,handler);}else{element['on'+type]=handler;}}//删除事件removeHandler:function(element,type,handler){if(element.removeEventListener){removeEventListener(type,handler,false);}else if(element.attachEvent){detachEvent('on'+type,handler);}else{element['on'+type]=null;}}}eventUtil.addHandler(btn,'click',show);eventUtil.removeHandler(btn,'click',show);</script></body></html>

6.DOM事件对象

<!DOCTYPE html><html><head><title>DOM事件对象</title></head><body><div id="box"><input type="button" value="按钮" id="btn"><a href="http://www.baidu.com" id='go'>跳转</a></div><script type="text/javascript">//1.DOM的事件对象//(1)type属性 用于获取时间类型//(2)target属性 用户获取事件目标//(3)stopPropagation()阻止事件冒泡//(4)preventDefault()阻止默认行为var btn=document.getElementById('btn');var box=document.getElementById('box');var go=document.getElementById('go');btn.onclick=function(e){alert('btn')e.stopPropagation();};box.onclick=function(){alert('box')};go.onclick=function(e){e.stopPropagation();e.preventDefault();}</script></body></html>

7.IE事件对象

<!DOCTYPE html><html><head><title>IE事件对象</title></head><body><div id="box"><a href="" id="go">跳转</a></div><script type="text/javascript">//1.IE的事件对象//(1)type属性 用于获取时间类型//(2)srcElement属性 用户获取事件目标//(3)cancelBubble属性：true:阻止事件冒泡//(4)returnValue属性：flase:阻止默认行为window.onload=function(){var go=document.getElementById('go');var box=document.getElementById('box');eventUtil.addHandler(box,'click',function(){alert('111')})}var eventUtil={//添加事件addHandler:function(element,type,handler){if(element.addEventListener){addEventListener(type,handler,false);}else if(element.attachEvent){attachEvent('on'+type,handler);}else{element['on'+type]=handler;}},//删除事件removeHandler:function(element,type,handler){if(element.removeEventListener){removeEventListener(type,handler,false);}else if(element.attachEvent){detachEvent('on'+type,handler);}else{element['on'+type]=null;}},getEvent:function(event){return event?event:window.event;},getType:function(event){return event.type;},getTarget:function(){return event.target||event.srcElement},preventDefault:function(event){if(event.preventDefault{event.preventDefault()}else{event.returnValue=false;}},stopPropagation:function(){if(event.stopPropagation){event.stopPropagation();}else{event.cancelBubble:false;}}}</script></body></html>

阅读全文

0 0