怎么才能阻止冒泡事件？在js中常用的鼠标事件和键盘事件，在实开发中会遇到很多的地方需要用到这些比如mousemove，keydown等，本篇就来了解一下这些吧！...1.e.target与this的区别简单来说就是this指向的是绑定事件的元素，e.target返回的是所触发事件的元素 // e.target返回的是触发事件的对象(元素...) this返回的是绑定事件的对象(元素) var div = document.querySelector('div'); div.addEventListener.../script>注意:return false;只能用在传统的方法上，并且它后面的代码不执行3.阻止冒泡事件*为什么要阻止冒泡事件？...:给父节点添加侦听器，利用事件冒泡影响每一个子节点 var ul = document.querySelector('ul'); ul.addEventListener('
目录 一、DOM节点操作(上) 二、DOM节点操作(下) 三、DOM 控制 CSS 样式 四、节点写入 五、事件基础 六、鼠标及键盘事件 七、窗口事件 八、BOM window 对象 九、BOM 定时器...六、鼠标及键盘事件 1. 常用鼠标事件 名称 描述 click 单击鼠标左键触发。...常用键盘属性事件 名称 描述 keyCode keyCode属性返回keypress事件触发的键的值的字符代码，或者keydown或keyup事件的键盘代码。...字符代码 – 表示ASCII字符的数字 键盘代码 – 表示键盘上真实键的数字 charCode 返回keypress事件触发时按下的字符键的字符Unicode值，用于keydown或keyup时总是返回...一些浏览器实现仅在框架或内置框架接收到用户手势或交互时才显示对话框 resize 窗口大小改变时触发 scroll 元素内发生滚动时触发 （1）实现窗口大小发生变化时，重置div元素高度为当前窗口高度的一半
非，求当前的值的非短路现象，由逻辑与和逻辑或的特性造成的特殊现象短路与：当条件 1 为假时，条件 2 执行与否不影响总结果，形成短路，称为一假即假短路或：当条件 1 为真时，条件 2 执行与否不影响总结果...() 方法 （IE 不兼容）通过标签的 class 值来获取标签 （返回的是一个数组，将所有相同 class 名的标签返回）querySelector() 方法，接受一个参数：通过元素的 css 选择器查找元素...('.list'); //获取所有 class 为 list 的元素，返回数组JavaScript 事件onblur 元素失去焦点onchange 用户改变域的内容onclick 鼠标点击某个对象ondblclick...鼠标双击某个对象onerror 当加载文档或图像时发生某个错误onfocus 元素获得焦点onkeydown 某个键盘的键被按下onkeypress 某个键盘的键被按下或按住onkeyup 某个键盘的键被松开...onload 某个页面或图像被完成加载onmousedown 某个鼠标按键被按下onmousemove 鼠标被移动onmouseup 某个鼠标按键被松开onmouseout 鼠标从某元素移开onmouseover
研究html的对象，事件和方法，从js的角度来思考，这个标签的属性是通过什么方法，触发什么事件来实现的 键盘鼠标事件 页面窗口事件 表单事件 一、window事件属性 针对window对象触发的事件...> demo查看 3.onerror 当图片出错是可以触发该事件，支持该事件的标签只有 ,, <img src="1.gif" onerror = "myfun(...demo查看 四、mouse鼠标事件 利用鼠标触发的事件 1.onclick 鼠标点击元素触发的事件 点击我 function...4.onmousedown/onmouseup 当元素按下鼠标时触发的事件/鼠标释放时触发的事件 一个是按下去的瞬间就触发 一个是当鼠标被松开的时候触发 onmouseup效果和onclick一样，因为...都是鼠标进入元素触发 区别： 1. over在进入元素时触发，但在元素内部移动时不触发 move是进入元素时和在元素里面移动时都触发 2. over优先触发，然后才触发move 8.onmousewheel
frameElement: 返回嵌入当前window对象的元素，如或，如果当前window对象已经是顶层窗口,则返回null。...onerror: 当发生JavaScript运行时错误与资源加载失败时触发。 onabort: 发送到window的中止abort事件的事件处理程序，不适用于Firefox 2或Safari。...onmessage: 窗口对象接收消息事件时触发。 onchange: 窗口内表单元素的内容改变时触发。 oninput: 窗口内表单元素获取用户输入时触发。...鼠标相关 onclick: 当点击页面时触发。 onmouseup: 鼠标按键被松开时触发。 ondblclick: 当双击页面时调用事件句柄。...onmouseout: 鼠标移出窗口时触发。 onmouseover: 鼠标移动到窗口时触发。 onauxclick: 指示在输入设备上按下非主按钮时触发，例如鼠标中键。
点击事件 焦点事件 加载事件 鼠标事件 键盘事件 选择和改变 表单事件 事件简单学习 功能： 某些组件被执行了某些操作后，触发某些代码的执行。...刷新 属性 href 设置或返回完整的 URL。...事件监听机制 概念 概念：某些组件被执行了某些操作后，触发某些代码的执行。 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了 事件源：组件。如： 按钮 文本输入框… 监听器：代码。...鼠标事件 onmousedown 鼠标按钮被按下。 onmouseup 鼠标按键被松开。 onmousemove 鼠标被移动。 onmouseover 鼠标移到某元素之上。...onmouseout 鼠标从某元素移开。 键盘事件 onkeydown 某个键盘按键被按下。 onkeyup 某个键盘按键被松开。 onkeypress 某个键盘按键被按下并松开。
DOM3级的事件类型主要包括：UI事件，用户与页面上的元素交互时触发；焦点事件，元素获得或失去焦点触发；鼠标事件，用户通过鼠标在页面上执行操作时触发；滚轮事件，使用鼠标滚轮时触发；文本事件，当在文档中输入文本时触发...使用load事件能够确保事件是在页面元素加载完成后触发，不活出现错误。如果我们在页面元素位加载完成，就去获取页面上的元素，则会产生错误。...这个事件不冒泡，而且光标在移动到后代元素上不会触发；mouseleave事件，在位于元素上方的事件移动到元素范围之外时触发；mousemove事件，鼠标在元素内部移动时重复重复；mouseout事件，在鼠标指针位于一个元素上方然后用于将其移入另一个元素时触发...；mouseover事件，鼠标位于元素外部，然后用户首次将其移入元素内部触发；mouseup事件，释放鼠标时触发。 ...，返回正常输入状态。
事件定义 事件三要素 事件绑定 三种绑定方式 事件属性赋值和事件监听区别 鼠标及键盘事件 常用鼠标事件 常用键盘事件 常用键盘事件属性 窗口事件 常用窗口事件 JS快速入门（二） 下面介绍BOM与...事件定义 用户与浏览器交互的方法，规定了浏览器在什么时刻执行什么事情 事件举例：鼠标单击，双击，键盘输入，页面或图像载入 事件三要素 事件源：谁触发的，一般指某个元素节点 事件：怎么触发的 事件处理程序...IE9 浏览器 鼠标及键盘事件 常用鼠标事件 方法 说明 click 单击鼠标左键触发。...，或者keydown 或 keyup 事件的键盘代码 字符代码：表示 ASCII 字符的数字 键盘代码：表示键盘上真实键的数字 方法 说明 charCode 返回 keypress 事件触发时按下的字符键的字符...一些浏览器实现仅在框架或内置框架接收到用户手势或交互时才显示对话框 resize 窗口大小改变时触发 scroll 元素内发生滚动时触发 load事件示例 /* 输出 div
Event 对象 Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 事件通常与函数结合使用，函数不会在事件发生前被执行！...onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onerror 在加载文档或图像时发生错误。 onfocus 元素获得焦点。...鼠标 / 键盘属性 属性 描述 altKey 返回当事件被触发时，"ALT" 是否被按下。 button 返回当事件被触发时，哪个鼠标按钮被点击。...clientX 返回当事件被触发时，鼠标指针的水平坐标。 clientY 返回当事件被触发时，鼠标指针的垂直坐标。 ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。...( <object) 2 onbeforeunload 该事件在即将离开页面（刷新或关闭）时触发 2 onerror 在加载文档或图像时发生错误。
刷新 3.属性 href 设置或返回完整的URL....*事件：某些操作，如：单击，双击，键盘按下了，鼠标移动了。 *事件源：组。如：按钮 文本输入框。。。 *监听器：代码。 *注册监听：将事件，事件源，监听器结合在一起。...3.加载事件 1.onload:一张页面或一幅图像完成加载。...4.鼠标事件 onmousedown 鼠标按钮被按下 onmouseout 鼠标从某元素移开 onmouseover 鼠标移到某元素之上...onmouseup 鼠标按键被松开 onmousemove 鼠标被移动 5.键盘事件 1.onkeydown 某个键盘按键被按下 2.onkeyup
onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onerror 在加载文档或图像时发生错误。 onfocus 元素获得焦点。...onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。...鼠标 / 键盘属性 属性 描述 altKey 返回当事件被触发时，"ALT" 是否被按下。 button 返回当事件被触发时，哪个鼠标按钮被点击。...clientX 返回当事件被触发时，鼠标指针的水平坐标。 clientY 返回当事件被触发时，鼠标指针的垂直坐标。 ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。...虚拟键盘码可能和使用的键盘的布局相关。 offsetX,offsetY 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
通过js获取元素对象，指定事件属性，设置一个函数 * 代码： ...属性 * href 设置或返回完整的 URL。 5. History：历史记录对象 1....如： 单击，双击，键盘按下了，鼠标移动了 * 事件源：组件。如： 按钮 文本输入框... * 监听器：代码。 * 注册监听：将事件，事件源，监听器结合在一起。...焦点事件 1. onblur：失去焦点 2. onfocus:元素获得焦点。 3. 加载事件： 1. onload：一张页面或一幅图像完成加载。 4....4. onmouseover 鼠标移到某元素之上。 5. onmouseout 鼠标从某元素移开。 5. 键盘事件： 1. onkeydown 某个键盘按键被按下。
通过js获取元素对象，指定事件属性，设置一个函数 * 代码： ...属性 * href 设置或返回完整的 URL。 5. History：历史记录对象 1....如： 单击，双击，键盘按下了，鼠标移动了 * 事件源：组件。如： 按钮 文本输入框... * 监听器：代码。 * 注册监听：将事件，事件源，监听器结合在一起。...焦点事件 1. onblur：失去焦点 2. onfocus:元素获得焦点。 3. 加载事件： 1. onload：一张页面或一幅图像完成加载。 4....4. onmouseover 鼠标移到某元素之上。 5. onmouseout 鼠标从某元素移开。 5. 键盘事件： 1. onkeydown 某个键盘按键被按下。
事件 HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。...但是在目标元素上不区分冒泡还是捕获，按绑定的顺序来执行。 ? DOM事件级别 ? DOM0：不是W3C规范。 DOM0级事件具有极好的跨浏览器优势，会以最快的速度绑定。...定义了一些新的事件，比如键盘事件，还可以自定义事件。 自定义事件 自定义事件不是由DOM原生触发的，它的目的是让开发人员创建自己的事件。...event对象的detail属性中； 可以像分配其他事件一样在DOM中分派创建的自定义事件对象。...，不一定是绑定事件的元素 currentTarget返回的是绑定事件的元素 优点 提高性能: 每一个函数都会占用内存空间，只需添加一个事件处理程序代理所有事件，所占用的内存空间更少。
，可以调用多次事件处理程序，所以num执行了两次加法运算 鼠标及键盘事件 鼠标事件 名称 描述 click 单击鼠标左键触发。...指针移出元素范围外触发一次 mouseover 指针移至元素或其子元素内，可能触发多次 mouseout 指针移出元素，或者移至其子元素内，可能触发多次 键盘事件 名称 描述 keydown 按下任意按键...使用键盘事件属性可以精确的控制键盘操作，如：回车触发，方向键触发 名称 描述 keyCode keyCode属性返回keypress事件触发的键的值的字符代码，或者keydown或keyup事件的键盘代码...字符代码 - 表示ASCII字符的数字 键盘代码 - 表示键盘上真实键的数字 charCode 返回keypress事件触发时按下的字符键的字符Unicode值，用于keydown或keyup时总是返回...一些浏览器实现仅在框架或内置框架接收到用户手势或交互时才显示对话框 resize 窗口大小改变时触发 scroll 元素内发生滚动时触发 实现窗口大小发生变化时，重置div元素高度为当前窗口高度的一半
浏览器事件 常用浏览器事件与DOM事件，包括鼠标事件、键盘事件、框架/对象事件、表单事件、剪贴板事件、打印事件、拖动事件、多媒体事件、动画事件、过渡事件。...onerror: 当发生JavaScript运行时错误与资源加载失败时触发。 onabort: 发送到window的中止abort事件的事件处理程序，不适用于Firefox 2或Safari。...onmouseout: 鼠标移出窗口时触发。 onmouseover: 鼠标移动到窗口时触发。 onauxclick: 指示在输入设备上按下非主按钮时触发，例如鼠标中键。...onmouseover: 鼠标移到某元素之上。 onmouseout: 鼠标从某元素移开。 onmouseup: 鼠标按键被松开。 onwheel: 该事件在鼠标滚轮在元素上下滚动时触发。...onbeforeunload: 该事件在即将离开页面（刷新或关闭）时触发 onerror: 在加载文档或图像时发生错误。 onhashchange: 该事件在当前URL的锚部分发生修改时触发。
Event 对象 Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！...onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onerror 在加载文档或图像时发生错误。 onfocus 元素获得焦点。...onkeydown 某个键盘按键被按下。 onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。...鼠标 / 键盘属性 属性 描述 altKey 返回当事件被触发时，"ALT" 是否被按下。 button 返回当事件被触发时，哪个鼠标按钮被点击。...虚拟键盘码可能和使用的键盘的布局相关。 offsetX,offsetY 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
在一些重交互、重逻辑的网站中，我们需要考虑用户的使用习惯、使用场景，从高可访问性的角度考虑，譬如假设用户没有鼠标，仅仅使用键盘，能否顺畅的使用我们的网站？...图片中的 title 属性是在鼠标在移动到元素上的文本提示。...由于有语义的图片使用 展示，它的一个好处在于，当图片加载失败的时候，可以触发元素的 onerror 事件，我们可以有效的利用这一点，对图片进行异常处理。...核心思路为： 利用图片加载失败，触发 元素的 onerror 事件，给加载失败的 元素新增一个样式类 利用新增的样式类，配合 元素的伪元素，在展示默认兜底图的同时，还能一起展示... 元素的 alt 信息 img.error
2 键盘事件 属性 描述 DOM onkeydown 某个键盘按键被按下。 2 onkeypress 某个键盘按键被按下并松开。 2 [onkeyup] 某个键盘按键被松开。...( object) 2 onbeforeunload 该事件在即将离开页面（刷新或关闭）时触发 2 onerror 在加载文档或图像时发生错误。...2 button 返回当事件被触发时，哪个鼠标按钮被点击。 2 clientX 返回当事件被触发时，鼠标指针的水平坐标。 2 clientY 返回当事件被触发时，鼠标指针的垂直坐标。...2 screenX 返回当某个事件被触发时，鼠标指针的水平坐标。 2 screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。...2 方法 方法 描述 W3C initMouseEvent() 初始化鼠标事件对象的值 2 initKeyboardEvent() 初始化键盘事件对象的值
在线演示 本文代码仓库 本文案例如图所示 image.png 原理 pc端的视差效果通常是 根据鼠标、键盘、滚动条的变化和操作 进行视觉上的差异化控制。...移动端可能还会有 重力陀螺仪 之类的交互，本文不讲移动端。 举些例子： 鼠标移到屏幕左上方：某元素就飞到屏幕右下方（跟鼠标反着来）。 页面往下滑动：背景图不动，文本元素等其他元素往上移动。...进阶版 好玩的交互除了移动元素外，还可以移动背景图位置、旋转元素等操作。 同时还需要考虑元素的 动画幅度。...要考虑的因素包括： 容器旋转 背景图轻微移动 人物跟随鼠标移动 这里的参照物是 鼠标位置与文档的宽高比例 ，并通过自己设置的公式来限制元素移动或旋转的范围。...clientX , clientY , screenX , screenY , offsetX , offsetY 的区别》 《JS 事件监听 addEventListener()》 《JS 移除事件侦听器
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
