JS 事件对象和事件冒泡

【JS 事件对象和事件冒泡】的更多相关文章

JS事件对象与事件委托

事件对象包含事件相关的信息,如鼠标.时间.触发的DOM对象等 js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: document.getElementsByTagName("div")[0].onclick = function(e){ e = window.event || e; //兼容IE低版本(事件对象绑定在window的event上) console.log(e);//这里e就是事件对象 } 事件的属性和方法 type:获取事件类型(c…

js跨浏览器事件对象、事件处理程序

项目中有时候会不用jquery这么好用的框架,需要自己封装一些事件对象和事件处理程序,像封装AJAX那样:这里面考虑最多的还是浏览器的兼容问题,原生js封装如下:var EventUtil={ //节点.事件名.事件处理函数 addHanler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false);//这里一个参数为false意为在事件冒…

JS事件流、事件监听、事件对象、事件委托

JS事件流: 01.DOM级别和DOM事件 02.JS事件流:页面中接收事件的顺序事件冒泡阶段-->处于目标阶段-->事件捕获阶段 (事件捕获总发生在事件冒泡前面) 03.捕获:从外向里:冒泡:从里向外.外window-Document-html-body-box1-box2...里 <div class="box" id="box1"> <div class="box" id="box2"&g…

JavaScript事件对象与事件的委托

事件对象包含事件相关的信息,如鼠标.时间.触发的DOM对象等 js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: document.getElementsByTagName("div")[0].onclick = function(e){ e = window.event || e; //兼容IE低版本(事件对象绑定在window的event上) console.log(e);//这里e就是事件对象 } 事件的属性和方法 type:获取事件类型(c…

【2017-05-03】winform打印控件、事件对象和事件数据、MDI窗体容器

一.打印控件第一步先把打印对象搞出来. - printDocument 打印对象(将要打印的内容放到该对象里,从该对象里取内容打印) 设置他的PrintPage事件(对于要打印的每一页触发一次) - pageSetupDialog 打印设置对话框 - printPreviewDialog 打印预览对话框 - printPreviewControl 打印预览控件. 只需要把预览对象给他设置上就好 - printDialog 打印对话框打印界面里面是否禁用页面范围.打印到文件等从Pri…

JS 事件对象和事件冒泡

1.事件对象 js的事件对象中保存了当前被触发事件的一些相关的属性信息,如事件源.事件发生时的鼠标位置.事件按键等. 事件对象的获取方法: IE中可以window.event直接获取,而Firefox中则不可以,可通过如下方法获取: 1)var event = window.event || arguments.callee.caller.arguments[0]; 2)通过参数传.function(e) { var event = window.event || e; } 2.事件源事件源即…

JavaScript：事件对象Event和冒泡

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 绑定事件的两种方式我们在上一篇文章中已经讲过事件的概念.这里讲一下注册事件的两种方式,我们以onclick事件为例. 方式一:onclick 举例: <body> <button>点我</button> <script> var btn = document.getElementsByTagName("button&qu…

Vue2学习笔记:事件对象、事件冒泡、默认行为

1.事情对象 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> window…

js：事件（注册、解绑、DOM事件流、事件对象、事件委托）

1.注册事件 (1)传统方式注册事件 <body> <button id="b1">请点击</button> <script> var b=document.getElementById("b1"); b.onclick=function(){ alert("hello"); } b.onclick=function(){ alert("你好"); } </script&g…

JS事件-对象监视事件，事件触发函数

写在前面: 一句话作为本文的核心思想:对象监视事件,事件触发函数: (一)事件 1.事件分类 (1)鼠标事件 click() 鼠标单击 dblclick() 鼠标双击 mouseover() 鼠标移入事件 mouseout() 鼠标移出事件 mousemove() 鼠标移动事件 mousedown() 鼠标按下事件 mous…

DOM事件处理程序-事件对象-键盘事件

事件流: 事件流--描述的是从页面中接受事件的顺序 IE ---事件冒泡流:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档). Netscape ---事件捕获流:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件. 使用事件处理程序: 1. HTML事件处理程序 <input type="button" value="按钮" id="btn" onclick=&q…

python全栈开发day49-jquery的位置信息、事件流、事件对象，事件委托，事件绑定和解绑

一.昨日内容回顾 1. jQuery的属性操作 1) html属性操作:attr 2) DOM属性操作:prop 3) 类样式操作:addClass.removeClass.toggleClass 4) 值操作:html(),text(),val() 2. jQuery的DOM操作 append appendTo prepend prependTo after insertAfter before insertBefore remove detach empty repacleWit…

jQuery基础（4）- 位置信息、事件流、事件对象、事件代理、jquery事件

