js事件流
阿新 • • 發佈:2017-10-18
事件冒泡 指定 cancel util detach name prevent sdn details
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事件處理程序
[html] view plain copy
- <!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>
js事件流