16.事件绑定

作者: 若愚同学 | 来源:发表于2018-06-12 22:12 被阅读0次

16.事件绑定
JS 事件监听、事件委托2018-07-10
JS-事件绑定
事件绑定、事件冒泡与捕获
025 JS事件
IE的attachEvent
JavaScript事件
js事件
绑定事件自定义事件事件冒泡
jQuery事件

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
    
    <!-- 方式1:在标签上使用onclick属性配置 -->
    <button onclick="click1(event,this)" id="btn1">方式1</button>
    
    <!-- 方式2:在js代码中,使用 "元素.onclick=响应函数"进行事件监听 -->
    <button id="btn2">方式2</button>
    
    <!-- 方式3: 使用方法来完成对元素的监听 -->
    <button id="btn3">方式3</button>
</body>
</html>

JS:

//方式1:不能重复绑定
function click1(event,srcEl){
    //alert("被点了");
    console.log(event);
    console.log(srcEl);
}


//方式2:不能重复绑定
/*window.onload = function(){
    //获取到数据源
    var btn2 = document.getElementById("btn2");
    
    //绑定点击事件
    btn2.onclick = function(event){
        //event为非IE浏览器和IE11以上才能使用的方式
        //window.event为IE11以下使用的方式
        console.log(event||window.event);
        console.log(this);
    };
};*/

//方式 3:使用方法来完成对元素的监听,可以实现多事件绑定
window.onload = function(){
    var btn = document.getElementById("btn3");
    
    //IE添加的方式.一定要有on才可以
    /*btn.attachEvent("onclick", function(event){
        console.log(event);
        console.log("方式3-->IE");
    });*/
    
    //非IE添加的方式.
    /*btn.addEventListener("click", function(event){
        console.log(event);
        console.log("方式3-->非IE");
    });*/
    
    //适配方法
    addEvent(btn,"click",function(){
        console.log("方式3-->非IE");
    });
    
};
//适配IE和非IE 参数1:事件源   参数2:事件类型(IE事件加on,非IE事件不加)
function addEvent(srcEl,eventType,fn){
    if(srcEl.attachEvent){//如果个属性有值,使用IE方式
        srcEl.attachEvent("on"+eventType,fn);
    }else{//如果没有值,使用非IE方式
        srcEl.addEventListener(eventType,fn);
    }
}