标签:写法 开始 利用 火狐 log ash this use eve
事件流是什么?
捕获——确定目标——冒泡 的过程;
事件委托:
系统弹出框:
- alert(‘‘); //警告提示框 - confirm(‘‘); // 确认提示框 , 返回值 true/false - prompt(‘请输入修改后的内容‘); //输入提示框 , 返回输入的内容
绑定事件的方法:
DOM0级事件
<div onclick = "alert()"></div> box.onclick = function(){ console.log(111); } box.onclick = function(){ console.log(222); }
DOM2级事件:
span.addEventListener(‘click‘,function(){ console.log(‘span被点击222‘); this.style.backgroundColor = "pink"; }) span.addEventListener(‘click‘,function(){ console.log(‘span被点击‘); }) li.addEventListener(‘click‘,function(){ console.log(‘li被点击‘); },true)
ie事件监听——ele.attachEvent(‘on‘+事件类型,事件处理函数)
span.attachEvent(‘onclick‘,function(){ console.log(‘111‘); console.log(this); // 这里的this不是指向span,而是window })
移出事件——removeEventListener(事件类型,事件处理函数)
span.addEventListener(‘click‘,fn1); span.addEventListener(‘click‘,fn2); document.getElementsByTagName(‘button‘)[0].onclick = function(){ span.removeEventListener(‘click‘,fn1);//移除span点击事件的fn1 } //fn2会继续执行
ie浏览器移出事件——detachEvent(‘on‘+事件类型,事件处理函数)
span.detachEvent(‘onclick‘,fn1); ie移除事件的方法
滚轮事件:
- 谷歌,ie ele.onmousewheel = function(){} - 火狐 ele.addEventListener(‘DOMMouseScroll‘,function(){}) ``` 兼容: function mouseWeelEvent(ele,fn){ ele.onmousewheel = fn; ele.addEventListener(‘DOMMouseScroll‘,fn) } ```
判断滚轮方向:
mouseWeelEvent(box,function(event){ event = event || window.event; console.log(event.wheelDelta);//谷歌和ie判断方向 >=120向上 <=-120向下 console.log(event.detail); //火狐浏览器判断方向 <=-3向上 >=3 向下 //console.log(‘滚轮事件‘); //判断方向兼容写法 var de = 1; // de标记方向 1表示向上,0表示向下 if(event.wheelDelta){ de = event.wheelDelta >= 120 ? 1 : 0; }else{ de = event.detail >=3 ? 0 : 1; } });
标签:写法 开始 利用 火狐 log ash this use eve
原文地址:https://www.cnblogs.com/musong-out/p/11481276.html