行内绑定

即html标签绑定：属性赋值，这个在该元素的properties属性中可以查到，也可以在事件监听中看到
语法：<标签属性列表事件=”事件的处理程序” />
如：
缺点：html代码和js代码严重耦合

<body>
    <button onclick="show()" id="btn1" onclick="print()">html标签绑定</button>
    <button onclick="show();print()" id="btn2">绑定2 </button>
</body>
<script>
    function show(){
        console.log("show");

    }
    function print(){
        var a=document.getElementById("btn2");
        console.log(a.innerHTML);
    }
</script>

点击第一个按钮只会触发show函数，不会触发print函数
点击第二个按钮会触发两个函数

动态绑定：在js代码中绑定

dom对象.事件=事件的处理程序

我们可以在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等

 <button id="btn3">wawawa</button>
var btn3=document.getElementById("btn3");
    btn3.onclick=function(){
        console.log("www");
    }

行内绑定和动态绑定的区别

this指向不同
1. 行内绑定时，函数内部的this指向window
2. 动态绑定时，函数内部的this指向当前正在操作的dom元素

事件监听：只可以在该元素的事件监听中看到

事件监听分别定义了3个事件阶段：捕获阶段，目标阶段，冒泡阶段
addListener有一个最后的可选的参数，指定事件在捕获还是冒泡阶段执行。true为捕获，false为冒泡，默认false

    document.getElementById("btn4").addEventListener("click",show);
    document.getElementById("btn4").addEventListener("click",print);
    document.getElementById("btn4").removeEventListener("click");

但这种方法在ie下是行不通的，ie有自己的事件处理程序方法attachEvent()和detachEvent()，事实上和addEventListener是一样的，但只有两个参数，默认为冒泡形式

/* html */
<button id="btn">ClickMe</button>

/* js */
var oBtn = document.getElementById('btn');
// 事件处理函数
function evtFn(){ 
    console.log(this);
}
// 添加句柄
oBtn.attachEvent('onclick',evtFn);

// 移除句柄
oBtn.detachEvent('onclick',evtFn);

js之事件绑定

行内绑定

动态绑定：在js代码中绑定

行内绑定和动态绑定的区别

事件监听：只可以在该元素的事件监听中看到