欢迎光临
我的个人博客网站

JavaScript 13 事件详解及应用

.addEventListener()  //同一个事件注册多个处理函数

<input type="button" value="按钮" id="btn"> <script>     btn = document.getElementById('btn'); btn.addEventListener('click', function(){alert('hello world');}) btn.addEventListener('click', function(){alert('123')}) </script>

 

注册事件的方式:

1 btn.onclick=function(){}  //缺点:无法给同一个对象的同一个事件注册多个事件处理函数。因为‘=’为赋值,会把第二个function覆盖第一个function

2 btn.addEventListerner()  //可以付多个处理函数。但是有兼容性问题。IE9以后支持

3 .attachEvent()   //兼容问题,不讲了

处理注册事件的兼容性问题(addEventListener)

//处理事件兼容性问题 //eventname不带on,click mouseover。 mouseout function addEventListener(elemnet,eventName,fn){ //判断当前浏览器是否支持addEventListener方法     if(element.addEventListener){         element.addEventListener(eventName,fn);    //第三个参数默认是false     }else if (elemnet.attachEvent) {         elemnet.attachEvent('on' + eventName,fn);      }else {         //相当于element.onclick = fn;         elemnet['on'+ eventName] = fn;     } }

移除元素事件方式:(使元素事件变成一次性的事件,只能运行一次)

onclick = fn

btn.onclick = function(){     alert('123');     //移除事件     btn.onclick=null; }

addEventListener

btn.addEventListener('click',function(){alert(123)}) //移除事件。因为事件的function是匿名函数访问不到,所以,要想移除上面的事件,函数必须有名字

fucntion btnclick(){ alert(123); btn.removeEventListener('click',btnclcik); //移除写在函数中,直接一次性 } btn.addE ventListener('click',btnclick);

处理移除兼容性问题

//处理事件兼容性问题 function removeEventListener(elemnet,eventName,fn){ //判断当前浏览器是否支持addEventListener方法     if(element.removeEventListener){         element.removeEventListener(eventName,fn);    //第三个参数默认是false     }else if (elemnet.detachEvent) {         elemnet.detachEvent('on' + eventName,fn);      }else {         //相当于element.onclick = fn;         elemnet['on'+ eventName] = null;     } }

事件冒泡:https://www.cnblogs.com/moqing/p/5590216.html 

事件委托(原理是事件冒泡):事件委托不用给内部的每个标签都写事件,只需给他们的父标签写就好了

<ul id = 'ul'>     <li>西施</li>     <li>貂蝉</li>     <li>昭君</li>     <li>凤姐</li>     <li>芙蓉姐姐</li> </ul> <script> //事件委托原理是事件冒泡 var ul = document.getElementBuId('ul'); //e是事件参数(事件对象):当事件发生的时候,可以获取一些和事件相关的数据 ul.onclick = function(e){ //获取到当前点击的li,e.target是真正触发事件的对象 console.log(e.target); //让点击的li高亮显示 e.target.style.backgroundColor = 'red'; } </script>

 

时间对象

通过事件对象的属性,可以获取到事件发生的时候和事件相关的一些数据,btn.onclick = function(e){},e就是事件对象

处理时间对象的浏览器兼容性

e=e || window.event

e.eventPhase属性:代表事件的阶段。返回1,2,3。  1:事件捕获阶段    2:目标阶段(事件执行阶段)    3:冒泡阶段

e.target:获取真正触发事件的对象

e.currentTarget:事件处理函数所在的对象,和this一样

e.type  获取事件名称

btn.onclick = function(e){ console.log(e.eventPhase); console.log(e.target);
console.log(e.currentTarget); }

 

获取鼠标在浏览器的可视区域的坐标

<div id = 'box'> <script> var box = document.getElementById('box'); box.onclick = function(e){ e = e || window.event; //获取鼠标在浏览器的可视区域的坐标  不包含滚动轴 console.log(e.clientX); console.log(e.clientY); //鼠标在当前页面的位置  包含滚动轴  page注意兼容性问题  console.log(e.pageX); console.log(e.pageY); } </script>

 

跟着鼠标走的图片:

<img src = "xxx.gif" id = "img"> <srcipt> img = document.getElementById('img'); document.onmousemove = function(e){ e = e || window.event; img.style.left = e.pageX + 'px'; img.style.top = e.pageY + 'px'; } </srcipt>

 

输出页面滚动出去的距离

//横向滚动出去的距离 console.log(document.body.scrollLeft); //纵向滚动出去的距离 console.log(document.body.scrollTop);

 

获取鼠标在当前盒子内相对盒子的坐标:盒子内的坐标减去外部坐标

JavaScript 13 事件详解及应用

<div id = 'box'> </div> <script> //获取盒子的距离 var box = document.getElementById('box'); box.onclick = function(){ console.log(this.offsetLeft); console.log(this.offsetTop); } </script>

<div id = 'box'> </div> <script> var box = document.getElementById('box'); box.onclick = function(e){ e = e || window.event; //获取鼠标在盒子中的位置 = 鼠标的坐标 - 盒子的坐标 var x = e.pageX - this.offsetLeft;  var y = e.pageY - this.offsetTop;  } </script>

 

取消默认行为的执行:

事件函数末尾添加: return false;  DOM标准方法: e.preventDefault();    //兼容问题

 

阻止事件冒泡:事件函数末尾添加:e.stopPropagation();

 

键盘事件:

keydown:  键盘按下的时候

keyup:键盘弹起的时候 

onkeydown和onkeyup的区别:keydown的时候我们所按的键还没落入文本框,而keyup的时候按的键已经落入文本框了

赞(0) 打赏
未经允许不得转载:张拓的天空 » JavaScript 13 事件详解及应用
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