事件流和初识Jquery】的更多相关文章

一.事件流 定义: 多个彼此嵌套元素,他们拥有相同的事件,最内部元素事件被触发后,外边多个元素的同类型事件也会被触发,多个元素他们同类型事件同时执行的效果称为“事件流”. 事件对象获取: 获得: ①主流浏览器(IE9以上版本浏览器): node.onclick = function(evt){evt就是事件对象} addEventListener(类型,function(evt){}/函数名字); function 函数名称(evt){} 事件处理函数的第一个形参就是事件对象 ② IE(6/7/…
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集合中获取第一个元素的当前计算宽度值.这个方法不接受任何参数..css(width) 和 .width()之间的区别是后者返回一个没有单位的数值(例如,400),前者是返回带有完整单位的字符串(例如,400px).当一个元素的宽度需要数学计算的时候推荐使用.width() 方法 . 举例: <!DOC…
一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // 获取匹配元素集合中的第一个元素的宽度值,内容宽度,不含padding .height() // 获取匹配元素集合中的第一个元素的高度值,内容高度,不含padding 注意:这个方法不接受任何参数..css(‘width’)(或.css(‘height’))和 .width()(或.height()…
事件流 多个彼此嵌套元素,他们拥有相同的事件,最内部元素事件被触发后,外边多个元素的同类型事件也会被触发,多个元素他们同类型事件同时执行的效果称为“事件流” 例子:html代码: <div class="one"> <div class="two"> <div class="three"></div> </div> </div> css样式代码: .one{ width: 2…
一. jQuery事件传播 在DOM2级事件模型中,一旦事件被触发.事件流首先从DOM树顶部(文档节点)向下传播.直到目标节点.然后再从目标节点向上传播到DOM树顶.从上到下的过程被称为捕获阶段.从下到上的过程被称为冒泡阶段. 利用循环体结构分别为button元素及其全部父级节点注冊一个捕获型鼠标单击类事件处理函数. 代码演示样例: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q…
jQuery  事件流的概念 什么是事件流 DOM事件流 1. 事件捕获阶段; 2.处于目标阶段; 3.事件冒泡阶段; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件流</title> <script> window.onload = function(){ var oBtn = doc…
1.事件概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件.想要知道这些事件是在什么时候进行调用的,就需要了解一下“事件流”的概念. (1)什么是事件流 事件流描述的是从页面中接收事件的顺序 a.DOM事件流 “DOM2级事件”规定的事件流包括三个阶段: ① 事件捕获阶段: ② 处于目标阶段: ③ 事件冒泡阶段 那么其实呢,js中还有另外一种绑定事件的方式:看下面代码: <!D…
<div id="aaron"> <div id='test'> <ul> <p>点击p被委托,ul被阻止了,因为内部重写了事件对象</p> </ul> </div> </div>v> 测试代码 var aaron = $("#aaron") //同一个元素上绑定不同的事件委托 aaron.on('mousedown','p',function(e){ consol…
1.事件流概念 描述的是从页面中接收事件的顺序 包含事件捕获阶段,处于目标阶段,事件冒泡阶段 2.绑定事件 语法 bind(type,data,fn) 示例:每个标签被点击的时候,弹出其文本 $("p").bind("click", function(){ alert( $(this).text() ); }); 3.解绑事件 unbind(type,fn); 示例:将段落的click事件取消绑定 $("p").unbind( "cli…
一.昨日内容回顾    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…