一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // 获取匹配元素集合中的第一个元素的宽度值,内容宽度,不含padding .height() // 获取匹配元素集合中的第一个元素的高度值,内容高度,不含padding 注意:这个方法不接受任何参数..css(‘width’)(或.css(‘height’))和 .width()(或.height()…

JavaScript的事件概述以及事件对象，事件流

事件处理程序 JavaScript 事件对象是由访问 Web 页面的用户引起的一系列操作,例如:用户点击页面上的某个按钮或者鼠标移动到页面的某个图片上而产生一系列的互动的反馈. 我们通过为指定事件绑定回调函数的形式来处理事件,当指定事件触发以后我们的回调函数就会被调用,这样我们的页面就可以完成和用户的交互了. 事件一般是用于浏览器和用户操作进行交互.最早是 IE 和 Netscape Navigator 中出现,作为分担服务器端运算负载的一种手段.直到几乎所有的浏览器都支持事件处理. Jav…

Javascript中的事件对象和事件类型

接上次看JS的事件冒泡和捕获,所以顺带就把事件相关的知识都看完好了而且想到一个好的学习方法,第一天自己看,第二天把前一天学习的东西写下来,一方面可以当复习,一方面当重新整理并且分享事件对象事件处理程序函数在处理事件时,或者说DOM在触发某个事件的时候,会产生一个包含事件相关信息的event事件对象对于不同浏览器环境,这个event事件对象有一些差距 DOM中的事件对象不管是DOM0级还是DOM2级兼容DOM的浏览器会将一个event对象传入事件处理程序中常用的event对象的一些属…

JavaScript事件对象与事件处理程序

在学习之前建议请看一下事件流.事件冒泡.事件捕获一.事件对象事件对象:在DOM触发事件时,会产生一个事件对象event,这个事件对象包含着所有与事件相关的信息.既然event是事件对象,那么它必然存在属性 ①DOM中的事件对象event属性 (1).type属性用于获取事件类型 (2).target.srcElement<兼容IE事件>属性用于获取事件目标 (3).stopPropagation()方法用于阻止事件冒泡 (4).preventDefault() 方法阻…

js给对象onclick事件赋值

1)当方法没有参数时,赋值可以直接用onclick = 方法名 window.onload = function() { $('btnTest').onclick = test; } function test() { alert(val); } 2)当方法有参数时,用onclick = 方法名(参数)时就有错了,例如: function show(value1,value2){ alert(value); } btn.onclick = show(value1.value2); 以上代码执行起…

HTML DOM 事件对象 ondragend 事件

学习网站:http://www.runoob.com/jsref/event-ondragend.html 定义和用法 ondragend 事件在用户完成元素或首选文本的拖动时触发. 拖放是 HTML5 中非常常见的功能. 更多信息可以查看我们 HTML 教程中的 HTML5 拖放. 注意: 为了让元素可拖动,需要使用 HTML5 draggable 属性. 提示: 链接和图片默认是可拖动的,不需要 draggable 属性. 在拖放的过程中会触发以下事件: 在拖动目标上触发事件 (源元素):…

JavaScript的事件对象_事件流

事件流事件流是描述的从页面接受事件的顺序,当几个都具有事件的元素层叠在一起的时候,那么你点击其中一个元素,并不是只有当前被点击的元素会触发事件,而层叠在你点击范围的所有元素都会触发事件.事件流包括两种模式:冒泡和捕获. 事件冒泡,是从里往外逐个触发.事件捕获,是从外往里逐个触发.那么现代的浏览器默认情况下都是冒泡模型,而捕获模式则是早期的 Netscape 默认情况.而现在的浏览器要使用 DOM2 级模型的事件绑定机制才能手动定义事件流模式. <script type="text/java…

简单总结焦点事件、Event事件对象、冒泡事件

每学习一些新的东西,要学会复习,总结和记录. 今天来简单总结一下学到的几个事件:焦点事件.Event事件对象.冒泡事件其实这几个事件应该往深的说是挺难的,但今天主要是以一个小菜的角度去尝试理解一些基本的知识点. 1.焦点事件: 1.1概念理解: 想象场景:当一堆text文本框出现在面前,当点击其中一个文本框,它就会响应用户,并出现光标闪动(这时,点击令它获得焦点). 所以说:焦点事件是用来让浏览器区分哪一个对象是用户要进行操作(输入值.选择.跳转)的. 总结===> 浏览器(区分)哪一个对象…

学习javaScript必知必会(4)~事件、事件绑定、取消事件冒泡、事件对象

