ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

JavaScript 事件高级

2020-11-29 19:58:31  阅读:171  来源: 互联网

标签:标签 JavaScript 高级 事件 addEventListener ev ie event


标题事件高级

标题一、事件对象event

1、事件处理函数:
事件发生时调用的函数,document.onclick = function(){}
2、事件对象event:
特殊的内置对象,当事件发生的时候,浏览器会将所有和事件相关的信息(事件类型,鼠标位置,操作对象)存储在事件对象中
<1>、 chrome,ie获取事件对象:window.event ,window可以省略

<2>、低版本火狐:火狐的事件对象,事件发生的时候,浏览器会将事件对象 , 通过事件处理函数的第一个参数传入
eg: document.onclick = function(ev){
console.log(window.event); //事件对象,
console.log(ev); //ff
//兼容
var oEvent = window.event || ev; 但现在一般不需要传参了,火狐可以自动更新,直接在事件中用event。
console.log();
}
<3>、事件对象属性:

  • type:获取事件的类型
  • target:事件目标,事件真正发生的元素 eg:console.log(event.target || event.srcElement)兼容ie8-
  • clientX,clientY:鼠标的位置,相对屏幕(一般用这个)
  • pageX,pageY:鼠标的位置,相对于页面
  • ctrlKey,shiftKey,altKey:功能键, 事件发生的时候,有没有按住这个功能键,若 按了——true,没按——-false。

二、事件绑定与取消
1、事件绑定
<1>、 为什么需要使用事件绑定 多个 同名的事件重名会覆盖
//员工1
oDiv.onclick = function(){
console.log(“1”);
}
//员工2
oDiv.onclick = function(){
console.log(“2”);
}
//运行完以后,只打印2,给同一个标签添加同一个事件,后面的会覆盖前面
<2>、 事件绑定的语法

  • 标准浏览器:标签.addEventListener(事件类型(不加on),事件处理函数,是否捕获)
  • ie浏览器:标签.attachEvent(事件类型(加on),事件处理函数)

标准浏览器:标签.addEventListener(事件类型[不加on],事件处理函数,是否捕获)
oDiv.addEventListener(“click”,fun1);
oDiv.addEventListener(“click”,fun2);

ie浏览器:标签.attachEvent(事件类型[加on],事件处理函数)
oDiv.attachEvent("onclick",fun1);
oDiv.attachEvent("onclick",fun2);

标准浏览器和ie浏览器事件绑定的区别:
标准:
有捕获
不加on
顺序执行
this–触发事件的对象
ie:
没有捕获
加on
倒序执行
this–window

兼容
if(oDiv.addEventListener){
oDiv.addEventListener(“click”,fun1);
}else{
oDiv.attachEvent(“onclick”,fun1);
}

事件绑定函数的封装
function bind(elem,type,fun){
if(elem.addEventListener){
elem.addEventListener(type,fun);
}else{
elem.attachEvent(“on”+type,fun);
}
}

2、事件取消
比如:一天只能抽一次奖的事件,有些事件只让它发生一次

事件添加 事件取消
标签.事件 标签.事件 = null;
标签.addEventListener 标签.removeEventListener(事件类型,事件处理函数,是否捕获)
标签.attachEvent 标签.detachEvent(事件类型,事件处理函数)

点击抽奖,只让这个点击事件发生一次

封装取消绑定事件函数

三、事件流(事件冒泡与事件捕获)

<1>、 事件捕获机制:(从父到子)window ——确定的事件目标

<2>、 事件冒泡机制:(从子到父) 具体发生的事件——window

ie没有捕获,js就是在冒泡环境下处理事件
阻止事件冒泡的语法:如出现对代码造成影响,不能正常显示的,就要阻止事件冒泡

  • 标准:event.stopPropagation()
  • ie:event.cancelBubble = true;

若要阻止的事件冒泡在绑定事件中,则将要阻止的事件冒泡写在fun处理函数中。
四、事件默认行为
<1>、标签.事件 return false
<2>、事件绑定阻止:

  • 标准浏览器阻止默认行为:event.preventDefault()
  • ie浏览器阻止默认行为:event.returnValue = false;

js中元素要移动,就得用定位,在css中用定位,在js中调整top,left的值

五、键盘事件

<1>、 键盘事件 onkeydown——按下 onkeyup——抬起 onkeypress——按下,区分大小写

  • 注意:键盘事件不能加给window,ie不识别,最多只能加给document,若有具体的事件目标就加给事件目标,没有就加给document。
  • 属性:
    • keyCode:按键编码,不区分大小写,统一用大写编码
    • ctrlKey,altKey,shiftKey:有没有按住这个键,按了true 没有false

键盘控制div移动的事件

六、滚轮事件
1.添加事件
chrome,ie: 标签.onmousewheel
ff:必须使用事件绑定添加 标签.addEventListener(“DOMMouseScroll”,事件处理函数)

2.滚动方向
chrome,ie: ev.wheelDelta : 120:上 -120:下
ff(火狐): ev.detail -3:上 3:下

封装的滚轮事件函数

滚轮事件的例子:图片的放大缩小

七、事件委托(事件代理)
事件委托(事件代理)
将事件添加给父元素,当事件发生的时候,通过target找到具体的子元素去处理事件
eg:
var oUl = document.getElementsByTagName(“ul”)[0];
oUl.onclick = function(ev){
var ev = window.event || ev;
//找子元素
var target = ev.target || ev.srcElement; //ie
console.log(target.nodeName); //“LI”
if(target.nodeName == “LI”){
target.style.background = “red”;
}
例子:作业2

标签:标签,JavaScript,高级,事件,addEventListener,ev,ie,event
来源: https://blog.csdn.net/juan_bing/article/details/110351573

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有