js event bubble and capturing

Bubble:

pppppp

Capturing

pppppp

Mix

pppppp

To Stop Bubble

pppppp

JS Bin

时间： 2024-08-18 19:32:48

js event bubble and capturing的相关文章

JS Event 鼠标拖拽事件

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>JS Event鼠标拖拽事件</title> <style> #box{width:200px;height:200px;background:#000;position:absolute;}

JS Event handler example - event capture and bubble

source link: http://www.ido321.com/1570.html 这个example 有一个陷阱,如果测试用的script不写在window.ready事件里,将得不到效果. 事件捕获和事件冒泡是事件流中的两个阶段,任何事件产生时,如点击一个按钮,将从最顶端的容器开始(一般是html的根节点).浏览器会向下遍历DOM树直到找到触发事件的元素点击button 1: target: button 至此target node处理完了,继续处理hierarchy树的下一个节点:

JS:event对象下的target属性和取消冒泡事件

1.target 通过获取DOM元素 var box = document.getElementById("box"); document.box.onclick = function(){ alert(123);//123 } event对象下的target方法 :获取事件的目标,不用document.getElementById("box")即可获取目标; //W3C下 document.onclick = function(evt){ var e = evt

JS(event事件)

常用的event事件: 属性此事件发生在何时... onabort 图像的加载被中断. onblur 元素失去焦点. onchange 域的内容被改变. onclick 当用户点击某个对象时调用的事件句柄. ondblclick 当用户双击某个对象时调用的事件句柄. onerror 在加载文档或图像时发生错误. onfocus 元素获得焦点. onkeydown 某个键盘按键被按下. onkeypress 某个键盘按键被按下并松开. onkeyup 某个键盘按键被松开. onload 一张页面

图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别

通过 3 张图和 1 张表格,轻松区别 JavaScript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性. 一.测试代码如下: <!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>Javascript</title> <st

JS event使用方法详解

event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义. 下面的例子检查鼠标是否在链接上单击,并且,如果shift键被按下,就取消链接的跳转. <HTML> <HEAD><TITLE>Cancels Links</TITLE> <SCRIPT LANGUAGE="JScript">... function cance

js event对象的clientX,offsetX,screenX和pageX的区别

总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下(画得我手那个酸呀....) 先总结下区别: event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event.pageX.event.pageY 类似于event.clientX.event.clientY,但它们使用的是文档坐标而非

JS——event

触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息: 普通浏览器支持 event(传参),IE678支持 window.event(无参),兼容写法: <script> var divEle = document.getElementsByTagName("div")[0]; divEle.onclick = function (e) { e = e || window.event; console.log(e); } </s

js event

event jquery获取: 在jquery中调用函数中最多只能有event这一个参数,所有的值在event.data中可以获取. $('select').click(function(event)){ ********** } event 冲突: 另外表单元素的 blur 和非表单元素的click事件会冲突,因此将click事件变为mousedown或者对blur的this进行延迟. 原文地址:https://www.cnblogs.com/DennyZhao/p/9559739.html