[js]事件篇

【[js]事件篇】的更多相关文章

js事件篇

javascript和html之间的交互式通过事件来实现的,事件就是文档或浏览器窗口中发生的一些特定的交互. 事件流:描述的是从页面中接收事件的顺序. 不同的是,IE和Netscape开发团队竟然提出了差不多是完全相反的事件流概念.IE的事件流失事件流冒泡,而Netscape的事件流是事件流捕获. <div id=<span id='demo1'>sdasd</span></div> <script> var oDiv = document.getEl…

一.事件流 1.冒泡事件:从特定的事件到不特定事件依次触发:(由DOM层次的底层依次向上冒泡) (1)示例: <html onclick="add('html<br>')"> <body onclick="add('body<br>');"> <div onclick="add('div<br>');"> <p onclick="add('p<br>…

2. web前端开发分享-css,js进阶篇

一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手的地方可以用firebug, chrome调试工具分析网站结构样式.如果技术熟练自信可以自己先写,写完之后在对比,以其来找寻自己的差距.结构是网站的骨架,如果写的不合理,将是bug产生的重要根源,所以学习分析大型网站的布局样式对初学者来说帮助是很大的.大多数初学者由于对技术的不自信,html结构往往…

js事件监听器用法实例详解

这篇文章主要介绍了js事件监听器用法,以实例形式较为详细的分析了javascript事件监听器使用注意事项与相关技巧,需要的朋友可以参考下本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分析如下: 1.当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,也就是说,在对象的onclick事件发生时,只会执行最后绑定的方法.而用事件监听则不会有覆盖的现象,每个绑定的事件都会被执行.如下: window.onload = function(){ v…

移动终端学习2：触屏原生js事件及重力感应

如今智能移动设备已经渗透到人们生活的方方面面,用户数量也在不断迅速增长(市场研究机构 eMarketer 在今年初发表的趋势报告中预测,2014年至2018年,中国智能手机用户从总人口的 38.3%增加到 51.1%:2014年中国智能手机用户已超过5亿,2018年将超过7亿) 1. 触屏手势随着大屏幕时代的到来,物理键盘逐渐退化,只剩下今天可见的 home 或 return 等少数按键.大部分的手机操控都依赖触屏完成. 现在触屏操作主要依靠电容式触摸屏传感器,可以实现多点触控.触屏手势参考如…

web前端开发分享-css,js进阶篇

一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手的地方可以用firebug, chrome调试工具分析网站结构样式.如果技术熟练自信可以自己先写,写完之后在对比,以其来找寻自己的差距.结构是网站的骨架,如果写的不合理,将是bug产生的重要根源,所以学习分析大型网站的布局样式对初学者来说帮助是很大的.大多数初学者由于对技术的不自信,htm…

css,js工具篇

4. web前端开发分享-css,js工具篇 web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io,而这两个对他的支持是: sublime text 是所有编辑器里边支持emmet比较好的的唯一一款. webstorm是所有编辑器里边唯一内置emmet的一款,并且将emmet的精神往前推动的一款. 一. css工具: 1. emmet http:/…

前端面试题目汇总摘录（JS 基础篇）

JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string typeof null; // object typeof isNaN; // function typeof isNaN(123); //boolean typeof []; // object Array.isArray(); // false toString.call([]); // [object Array] var a…

这可能是最简明扼要的 js事件冒泡机制+阻止默认事件讲解了

哎 js事件冒泡机制和阻止冒泡阻止默认行为好像永远也整不清楚,记了忘忘了记...醉了这篇文章写完以后下次再忘记就呼自己一巴掌,忘一次一巴掌首先要明白两个概念——事件和事件流事件指的是用户或浏览器自身执行的某种动作,又称为原始事件模型,例如onclick等事件流指的是从页面中接收事件的顺序,也就是说当一个事件产生时,这个事件的传播过程就叫做事件流. 事件冒泡: 从事件目标开始一级级向上冒泡,到document为止——从里到外 IE 5:div--body--document; I…

js事件委托 jQuery写法

http://www.cnblogs.com/liugang-vip/p/5616484.html 不是抄的,这篇文章写的细这是js 事件委托写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件获取目标元素</title> <style> li{width: 499px;height:…

jQuery事件篇---高级事件

内容提纲: 1.模拟操作 2.命名空间 3.事件委托 4.on.off 和 one 发文不易,转载请注明出处! 一．模拟操作在事件触发的时候,有时我们需要一些模拟用户行为的操作.例如:当网页加载完毕后自行点击一个按钮触发一个事件,而不是用户去点击. //点击按钮事件 $('input').click(function () { alert('我的第一次点击来自模拟!'); }); //模拟用户点击行为 $('input').trigger('click'); //可以合并两个方法 $('inp…

JS事件冒泡机制和兼容性添加事件

本篇文章主要来讲讲事件的冒泡机制和添加事件的几种方法. 一. JS的时间传递顺序: 捕获阶段 -> 目标阶段 -> 冒泡阶段捕获阶段是指从父层往子层找.比如 <body><div></div></body> ,我们会先找到 body,然后下一个才是 div.就像中央领导发布政策一样. 从上往下通知. 目标阶段就是找到目标的那段时间,这个我们暂且不谈. 冒泡阶段就是从子层往外层传.比如 <body><div><…

The Node.js Event Loop, Timers, and process.nextTick() Node.js事件循环，定时器和process.nextTick()

个人翻译原文:https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/ The Node.js Event Loop, Timers, and process.nextTick() What is the Event Loop? 什么是事件循环圈? The event loop is what allows Node.js to perform non-blocking I/O operations — despite…

dynamic-css 动态 CSS 库，使得你可以借助 MVVM 模式动态生成和更新 css，从 js 事件和 css 选择器的苦海中脱离出来

dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化而触发一些效果,原本你要写 js 去绑定滚动事件,然后计算偏移量,然后更新元素 css,使用 dynamic-css,你只要根据语法去写好 css 表达式就可以了.对于一些原本需要复杂的 js 判断的动态 css,用 dynamic css 表达式几行代码搞定. 举两个例子: 元素跟随鼠标移动实现…

JS创建对象篇

JS创建对象篇 Object构造函数创建 var person = new Object(); person.name = "Tom"; person.age = 10; person.sayName = function(){ alert(this.name); } 对象字面量 var person = { name : "Tom",//注意这边是以“,"分隔,而不是”;" age : 10, sayName : function(){ ale…

什么是JS事件冒泡？

什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window). 附一张图: 如何来阻止Js事件冒泡? <!DOCTYPE html> <html> <head&g…

js学习篇1--数组

javascript的数组可以包含各种类型的数据. 1. 数组的长度 ,直接用 length 属性; var arr=[1,2,3]; arr.length; js中,直接给数组的length赋值是会改变数组的大小的,例如: var array=[1,2,3]; console.log(array.length);//输出array的长度为3 array.length=5;//给array的长度赋值为5,此时array的内容变为[1,2,3,undefined,undefined] consol…

1. web前端开发分享-css,js入门篇

关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学习之路是比较好的.学习没有捷径,但学习是有技巧与方法. 一,css入门篇: 推荐书籍:css哪些事儿,精通css. 理由:css那些事儿,他是一本介绍css基础类的书,是入门的经典读物. 系统的介绍了css的选择符,伪类,工作环境,盒模型,两列,三列自适应布局.文字样式,图片处理,列表,表单…

js事件技巧方法整合

window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveTo(0,0);//设置浏览器位置 })() screen.availHeight;//显示屏最高高度 screen.availWidth;//显示屏最宽宽度 /*窗口改变大小事件*/ //js window.onresize = function() { if(resizeTimer==null)…

js事件浅析

js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮');">点击这个按钮</button> 二. 属性绑定(DOM0级事件) 只能绑定一个函数 button.onclick = function() {}; 三. 事件监听函数(DOM2级事件) element.addEventListener(<event-name>, &…

js 事件大全

Js事件大全一般事件事件浏览器支持描述onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDown IE4|N4|O 鼠标上的按钮被按下了onMouseUp IE4|N4|O 鼠标按下后,松开时激发的事件onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件onMouseMove IE4|N4|O 鼠标移动时触发的事件onMouseOut IE4|N3|O3 当…

原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaScript对象属性进行绑定: var a=document.getElementById("a"); a.onclick=function(){alert("你好!")};//这里也可以不用匿名的函数直接赋方法名也是可以的通过以上这种方式进行事件函数的绑定有个缺点就是…

JS事件

JS事件: 声明:为了事件对象event跨浏览器兼容: var oEvent==ev||event; 所以在下面用到 event 的地方都用 oEvent 代替 1)doucument的本质:是整个文档的根节点,所有的html都包含在document里面, 不过我们平时都是省略document document.childNodes[0].tagName-->! document.childNodes[1].tagName-->htm…

