这就涉及到了事件流的概念。首先解释两个概念： 事件冒泡 IE的事件流叫事件冒泡，即事件开始时由最具体的元素(文档中嵌套层次最深的节点)接收，然后逐级向上传播到较为不具体的节点。...IE事件 IE事件，取消了事件流中的事件捕获过程。...mouseout：鼠标移出目标的上方。 mousemove：鼠标目标的上方移动。...在 HTML5 中鼠标有了新的事件，如下表格： 属性 描述 ondrag 元素被拖动时运行的脚本。...onreset 当表单中的重置按钮被点击时触发。HTML5 中不支持。 onselect 在元素中文本被选中后触发。 onsubmit 在提交表单时触发。
事件流 这一概念源自于对事件触发对象的思考。例如常见的点击事件，鼠标移动事件。这些事件发生之时，往往不只是点击或者移动到某一特定元素上。...事件冒泡 即事件从指定元素开始传播到最外层的元素，并且该事件不仅会在指定元素上发生，还会在传播过过程中的每一个元素上发生。...IE 级 attachEvent() 和 DOM 2 级一样用来添加事件，只有两个参数 "事件" 和 "处理函数"，不能设置冒泡或者捕获。...这样一来就不会继续捕获下去了 IE 事件对象 为什么不能统一呢，非要学两套 IE 事件对象与 DOM 级有一定差异 常用属性 cancelable 默认值为 false，true 为取消冒泡。...事件目标，与 DOM target 相似 type 事件类型 event 对象的获取 IE 中的 event 对象时作为 window 对象的一部分存在，可以通过 window.event 来获取
， 这样当事件被触发时，响应函数将会按照函数的绑定顺序执行 这个方法不支持IE8及以下的浏览器 attachEvent() 在IE8中可以使用attachEvent()来绑定事件 参数： 事件的字符串...关于事件的传播网景公司和微软公司有不同的理解 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。...网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素 W3C综合了两个公司的方案，将事件传播分成了三个阶段 捕获阶段 在捕获阶段时从最外层的祖先元素...当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown 当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove 当鼠标松开时，被拖拽元素固定在当前位置 onmouseup 提取一个专门用来设置拖拽的函数...， * 如果不希望发生这个行为，则可以通过return false来取消默认行为 * * 但是这招对IE8不起作用 */ return false; }; } 1
div#title上按下鼠标左键并移动鼠标时，拖拽整个div#dialog，但释放鼠标时停止拖拽。...，拖拽整个div#dialog，但释放鼠标时停止拖拽。...在FF下即使添加 draggable="true" 特性，但仅仅会触发 dragstart 事件，但DnD功能并没有被完全打开（拖拽元素时没有任何视觉效果），需要调用 event.dataTransfer.setData...仅在 dragstart 事件中调用，Chrome37和IE10+不支持该方法； void setDragImage({Element} image, {long} x, {long} y) ：设置拖动时跟随鼠标移动的图片...{Element} image必须在DOM树中，而且在渲染树中（即display不为none）为有效元素，否则会导致没有元素跟随鼠标移动； 2.
如果JavaScript关注特定类型事件，那么它可以注册当这类事件发生时要调用的句柄。事件是某个行为或者触发，比如点击、鼠标移动........当用户点击鼠标时 当网页已加载时 当图像已加载时 当鼠标移动到元素上时 当用户触发按键时......button的时候，由于事件冒泡，body的click事件也会触发，但是调用这句后，事件会停止传播 IE中的事件对象 访问IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。...image.png 跨浏览器的事件对象 虽然DOM和IE的event对象不同，但基于它们的相似性，我们还是可以写出跨浏览器的事件对象方案 function getEvent(e) { return...3： 解释IE事件冒泡和DOM2事件传播机制？ IE事件冒泡： 事件从目标元素向父级元素传递，直到传递到 window ( document) 停止。 ?
下面的方式1、方式2属于在 html 中绑定事件，方式3、方式4和方式5属于在js代码中绑定事件，其中，方式4和5属于事件监听，而方式5是最推荐的做法。...阻止事件冒泡和捕获 默认情况下，多个事件处理函数会按照DOM事件流模型中的顺序执行。如果子元素上发生某个事件，不需要执行父元素上注册的事件处理函数，那么我们可以停止捕获和冒泡，避免没有意义的函数调用。...因为当事件传播到outC上的处理函数时，通过stopPropagation阻止了事件的继续传播，所以不会继续传播到冒泡阶段。...根据事件冒泡原理，不管是原有li还是新增li，只要鼠标一移入li中就等同于鼠标移入ul中，自然会触发ul的鼠标移入事件，之后我们只要在ul的事件函数中定义相关行为就可以了。...所有浏览器都支持event对象，但支持方式不同，在DOM中event对象必须作为唯一的参数传给事件处理函数，在IE中event是window对象的一个属性。
在使用这两组函数的时候，先把区别说一下：1.IE不支持捕获，只支持冒泡；2.IE添加事件不能屏蔽重复的函数；3.IE中的this指向的是window而不是DOM对象。...4.在传统事件上，IE是无法接受到event对象的，但使用了attchEvent()却可以，但有些区别。...IE不能屏蔽，需要单独扩展或者自定义事件处理。IE不能传递this，可以call过去。...PS：IE中的事件绑定函数attachEvent()和detachEvent()可能在实践中不去使用，有几个原因：1.IE9就将全面支持W3C中的事件绑定函数；2.IE的事件绑定函数无法传递this；3...四．事件对象的其他补充 在W3C提供了一个属性：relatedTarget；这个属性可以在mouseover和mouseout事件中获取从哪里移入和从哪里移出的DOM对象。
什么是拖拽 拖拽就是在某一个对象上，当鼠标按下去之后，拖着对象走，松开鼠标时，对象位置变成拖拽的位置 简单拖拽 1.实现简单的拖拽功能 2.当拖拽对象到网页边缘时，会停留在边缘 实现代码 在靠近父级边缘时自动吸附在父级边缘 实现代码 时，跟着移动的是对象的虚线框，虚线框就是对象将要拖移到达的位置 实现代码 和顶端的距离 disX = oEvent.clientX - oDiv1.offsetLeft; //将鼠标移动事件都加在...div中距离div左端和顶端的距离 disX = oEvent.clientX - oDiv2.offsetLeft; //将鼠标移动事件都加在
这个事件并不是DOM2级事件规范中规定的，其得到广泛应用，在DOM3中将其纳入了标准； mousedown 用户按下任意鼠标按钮时触发； mouseenter 鼠标光标从元素外部首次移动到元素范围内时触发...；这个事件不冒泡，而且在鼠标移动到后代元素上不会触发；DOM3被纳入标准； mouseleave 在位于元素上方的鼠标光标移动到元素范围之外时触发；这个事件不冒泡，而且在鼠标移动到后代元素上不会触发；DOM3...当鼠标从上图“区域2”移动到“区域3”中，会同时触发“mouseleave”和“mouseout”事件； 当鼠标从上图“区域2”移动到“区域1”（子元素）中，只会触发“mouseout”； 需要注意的时...pageX和pageY：鼠标指针在页面中的位置。在没有滚动条的情况下，同clientX和clientY的值。 screenX和screenY：鼠标指针相对于整个屏幕的坐标信息。 ?...造成上述问题的原因： 第一种，从文档中移除带有事件处理程序的元素（removeChild和replaceChild)时，或innerHTML替换页面中某一部分时，带有事件的元素被删除掉了，但其事件处理程序无法被当成垃圾回收
(e).x) mouseY = parseInt(getMouseXY(e).y) // 鼠标相对元素左和上边缘的坐标 offsetX = mouseX...document 对象上绑定 mousemove 和 mouseup 事件，不在拖拽的元素上绑定是因为当鼠标移动太快而超出元素的范围时会停止拖拽，而绑定在 document 上则可以避免这样的事情发生。...// 获取元素所在的坐标 boxX = box.offsetLeft boxY = box.offsetTop 一般鼠标的位置使用 pageX / pageY 获取，但是 IE 不支持这两个属性。...所以在 IE 中使用 event.clientX + document.body.scrollLeft - document.body.clientLeft; 获取鼠标的位置 if (e.pageX)...，在Chrome，Opera,Safari中指外边缘，即将该元素边框的宽度计算在内，firefox则不包含边框值 pageX,pageY 指相对文档窗口左上角的距离，不会随滚动条移动 clientX,clientY
比如，因鼠标移动发生事件时，事件对象中就会包括鼠标位置（横纵坐标）等相关的信息； 获取事件对象的方式 早期IE浏览器（IE6~8）：window.event 标准浏览器：会将一个event对象直接传入到事件处理程序中...，一般多用于 对象 mousedown 当按下任意鼠标按键时触发 mouseup 当释放任意鼠标按键时触发 mousemove 在元素内当鼠标移动时持续触发 在项目开发中还经常涉及一些常用的鼠标属性...大图用于鼠标在小图上移动时，按比例的显示大图中的对应区域。 编写HTML页面，展示小图、隐藏鼠标的遮罩及大图。 当鼠标在小图上移动时，显示鼠标的遮罩和大图。...大图用于鼠标在小图上移动时，按比例的显示大图中的对应区域。 编写HTML页面，展示小图、隐藏鼠标的遮罩及大图。 当鼠标在小图上移动时，显示鼠标的遮罩和大图。...当鼠标移动时，让遮罩跟着在小图中进行移动。 限定遮罩在小图中的可移动范围。 根据遮罩在小图中的覆盖范围，按比例的显示大图。
事件影响到下方的元素 componentWillUnmount() { // 模态框销毁后移除事件和外层容器 this.root.removeEventListener('touchmove...主要用到的事件如下： onPinch(e) 双指缩放时触发，e.zoom为缩放倍数 onMultipointStart(e) 多点触摸时触发 onPressMove(e) 手指按下并移动时触发，e.deltaX..., e.deltaY为两个方向上移动的距离 onTouchEnd(e) 触摸停止时触发 <AlloyFinger onPinch={this.onPinch} onPressMove={this.onPressMove...需要注意的是这里的zoom是相对于每一次缩放手势开始时的放大倍数，因此需要监听onMultipointStart事件，在开始缩放时记录下原始的scale值。...(); } 另外，在onTouchEnd时判断当前手指移动的距离是否足够大，判断是否切换到下一张图片。
1.为对象添加事件的2种方式 ①：在HTML元素中添加对象的事件 事件 2.鼠标移动事件 Mousemove：鼠标移动时触发事件 鼠标跟随效果 Mouseover：鼠标从元素外，移动元素之上，信息提示...中window对象，提供event属性，所以在IE中可以直接使用 event对象 火狐没有全局event对象，必须在发生事件时，产生一个event对象 ，传递默认方法 6.form的提交、重置事件 submit...onchange 、onblur、 onsubmit 8.默认事件的阻止和传播阻止 使用场景极为常见，超链接用户点击后，取消了不发生跳转。...()用与阻止事件传播，该方法IE不支持，在IE中 cancelBubble
1) 事件流 描述的是从页面中接受事件的顺序 1. 事件冒泡 (IE事件流) 事件开始由最具体的元素接收，然后逐级向上传播到不具体的节点。...IE中的事件对象 在使用DOM0级方法添加事件时，event对象可以作为window对象的一个属性存在，使用attachEvent添加事件处理程序的时候，event对象会作为参数传入事件处理函数中 dom.onclick...>）中的一个或多个字符时 resize 当浏览器窗口被调整到一个新的高度或者宽度时，会触发 scroll 当用户滚动带滚动条的元素中的内容时，在该元素上触发resize,scroll会在变化期间重复被激发...任意鼠标按钮按下时触发 mouseup 释放鼠标按钮触发 mousemove 鼠标在元素内部移动的时候重发触发 mousewheel 滚轮事件 mouseover 鼠标位于元素外部，将其首次移入另一个元素边界之内时触发...相关元素,event特殊属性 1.客户区坐标位置 clientX,clientY 事件发生时，鼠标指针在视口中的水平和垂直坐标 2.页面坐标位置 pageX,pageY 事件发生时，鼠标指针在页面本身而非视口的坐标
，相当于文档的中鼠标的坐标； target事件源；事件源的概念：事件最终发生在页面的那个元素上； 事件源和事件的传播是息息相关的 事件的传播包括：冒泡和捕获；事件传播是浏览器在处理事件行为的机制，冒泡阶段或者捕获阶段...这样表单就不会产生提交行为了； document.onmousewheel = function(){return false;}//IE和chrome的方式，取消鼠标的滚轮的默认行为，网页的滚动条就不会动了...， 在理解事件传播的时候要注意两点： 一、是事件本身在传播，而不是绑定在事件上的方法在传播； 二、是并非所有的事件都会传播，像onfocus,onblur等事件就不会传播，onmouseenter和onmouseleave...需求：在如下的HTML代码中，当你点击这个页面中的一个元素时，弹出这个元素对应的标签名； outer inner 在W3C的标准是在同一事件上，先绑定的方法先执行，并且不能重复绑定同一个方法在同一个事件上，但是IE6、7、8中，如果绑定的方法少于9个，执行的顺序是相反的，超过9个，执行顺序就是混乱的，这些IE中的问题都是比较严重的
1.1 事件冒泡 冒泡事件（Event Bubbling）：事件开始时由最具体的元素接收（文档中嵌套层次最深的那个节点），然后逐层向上传播到较为不具体的节点（文档），看下示例代码： 在DOM事件流中，实际目标（ 元素）在捕获阶段不接收事件，即在捕获阶段，事件从 document对象到 再到 后就停止，进入“处于目标”阶段，事件在 元素上发生...{ // 只有当 event 中的 cancelable 属性为true的事件 event.preventDefault();} 立即停止事件在DOM的传播 通过调用 event.stopPropagation...Web浏览器中的事件类型有很多，DOM3级事件规定有以下几类事件类型： UI事件：当用户与页面上元素交互时触发； 焦点事件：当元素失去或获取焦点时触发； 鼠标事件：当用户通过鼠标在页面操作时触发； 滚轮事件...键，默认false button : 整数，表示按下哪个鼠标键，默认0 relatedTarget : 对象，表示与事件相关的对象，只在 mouseover和 mouseout时使用 案例： var btn
DOM事件流 html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。 当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。 ...事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到DOM最顶层节点的过程。...onclick 和 attachEvent（ie） 只在冒泡阶段触发 // 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 //...在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。 ?...说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。 生活中的代理： ? js事件中的代理： ?
DOM事件流 html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。 当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。 ...●事件冒泡: IE最早提出，事件开始时由最具体的元素接收,然后逐级向上传播到到DOM最顶层节点的过程。...事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。 注意 1. Js代码中只能执行捕获或者泡其中的一个阶段。 2. onclick和attachEvent 只能得到冒泡阶段。...事件对象的使用 事件触发发生时就会产生事件对象，并且系统会以实参的形式传给事件处理函数。 所以，在事件处理函数中声明1个形参用来接收事件对象。 ?...常情况下terget 和 this是一致的， 但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行）， 这时候this指向的是父元素，因为它是绑定事件的元素对象
/环形的渐变（用在画布内容上） addColorStop() 规定渐变对象中的颜色和停止位置 线条样式 属性 描述 lineCap 设置或返回线条的结束端点样式 lineJoin 设置或返回两条线相交时...，或重置当前路径 moveTo() 把路径移动到画布中的指定点，不创建线条 closePath() 创建从当前点回到起始点的路径 lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条...鼠标 / 键盘属性 属性 描述 altKey 返回当事件被触发时，"ALT" 是否被按下。 button 返回当事件被触发时，哪个鼠标按钮被点击。...clientX 返回当事件被触发时，鼠标指针的水平坐标。 clientY 返回当事件被触发时，鼠标指针的垂直坐标。 ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。...IE 属性 除了上面的鼠标/事件属性，IE 浏览器还支持下面的属性： 属性 描述 cancelBubble 如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。
DOM事件流 html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。 当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。...事件对象的使用 事件触发发生时就会产生事件对象，并且系统会以实参的形式传给事件处理函数。 所以，在事件处理函数中声明1个形参用来接收事件对象。 ?...说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。 生活中的代理： ? js事件中的代理： ?...1px 就会触发这个事件 // 2.核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， // 把这个x和y坐标做为图片的top和left 值就可以移动图片...1px 就会触发这个事件 // 2.核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， // 把这个x和y坐标做为图片的top和left 值就可以移动图片
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
