Event事件

沐森
137 阅读5分钟

一、什么是事件对象？

当绑定事件的对象在触发事件时，发生的详细信息会记录在一个地方，这个地方就叫做事件对象；

二、如何获取事件对象？

标准浏览器获取事件对象，触发事件后，给事件处理程序传递的第一个参数，这个参数就是事件对象；

IE: window.event;

兼容： event=event|| window.event;

三、事件对象的应用

  1. 获取鼠标的编码值

event button:获取鼠标的编码值；

标准：鼠标左键0 鼠标滚轮(中键)1 鼠标右键2；

IE: 左1 中：4 右：2；

onmousedown 鼠标按下 输出 bymousecode

event.which:获取鼠标编码值 左(1) 中(2) 右(3)

2.获取鼠标的坐标值

  • 相对坐标值 鼠标相对当前所在对象上的坐标值(位置)；

event.offsetx event.offsety

  • 绝对坐标值

event.pagex event.pagey

  • 可视区域值

event.clientx event.clienty

  • 屏幕坐标值

event.screenx event.screeny

  1. 获取键盘的编码值

onkeydown/onkeyup :监听整个键盘按键的编码某个字母，只返回大写的编码值；

输出(event.keycode)

onkeypress 监听编码区(字母，数字，空格，回车)；

event.keycode event.charcode event.which;

兼容: event keycode|| event.charcode|| event.which;

  1. 组合键

事件 event.ctrlkey event.shiftkey event.altkey;

5.事件流

事件捕获：事件从祖先元素依次向子孙元素传递事件的过程

事件目标

事件冒泡：从子孙元素依次向祖先传递事件的过程；

浏览器默认启动的是：事件冒泡；

注：IE浏览器的欧朋浏览器不支持事件捕获；

阻止停止冒泡：

标准浏览器：evnet.stoppropagation();

IE : event.cancelBubble=true;

兼容： event.stoppropa;

浏览器的默认行为及阻止默认行为

  1. 右键菜单 - 阻止 - oncontextmenu(右键菜单)
  2. 超链接 -阻止
  3. 拖拽 - 阻止；

阻止默认行为

标准：event.preventDefault() IE: event.returnValue=false; 兼容: event.preventDefault? event.preventDefault(): event.returnValue = false;

即阻止默认行为，也阻止事件冒泡:return false;

事件监听器

作用： 触发一次按钮的事件，发生三件不同的事；

  1. 事件监听器(添加事件)
  • 添加对象 addEventListener(click,fn,fasle);

第一个参数click ：事件；

第二个参数fn：事件处理程序；

第三个参数fasle：是否进行事件捕获(true捕获)(false冒泡，默认)；

IE浏览器(添加事件)；

o_btn.attachEvent("onclick",fn)

  1. 兼容 function addEventListener(obj,event,fn,bool){

}

3.删除事件监听

标准: 对象.removeEventListener("click",fn,fasle);

IE: 对象.detachEvent("onclick",fn);

事件委托(事件代理)

将添加到子节点上的事件，给它添加到父节点上，可以提高性能，还可以为动态添加的元素添加事件。原理是利用了事件冒泡

标准浏览器获取事件源: event.target;

IE浏览器： evnet.srcElement;

  • 获取要添加标签的父元素；
  • 创建标签到document中；
  • 在创建的标签中添加内容；
  • 追加到父元素的末尾；
  • 找到事件源(兼容) var target=e.target||e.srcElement(IE);

注意：

  • 给父节点添加事件；
  • 获取事件源；
  • 过滤；

拖拽思想

将数据在拖拽的对象上面按下时，先求出鼠标的相对坐标值，然后在按下的时候移动鼠标，拖拽的对象的坐标值 = 鼠标的绝对坐标值-鼠标的相对坐标。最后当鼠标弹起时，取消移动；

取消默认禁止拖拽 document.ondragstart = function(){return false};

鼠标滚动事件

火狐 非火狐 Dommousesrcoll onmousewheel

返回值:event.detail 返回值: event.wheelDelta

滚动方向: 正：向下，负：向下 滚动方向：正：向上， 负：向下；

返回倍数 3 返回值 倍数：120；

滚动幅度=event.detail1/3 滚动幅度 = event.wheelDelta /120;

什么是正则表则式

检测字符串的一组规则

作用： 1. 表单验证 2. 处理复杂字符串问题；

如何声明正则表达式

字面量声明： / 正则表达式/标志位；

构造函数： new regExg("正则表达式","标志位")

正则表达式的方式

正则表达式对象， test(字符串):检测字符串中是否包含正则，表达式的内容，返回布尔值；

正则表达式exec(字符串)：返回正则表达式匹配到字符串中的内容数组；

正则表达式的元字符

三:{} [] ()

  • {}:限制{}前的一个或一组字符串连续出现的次数；
  • {m}:限制{}前的一个或一组字符串连续出现m次；
  • {m,}:限制{}前的一个或一组字符串连续出现m至无限次；
  • {m，n}：限制{}前的一个或一组字符串连续出现m至n次；

  1. []:表示范围内的字符串可以随机出现

  2. ():表达组 括号内的不能拆开表示一个整体

  3. 三 * + ？

  • "*":标准*前面的一个或一组字符串连续出现0到无限次；相当于{0,};
  • +: 表示+前面的一个或一组字符串出现1到无限次相当于{1，}；
  • ？：前面的一个或一组字符串出现0~1次最多可出现一次可以不出现相当于{0,1}； 5.二 ^ $
  • ^:定(断)头：表示必须以^后面的一个字符开头取反，写在[]里的开头部分除[]的元素开头；
  • :定(断)尾：写在正则表达式结尾部分，必须以:定(断)尾：写在正则表达式结尾部分，必须以前字符结尾；
  1. 三个一 . | \
  • . 模糊匹配任意一个字符；
  • | 或者
  • \转义字符；

特殊转义字符 \d数字 \D非数字 \W非(字母，数字，下划线) \w字母 \s空白 \S非空白; \b边界 \B非边界；

正则表达式的标志位(修饰符)；

g：全局匹配； i：不区分大小写；

正则表达式的方法：

exec和match

正则表达式对象exec(字符串)：返回正则表达式匹配到字符串中的内容数组；

字符串对象.match(正则)：返回正则表达式匹配到字符串中的内容数组；

  1. 无组无g：都是只获取第一次匹配到的内容；
  2. 无组有g：exec不受g的影响，match，获取所有匹配到的内容；
  3. 有组无g：在有组的情况，都是获取一个父级，都是获取一个父级(整个正则匹配的内容)和多个子级(一个组返回一个子级)；
  4. 有组有g：exec不受g的影响，match会返回所有父级元素且只有父级元素(整个正则匹配的内容)exec只会返回第一个父级和父级下的子级元素；

字符串对象，search(正则)：和indexof一样，查找字符串中第一次正则匹配到内容所在的下标。查找不到返回-1；

接下来进入 ES6 =>

avatar
文章
阅读
粉丝