原生js事件和jquery事件的执行顺序问题

场景:近日,写前端页面时候,在针对输入框input操作时,用到了jquery的插件,插件中使用了jquery的focus()和blur()方法.但是同时,又需要在插件之外再针对输入框的获取焦点和失去焦点进行一些一些逻辑操作. 思路一:改写插件,使用回调函数或初始化函数. 原来的插件并没有使用回调函数或初始化函数.可以改写插件,增加回调函数或初始化函数,视情况,在原来逻辑执行之前或之后先执行逻辑操作. 思路二:使用原生js事件. 开始的时候并没有这个思路,但是由于原生js事件函数onfocus()…

特殊js事件

1:点击enter事件 $(document).keypress(function(e) { // 回车键事件 if(e.which == 13) { submitForm(); } }); 2:JQUERY表单ajax提交事件 1):添加js插件 2):添加js事件 function submitForm(){ $.ajax({ url:'${root}/doLogin', data:$('form').serialize(), dataType:'json', cache:false, ty…

js 事件

事件:一般用于浏览器与用户操作进行交互 js事件的三种模型:内联模型.脚本模型.DOM2模型内联模型:事件处理函数是HTML标签的属性 <input type="button" value="点击" onclick="test()" /> 脚本模型:事件处理函数谢谢脚本中从而达到层次分离的原则 document.onclick=function(){ //处理逻辑 } DOM2模型: 一.如何获得事件函数 function test…

js一篇汇总

一.js的数据类型和变量 JavaScript 有六种数据类型.主要的类型有 number.string.object 以及 Boolean 类型,其他两种类型为 null 和 undefined. String 字符串类型:字符串是用单引号或双引号来说明的.(使用单引号来输入包含引号的字符串.)如:“The cow jumped over the moon.” 数值数据类型:JavaScript 支持整数和浮点数.整数可以为正数.0 或者负数:浮点数可以包含小数点.也可以包含一个 “e”(大小…