2018-09-26 Day27 - JS中的事件处理

一、JavaScript中的事件处理

1、在标签上使用onXXX属性来进行事件绑定（不推荐使用）

        按钮1
        

3、通过diamante获取标签然后使用addEventListener绑定事件（推荐）

方法一：内部JS

        按钮1
        
        

方法二：外部封装JS函数

   
       
       
   
   
       按钮1
       
       
       
   


//js文件
function bind(elem, event, fn){
   if (elem.addEventListener){
       elem.addEventListener(event, fn);
   }else{
       elem.attachEvent("on" + event, fn);
   }
}

function onbind(elem, event, fn){
   if (elem.removeEventListener){
       elem.removeEventListener(event, fn);
   }else{
       elem.detachShader("on" + event, fn);
   }
}

在事件回调函数中获取事件源（易错点）

    
        
        
    
    
        

            button1
            button2
            button3
            button4
            button5
        
        
        
        
    

二、事件回调函数和事件对象

绑定事件监听器的函数都需要传入事件的回调函数，程序员因为事件发生的时候要做什么，但是不知道什么时候发生，所以传入一个函数在将来发生事件的时候，由事件调用，这种就叫回调函数。

回调函数的第一个参数代表事件对象（封装了和事件相关的所有信息），对于低版本的IE，可以通过window.event来获取事件对象。

事件对象的属性和方法：
1、target / srcElement(IE) - 事件源（引发事件的标签）

2、阻止事件的默认行为，比如：a标签 --> preventDefault()

                    if (evt.preventDefault){
                        evt.preventDefault();
                    }else{
                        evt.returnValue = false; //兼容ie
                    }

3、事件的捕获和冒泡
事件冒泡 内 --> 外（子代-->父代）（默认 false）
事件捕获 外 --> 内 （true）

停止事件传播（捕获和冒泡） -- stopPropagation()
IE浏览器只有冒泡 -- cancelBubble = true

猜数字游戏（网页版）

效果：

三、JS中创建对象常用方法

1、

2、