1.常用的事件: ① onload:页面加载 ② onblur: 失去焦点 onfocus: 获取焦点 ③ onclick:点击 ④ onmouseover:鼠标经过 onmouseout:鼠标离开 ⑤ onchange:内容改变 ⑥ onsubmit:表单提交 2.绑定事件方式: (1)行内绑定: <元素事件="事件处理程序(函数)"> <script> function 函数名(){ console.log(this); //行内绑定的this是指向win…

Js高级事件对象

1.事件浏览器客户端上客户触发的行为都成为事件所有的事件都是天生自带的,不需要我们我去绑定,只需要我们去触发. 通过obj.事件名=function(){} 事件名:onmouseover onmouseout onmousedown onmousemove onmouseup Onclick onchange onfocus onblur 等等. 当用户触发一个事件时,浏览器的所有详细信息都存在一个叫event的对象上.我们把他叫事件对象所有事件再绑定方法的时候,天生自带一个参数就叫ev…

js 事件对象

/* 事件绑定的格式: 元素节点.on + 事件类型 = function(){ } 元素节点事件类型 on+事件类型:事件处理函数 [注]上述三者一绑定:生成一个新的事件对象. [注]触发事件以后,系统会去调用相关的事件处理函数. 事件对象获取:系统调用相关的函数的时候,会直接将生成的事件对象,当做参数传入到我们的函数内部. 已下代码演示用到的html结果: <body> <button id = "btn1">按钮</button> </…

从零开始学习jQuery (五) 事件与事件对象

本系列文章导航从零开始学习jQuery (五) 事件与事件对象一.摘要事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解. 二.前言本篇文章是至今为止本系列内容最多的一篇, 足以可见其重要性. 大家反映要多列举示例. 我会在时间允许的情况下尽量多列举示例. 真正的投入生产使用的实例暂时还无法加入到文章中, 但是可能最后我会列举一些作品供大家借鉴. 另外本人水平有限, 因为我不是UI设计师. 文章可能有错误的地方,…

jQuery入门（3）事件与事件对象

jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应用一.事件与事件对象首先看一下我们经常使用的添加事件的方式: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t…

javascript 事件编程之事件（流，处理，对象，类型）

1. 事件处理 1.1. 绑定事件方式 1)行内绑定语法: //最常用的使用方式 <元素事件="事件处理程序"> 2)动态绑定 //结构+样式+行为分离的页面(html+css+js事件) 语法: 对象.事件=事件处理程序行内绑定和动态绑定的重要区别: 以上程序是不可用的,点击div时,执行test函数,这时,test中的this表示window对象因为: 我们定义test函数,实际上相应于在window对象下定义了test属性 test(); -> 相当于…

jQuery-3.事件篇---事件对象的使用

jQuery事件对象的作用事件中的Event对象容易被初学者忽略掉,可能大多时候初学者不知道怎么去用它,但有些时候它还是非常有用的一个标准的"click"点击事件 $(elem).on("click",function(event){ event //事件对象 }) 在不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异.jQuery根据 W3C 标准规范了事件对象,所以在jQuery事件回调方法中获取到的事件对象是经过兼容后处理过的一个标准的跨浏览器对象…

DOM中的事件对象和IE事件对象

DOM中的事件对象 IE事件对象属性/方法类型读/写说明属性/方法类型读/写说明 bubles Boolean 只读表明事件是否冒泡 cancleBubble Boolean 读/写默认为false,但将其设置为true就可以取消事件冒泡 (与DOM中的stopPropagation()方法的作用相同) cancelable Boolean 只读表明是否可以取消事件的默认行为 returnValue Boolean 读/写默认为true,但将其设置为f…

移动端事件对象touches的误区

不想长篇大论,也是自己遗留下的一个错误的理解在移动端触屏事件有四个 // 手势事件 touchstart //当手指接触屏幕时触发 touchmove //当已经接触屏幕的手指开始移动后触发 touchend //当手指离开屏幕时触发当然还有个touchcancel事件,但是我测试后,并没发现有什么卵用每个触摸事件对象中都包括了touches这个属性,用于描述前位于屏幕上的所有手指的一个列表那么获取当前事件对象我们习惯性的使用 event = event.touches[0] ,我记得…

深入理解DOM事件机制系列第三篇——事件对象

× 目录 [1]获取 [2]事件类型 [3]事件目标[4]事件代理[5]事件冒泡[6]事件流[7]默认行为前面的话在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.所有浏览器都支持event对象,但支持方式不同.本文将详细介绍事件对象获取事件对象 [1]一般地,event对象是事件程序的第一个参数 [注意]IE8-浏览器不支持 //IE8-浏览器输出undefined,其他浏览器则输出事件对象[object MouseEvent] <div i…