DOM元素绑定js的三种方式

1.在html标签中直接绑定

在DOM元素里面绑定 使用on+事件类型 = function

<input type="button" value="点我吧" onclick="alert('已执行')">

2.在js里面绑定

在js代码中获取元素，使用点语法注册

<div id="box">我是div盒子</div>
<script>
    var box = document.getElementById("box")
	box.onclick = function(){
    	alert("已执行")
	}
</script>

缺点 ： 不能重复注册同名事件，否则就会覆盖，默认冒泡

3.使用事件监听的方式进行注册

使用addEventListener来注册事件

• @param type ：事件类型 不要on（click mouseover）
• @param listener：事件处理函数
• @param 布尔类型 默认是false ，不传时false （false表示冒泡 true表示捕获）

<div id="box">点我吧</div>
<script>
    function fun(){
                console.log(this);
                alert("已执行1");
            }
            box.addEventListener("click",fun,false)
            box.addEventListener("click",function(){
                alert("已执行2");
            })
</script>

IE8注册事件 不支持addEventListener 使用attachEvent()
attachEvent只有两个参数

• @param type :事件类型 这里必须加on(onclick)
• @param listener：事件处理函数

<input type="button" value="点我吧" id = "btn">
<script>
	var btn = document.getElementById("btn");
	function fun() {
            console.log(this);
            alert("已执行");
        }
     btn.attachEvent("onclick", fun);
</script>

谷歌火狐和IE8的兼容

function addEvent(ele, type, fun) { // 这里默认不加on
            if(ele.addEventListener) {  // 谷歌火狐
                ele.addEventListener(type, fun )
            } else if(ele.attachEvent) { // IE8及以下的
                ele.attachEvent("on" + type, fun)
            } else {  // 其他浏览器
                ele["on" + type] = fun;
            }
        }