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>