event对象 冒泡与捕获
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 100px;
height: 100px;
background-color: #f66;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script>
var oBox =document.getElementsByClassName("box")[0];
oBox.abc =function(){
alert("自定义属性");
}
oBox.abc();//这样就会自执行 弹出“自定义属性”
oBox.onclick=function () {
alert("点击事件");
}
</script>
- DOM 0级
- onclick 被认为是元素的属性方法
oBox.onclick=function () {
console.log(this);
}
此时打印的是节点
- 模拟默认点击事件
oBox.onclick=function (a) {
console.log(a);
}
默认为MouseEvent {isTrusted: true, screenX: 89, screenY: 101, clientX: 89, clientY: 35, …}event 事件对象 默认传参给函数的第一个参数 保存了触发事件的参数:事件类型ele.type 鼠标位置 节点
oBox.abc =function(a){
console.log(a)
}
这样显示undefined 没有event事件对象
oBox.onclick=function (a) {
console.log(a);
}
oBox.click();
就会触发事件函数 MouseEvent {isTrusted: false, screenX: 0, screenY: 0, clientX: 0, clientY: 0, …}
- ie8不传event参数 兼容写法
oBox.onclick=function (event) {
event =event||window.event;//IE低版本浏览器会默认挂载到window下的event属性里 这是一个全局对象
console.log(event);
}
oBox.click();
DOM二级事件
oBox.onclick=function (event) {
event =event ||window.event;//IE低版本浏览器会默认挂载到window下的event属性里 这是一个全局对象
console.log("你好");
}
oBox.onclick=function (event) {
event =event ||window.event;//IE低版本浏览器会默认挂载到window下的event属性里 这是一个全局对象
console.log("不好");
}
这样后面的事件会覆盖前面的点击事件
- 主流浏览器 addEventListener()
- 第一个参数 事件类型 :click
- 第二个参数 事件函数:
- 第三个参数 是否捕获
var oBox =document.getElementsByClassName("box")[0];
oBox.addEventListener("click",function (e) {
console.log("1",this)
},false);
oBox.addEventListener("click",function (e) {
console.log("2",this)
},false);
这样可以同时触发两个事件
- removeEventListener()
- 第一个参数 事件类型 :click
- 第二个参数 事件函数:
- 第三个参数 是否捕获 true 使用捕获 false 使用冒泡
var oBox =document.getElementsByClassName("box")[0];
var fn1 =function (e) {
console.log("1",this)
};
oBox.addEventListener("click",fn1,false);
document.ondblclick = function(){
console.log("取消");
oBox.removeEventListener("click",fn1,false)
}
会注销事件 双击等于两次单击 所以会出现单击事件 但是双击之后事件注销
var oBox =document.getElementsByClassName("box")[0];
var fn1 =function (e) {
console.log("1",this);
this.removeEventListener("click",fn1,false);
};
oBox.addEventListener("click",fn1,false);
只能点击一次
注册事件传的参数要和注销事件传的参数一一对应
var oBox =document.getElementsByClassName("box")[0];
var fn1 =function (e) {
console.log("1",this);
this.removeEventListener("click",fn1,true);
};
oBox.addEventListener("click",fn1,false);
这样就不会注销单击事件了
捕获和冒泡的区别
- 冒泡 从底层一层一层往上冒
var oBox =document.getElementsByClassName("box")[0];
var capture =false;
document.addEventListener("click",function () {
console.log("document点击");
},capture);
document.body.addEventListener("click",function () {
console.log("body点击");
},capture);
oBox.addEventListener("click",function () {
console.log("box点击");
},capture);
触发顺序 box点击 body点击 document点击
- 捕获 从最顶层开始触发到底层然后回到顶层
var oBox =document.getElementsByClassName("box")[0];
var capture =true;
document.addEventListener("click",function () {
console.log("document点击");
},capture);
document.body.addEventListener("click",function () {
console.log("body点击");
},capture);
oBox.addEventListener("click",function () {
console.log("box点击");
},capture);
document点击 body点击 box点击
- 只想box触发 停止冒泡
var oBox =document.getElementsByClassName("box")[0];
var capture =false;
document.addEventListener("click",function () {
console.log("document点击");
},capture);
document.body.addEventListener("click",function () {
console.log("body点击");
},capture);
oBox.addEventListener("click",function (e) {
e.stopPropagation();
console.log("box点击");
},capture);
这样只会打印box点击
- 捕获 取消事件的传递
var oBox =document.getElementsByClassName("box")[0];
var capture =true;
document.addEventListener("click",function () {
console.log("document点击");
},capture);
document.body.addEventListener("click",function (e) {
e.stopPropagation();
console.log("body点击");
},capture);
oBox.addEventListener("click",function (e) {
console.log("box点击");
},capture);
这样点击box 打印的是document点击 body点击
IE 浏览器 默认为冒泡
- attachEvent()
- 第一个参数 事件类型 :onclick
- 第二个参数 事件函数
oBox.attachEvent("onclick",function () {
console.log(this);
});
this指向window
- 取消事件detachEvent()
var fn1 =function(){
console.log(1);
}
oBox.attachEvent("onclick",fn1);
document.ondblclick =function () {
oBox.detachEvent("onclick",fn1);
}
- 双击事件等于两次单击事件 怎么解决双击时不触发单击
document.onclick =function(){
timer =setTimeout(function () {
console.log("单击");
},300);
}
document.ondblclick =function () {
console.log("双击");
clearTimeout(timer);
}
但是不推荐
- 取消冒泡
var fn1 =function(e){
e =e||window.event;
e.cancelBubble =true;
console.log(1);
}
oBox.attachEvent("onclick",fn1);
var timer;
document.onclick =function(){
timer =setTimeout(function () {
console.log("单击");
},300);
}
监听事件兼容方法初级版
eventBind(box,"click",function (event) {
console.log("box点击");
eventBind(this,"click",false);
},false);
/*ele 元素节点
* event事件类型
* Handel 处理事件函数
* capture 是否为捕获
* */
function eventBind(ele,event,handle,capture) {
//包装函数做处理 用于取消函数和this指向问题
ele["event"+event] = handle;
//先判断浏览器是否为主流浏览器
if (ele.addEventListener){
ele.addEventListener(event,ele["event"+event],capture);
}else if (ele.attachEvent){
ele["event"+event] =function(){
handle.call(ele,window.event)
};
ele.attachEvent("on"+event,ele["event"+event]);
}
}
//注销事件
function eventUnbind(ele,event,capture) {
if (ele.removeEventListener){
ele.removeEventListener(event,ele["event"+event],capture);
}else if (ele.detachEvent){
ele.detachEvent("on"+event,ele["event"+event]);
}
}
</script>