
JS——Event事件
Event事件
溜_x_i_a_o_迪
本人从事过C++、MFC、Qt、asp.net、C#开发,目前从事Web前端开发,本人很菜,希望大牛们手下留情啊。。。
展开
-
Event事件学习实用路线(11)——Event事件之鼠标滚轮——案例:改变div宽高度
Event事件之鼠标滚轮——案例:改变div宽高度鼠标滚轮mousewheel和DOMMouseScroll案例:改变div宽高度鼠标滚轮mousewheel和DOMMouseScrollmousewheel:兼容谷歌和iee.wheelDelta:滚轮向上 - > 120滚轮向下 - > -120 document.addEventListener('m...原创 2020-04-26 23:46:49 · 414 阅读 · 0 评论 -
Event事件学习实用路线(10)——Event事件之拖拽原理思路详解
拖拽原理思路详解涉及事件鼠标按下: mousedown鼠标移动 :mousemove => 不断的改变元素的 top / left鼠标抬起 :mouseu原理图解如图假如对div进行拖拽:连接拖拽点它的横纵坐标变化:就是增加移动的距离拖拽实现思路保存鼠标点击的初始位置startPos保存元素的初始位置boxPos保...原创 2020-04-26 14:53:23 · 420 阅读 · 0 评论 -
Event事件学习实用路线(9)——Event事件之键盘事件——案例:键盘操作元素位置——案例:键盘事件组合键控制
Event事件之键盘事件键盘事件keydown、keyup键盘事件-事件对象event.keyCode、event.keyevent.ctrlKey、event.altKey、event.shiftKey键盘事件keydown、keyup这两事件没太多好说的,非常简单,大家看代码即可掌握了。 document.addEventListener("keydown",...原创 2020-04-25 22:16:29 · 1032 阅读 · 0 评论 -
Event事件学习实用路线(8)——Event事件之事件鼠标右键——案例:实现自定义一个右键菜单
Event事件之事件鼠标右键——案例:实现自定义一个右键菜单鼠标右键contextmenu 鼠标右键事件案例:实现自定义一个右键菜单另外一种阻止默认行为的方式e.preventDefault与return false阻止默认行为的区别鼠标右键contextmenu 鼠标右键事件<!DOCTYPE html><html lang="en"><hea...原创 2020-04-25 20:02:21 · 1001 阅读 · 0 评论 -
Event事件学习实用路线(7)——Event事件之事件鼠标信息——案例:实现鼠标跟随
鼠标位置获取鼠标事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...原创 2020-04-25 19:17:12 · 307 阅读 · 0 评论 -
Event事件学习实用路线(6)——Event事件之阻止事件冒泡
Event事件之阻止事件冒泡阻止事件冒泡mouseover 和 mouseout事件mouseenter和 mouseleave事件取消冒泡stopPropagationcancelBubble和stopPropagation的区别:阻止事件冒泡mouseover 和 mouseout事件<!DOCTYPE html><html lang="en">&l...原创 2020-04-25 16:46:56 · 461 阅读 · 0 评论 -
Event事件学习实用路线(5)——Event事件之事件委托——案例:实现简易留言板
Event事件之事件委托——案例:实现简易留言板这里写目录标题事件委托案例:实现简易留言板事件委托(事件代理)优缺点:事件委托 其实我们差不多已经知道什么是事件委托了,现在我们通过一个小的案例,可以温习一下事件委托。案例:实现简易留言板我们简单的实现一个简易的留言板,可以提交留言也可以删除。我们看一下样式,关于css样式的学习,请参考xiao迪写的css样式学习使用路线...原创 2020-04-25 13:17:04 · 313 阅读 · 0 评论 -
Event事件学习实用路线(4)——Event事件之事件源
Event事件之事件源(后续待补充)原创 2020-04-25 11:32:30 · 480 阅读 · 0 评论 -
Event事件学习实用路线(3)——Event事件之事件对象
Event事件之事件对象事件对象默认事件取消事件监听Event事件对象事件对象默认事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i...原创 2020-04-24 23:13:37 · 188 阅读 · 0 评论 -
Event事件学习实用路线(2)——Event事件之事件冒泡和事件捕获
Event事件之事件冒泡和事件捕获事件冒泡和事件捕获事件监听函数事件冒泡事件捕获事件冒泡和事件捕获事件监听函数addEventListener(‘ev’,fn,[Boolean,{}])它有三个参数第一个参数:执行事件的名称第二个参数:fn函数第三个参数:传递有两种形式:Boolean或者一个对象默认第三个参数是 false (不捕获,因此该函数默认是冒泡执行的),第三...原创 2020-04-24 20:19:16 · 227 阅读 · 0 评论 -
Event事件学习实用路线(1)——Event事件之事件监听器
事件监听器事件监听和事件绑定的区别 xiao迪就不做太官方说明了,以一个十分简单的例子说明: 同两个事件都会执行吗?<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wid...原创 2020-04-24 19:36:12 · 513 阅读 · 0 评论