<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.redDiv{
width: 300px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div class="redDiv"></div>
</body>
<script type="text/javascript">
var redDiv=document.querySelector(".redDiv");
//绑定事件
redDiv.onclick = function () {
console.log("111");
}
redDiv.onclick = function () {
console.log("222");
}
//绑定事件 （第二种）
//addEventListener想要给谁添加绑定事件，就让谁去调用addEventListener
//这个函数。这个函数，有三个参数
//第一参数，代表要绑定什么类型的事件，点击（click），鼠标移动（mousemove）
//不带on的事件，是个字符串
//第二个参数是给这个事件绑定的方法。
redDiv.addEventListener("click",function() {
console.log("你点到人家了");
});
redDiv.addEventListener("click",function() {
console.log("你又点到人家了");
});
//绑定事件（第三种：ie）
//和addEventListener，不同的地方在于事件类型要加on，比如onclick
// redDiv.attachEvent("onclick",function() {
// console.log("我是来自IE的点击");
// });
//封装一个兼容的写法。
function addEv (type,fn,target) {
if(target.attachEvent){
target.attachEvent("on"+type,fn);
}else{
target.addEventListener(type,fn,false);
}
}
addEv("click",test,redDiv);
function test() {
console.log("自己写的函数");
}
//移除事件(IE)
redDiv.removeEventListener("click",test,false);
//移除事件（IE）
// redDiv.detachEvent("onclick",test);
</script>
</html>
网友评论