事件上

姜日月
142 阅读4分钟

1、事件的模式

  • 内联模式

(事件对应的,函数必须是全局;内联模式内部的this,是window)

直接在HTML标签中添加事件这种模型是最传统简单的一种处理事件的方法。但是这种模式中事件和HTML 是混写的，并没有将IS与HTML分离当代码量多了以后,对后期代码维护和扩展很不利 例如: <input type="button" value=“按钮” onclick=alert("hello”);/>

  • 脚本模式(推荐)

脚本模式能将JS代码和HTML代码分离，符合代码规范, 使用脚本模式我们需要先获取到元素节点对象再针对该节点对象添加事件;如我们可以采用三种方式来获得 节点对象: getElementByld(), getElementsByTagName(), getElementsByName()

defer和async有什么区别
  • defer页面从上下午解析,遇到script加载外部资源,同时解决页面的内容,页面渲染完成后,再来执行jS;

  • 而async页面渲染和script的加载 是同时进行加载完成后就立即执行 ,执行的时候,停止页面渲染async和defer必须要结合script的src属性一起使用

2、事件的分类

1）鼠标事件

onmousedown>onmouseup>onclick>ondblclick

  • onclick 单击
  • ondblclick 双击
  • onmousedown 按下
  • onmouseup 抬起
  • onmousemove 鼠标移动
  • onmousewheel 鼠标滚轮事件
  • onmouseenter 鼠标进入
  • onmouseleave 鼠标移开
  • onmouseover 鼠标进入
  • onmouseout 鼠标离开

onmouseover 和 onmouseout遇到了子元素也会触发; onmouseenter 和 onmouseleave遇到子元素,不会触发.

（事件都是异步的）

事件里的this,都是事件绑定着; 普通函数里的this,是window

2) 键盘事件

`把事件只绑定给了输入框,触发的场景 要与输入框有关`
  • onkeydown 按下 //获取不到输入框的完整内容 能防止别人误输入
  • onkeyup 抬起 //输入完成后，抬起的时候，就能获得输入的内容
  • onkeypress //非功能键有用

3) html事件

  • onload 页面的dom结构加载完成,并且外部资源也要加载完成,才会触发,凡是带有src属性的标签都有一个onload事件

  • onunload 卸载事件，刷新和关闭浏览器的时候会触发

  • onselect 文本框选中事件

  • onchange 文本框改变内容事件

  • onresize 改变窗口

  • oninput 文本框输入事件,一边输入一边触发,下载第三方的js库,使用里面的debounce 防抖和throttle 节流

  • debounce 防抖 在固定时间内，重复指向，就情况执行，从而延迟执行

  • throttle 节流 在固定时间内,次数减少

  • onfocus 光标聚焦事件

  • onblur 失去焦点

  • onwheel 滚轮事件

  • onscroll 滚动条事件

  • onerrer 错误事件,前端监控

  • oncontextmenu 右击菜单事件

  • onsubmit 表单提交 return false 阻止默认行为

  • onreset 重置

image.png

  1. 先触发js的onsubmit事件
  2. 在触发表单的默认提交
  3. onsubmit是form表单的时间,不是button的document.forms[0].onsubmit=function(){return false;}

4）事件对象

4.1 什么是事件对象
事件触发时,产生的一条记录信息
记录: 点击的位置,事件的类型,目标元素
4.2 事件对象的兼容写法(了解)
 var e=evt|| window. event;
4.3 evt event事件对象

4.3.1 在google,获取下,事件对象,就是一个形参

4.3.2 在ie下是通过window. event

4.4.事件对象的常用属性
  • e.button 0 左键，1中间滚轮键,2右键
  • e.altKey
  • e.shiftKey
  • e.ctrlKey
  • e. metaKey
  • e. keyCode 13回车 37左 38上 39右 40下 (要与keydown一起使用)
  • onkeypress+e.charCode一起使用
  • pageX, pageY鼠标点的点,到页面的距离,出现滚动条使用
  • clientX, clientY鼠标点击的点,到浏览器可视区域的距离,没出现滚动条使用
  • offsetX, offsetY鼠标点击的点,当前元素的距离
  • screenX, screenY鼠标点击的点,到屏幕的距离
  • offsetWidth只能做获取
  • offsetHeight只能做获取
  • oImg.style.htight只建议做设置
  • oImg.style.width只建议做设置
4.5.offset三大家族
  • offsetHeight, offsetWidth 获取自身宽高：自身的宽高+ border+padding
  • offsetLeft, offsetTop 获取当前元素到带有定位父元素的距离，如果父级没有定位，就到body的距离
  • offsetParent 获取带有定位的父元素,没有定位，就到body的距离
4.6 事件委托

事件委托其实就是利用事件冒泡，将事件加在父元素或者祖先元素上，子元素触发该事件。

tagget不与this相等

avatar
文章
阅读
粉丝