js事件处理

js事件处理
js事件处理

JavaScript组成

ECMAScript:JavaScript语法核心。

DOM:文档对象模型(Document Object Model),提供访问和操作网页内容的方法和接口。

BOM:浏览器对象模型(Browser Object Model),提供与浏览器交互的方法和接口。

JavaScript中有五种简单数据类型,也称为基本数据类型,分别是undefined、null、boolean、number和string。另外还有一种复杂数据类型——object对象类型。JavaScript是基于对象的语言,这意味着程序员既可使用系统自定义的对象,也可使用自己创建的对象。

1 文档的结构和遍历

ParaentNode 获取该节点的父节点

ChildNodes 获取该节点的子节点数组

FirstChild 获取该节点的第一个子节点

LastChild 获取该节点的最后一个子节点

NextSibing 获取该节点的下一个兄弟节点

PreviousSibing 获取该节点上的一个兄弟节点

一般地,节点至少拥有nodeType nodeName nodeValue这三个基本属性吗,节点的类型不同,这三个属性的值也不相同NodeType属性类型分别对应1到12的常数值

NodeType 节点的类型

1 元素节点

2 属性节点

3 文本节点 4CDATA节点 5 实体引用名节点 6 实体名称节点 7处理指令节点 8注释节点 9文档节点 10文档类型节点 11 文档片段节点 12 DTD声明节点

111

我是一个p标签

我是第二个p标签

2 作为元素树的文档

firstElementChild 第一个元素节点

lastElementChild 最后一个子元素节点

childElementCount 子节点元素的数量

111

我是一个p标签

我是第二个p标签

3 javascript操作标准HTML属性

这是一张图片

非标准html属性

getAttribute();

setAttribute();

两个方法都不要理会HTML中的保留字,保留字就是参数像那么class,name等

选择一张图片

4 节点属性

Attribute属性

Document.getElementById(“img1“)[0];// 注意通过索引访问时根据标签的属性Document.getElementById(“img1“)[0].src//输出src对应的值

这是一张图片

五搜索的内容

innerText ,textContent

innerText 和textContent的区别:

当文本为空时innerText输出的是“”textContent输出的是undefined

我是一个p标签

我是第二个p标签

6 创建,插入,删除节点

Document。CreateTextNode()创建一个文本节点

我是第一个p

我是第二个p

Document.creatElement();//创建一个元素节点

我是第一个p

我是第二个p

AppendChild()//将一个节点插入到调用节点的最后面InsertBefore()//两个参数,第一个参数为准备插入的节点,第二个指明在那个节点前面如不写参数将和appendChild()一样

我是第一个p

我是第二个p

7删除和替换节点

RemoveChild();//用父元素调用,删除一个节点

ReplaceChild();里面两个参数,第一参数为新的元素,第二个参数为被替换的元素,由父元素调用

我是第一个p

我是第二个p

替换

我是第一个p

我是第二个p

8 通过javascript操作css

通过元素的style属性可以随意的读取设置CSS样式:

9 数据类型

–typeof操作符

由于JavaScript是弱类型的,因此需要一种手段来检测给定变量的数据类型,typeof就是负责提供这方面信息的操作符

var message = "hi";

document.write(typeof message); //string

var name;

document.write(typeof name); //undefined

var age = 35.5;

document.write(typeof age); //number

var obj = new Date();

document.write(typeof obj);//object

–undefined

对未初始化的变量及未声明的变量使用typeof运算符均会返回undefined。

name是未初始化,address是未声明,所以输出两个“undefined”。

–null

null是空类型,表示一个变量已经有值,但值为空对象,使用

typeof检测时会返回object。

–boolean

boolean是布尔类型,也称真假类型。这个类型有两个标准值:

true(真)和false(假)。布尔值用来表示一个逻辑表达式的结果,通常用做判断处理。

–number

在c#语言中,小数和整数会被分别存储在不同的类型中。但在JavaScript中,整数、小数都是number。

–string

string是字符串类型,这是程序中使用最广的一种类型。字符串是

使用单引号或双引号引起来的若干字符。

–string

JavaScript不区分单引号或者双引号,但应避免出现引号不匹配的

情况,如:var str=?hello” 或者var str=”hello”。

防止出现这类情况最好的办法是先写一对引号,再写中间的内容。

如果想在字符串内使用单/双引号作为字符的话,应注意不要与字符串的开始和结束的引号发生冲突,如:

var info=“he said ”what time is it“”; 这是一个错误的字符串格式,避免这种情况最好的方法就是使用单/双引号混合,改正:var

info=…he said “what time is it”?;

10 javaScript的流程控制语句

–选择结构

检测变量name是否赋值,否则就对它进行赋值操作

可以使用if(typeof name==“undefined”) 判断变量name是否赋值,如果返回true,则name没有赋值;反之,name有值。

求变量x的绝对值:

根据小时数,在页面上输出不同的问候语:

Date是JavaScript的内置对象,通过它可以获取时间,Data对象的getHours()方法可以返回系统的小时数

根据星期,在页面上输出是工作日还是休息日。

switch后的条件表达式结果一旦碰到与之匹配的case,就会执行该case后的语句,如果没有break语句,继续后面case下的代码。

11 javascript循环语句

while(条件表达式){

语句或语句块

}

如果一开始就检测到条件表达式的结果是false,则{}中的代码一次都不执行,即循环的次数是0。如果条件表达式的结果始终是true,称为死循环,应当避免这种情况。

输出摄氏温度与华氏温度的对照表,要求从摄氏温度0度到250度,每隔20

度为一项,对照表中的条目不超过10条。转换关系:华氏温度 = 摄氏温度 *

9 / 5.0 + 32。

do-while语句的功能和while语句差不多,只不过它是在执行完第

一次循环之后才检测条件表达式的值,这意味着包含在{}的代码至

少要被执行一次。

输出5的阶乘(阶乘指从1乘以2乘以3乘以4一直乘到所要求的数。例如所要求的数是5,则阶乘式是1*2*3*4*5,得到的积是120,120就是5的阶乘)。

for(初始化表达式;循环条件表达式;循环后的操作表达式){

语句或语句块

}

由于JavaScript中不存在块级作用域,因此也可以在外部访问到在循环内部定义的变量,

和之前学的c#语言不同。

用for改造“输出摄氏温度与华氏温度对照表”的案例。

break与continue:

只有循环条件表达式的值为false时,循环语句才能结束循环,如果想提前中断循环,可以在循环体语句块中添加break语句。在循环体中添加continue语句,就跳过本次循环要执行的剩余语句,然后开始下一次循环。

1~20之间的偶数相加,输出累加和大于30的当前数

12 函数定义与调用

?定义函数有以下几个规则:

1. 使用function关键字,function后是函数名,同c#语言不同,不必说明返回值的类型。

2. 函数的命名规则与变量名的命名规则相同。

3. 函数名后的(),可以包含若干参数,也可以选择不带任何参数。

4. 最后是一对{},包含具体实现特定功能的若干语句。

function getArea(width,height){

var result=width*height ;

document.write("面积为:"+result);

}

参数width、height表示使用此函数时,要传递所求的长方形的宽度和高度值

在中嵌套中定义一个名为getArea的函数,并且包含有两个名为width和height的参数分别用来传入宽度和高度的值。在函数体内,定义一个名为result的变量,用来保存面积,最后函数将计算结果输出到页面显示给浏览者。参数可以为多个,多个参数要使用逗号分隔

?调用函数

函数是不会自动执行的,因此定义好函数后,就可以在适当的时候

进行调用。调用一个函数的方法是使用函数名称,并且在函数名后

用括号包含所需要传入的参数值。调用函数的语句也需要放置在

里。

?函数的参数

对于函数外部的语句来说,函数内部语句是不可见的,这时就需要

一种沟通机制,参数就是它们沟通的桥梁。通过参数,外部语句可

以传递不同的数据给函数处理,参数也是一种变量,但这种变量只

能被函数体内的语句使用,并在函数被调用时赋值,通常它们被称

为形式参数。在创建getArea函数时,声明了形式参数width和height,函数内部的语句都可以使用width和height,但目前它们是没有值的,它们的值取决于调用函数时给它们传递的值,称为实参。

?JavaScript中的参数声明不需要关键字var,但参数的命名

与变量命名规则相同。

下面介绍JavaScript中函数参数的特殊性:

(1)函数声明了参数,调用时也可以不传递参数,这在c#中是会

出现编译错误的。

(2)不管函数声明时有多少个参数,调用函数时可以传递若干个参数值给函数,并且实际传递的参数值还可以在函数内部获得

?显示各公司的人数和总工资

function getTotal(){

var count;//人数

var sum = 0;//总工资

JS事件挂接(详细)

最近学习了JS挂接事件,根据自己对JS挂接事件的了解,以及自己的实际操作。对相关知识进行了如下总结,希望可以帮到大家。 1、事件挂接的第一种方式: 例://不传递参数 function testBtn1(){ alert(1); alert(this);//this指的是window } //传递参数 function testBtn1(num){ alert(num);//num=100 } //同时挂接多个事件 1.将彻底屏蔽鼠标右键,无右键菜单 也可以用于网页中Table框架中

no
2.取消选取、防止复制 3.不准粘贴 4.防止复制 5.IE地址栏前换成自己的图标

说明:关于favicon.ico文件的制作。你可以先在FW中做一个图片,属于你自己站点一个小图标。然后在ACD see将文件属性改为*.ico,然后将你做的*.ICO 文件传到你的服务器目录中,然后就可以使用以上代码来实现,当别人登陆你的站点时,地址栏里使用的就是你自定义的图标了。很PP哦。 6.可以在收藏夹中显示出你的图标 在网页的〈head〉〈/head〉间加入以下语句: 〈link rel="shortcuticon" href="http://…/icon.ico"〉 即可。其中 icon.ico 为 16x16 的图标文件, 颜色不要超过 16 色。 说明:制作方法和上面的一样。只是显示的方式不同,这个是在别人收藏你的网页地址时显示的个性图标。也很PP. 7.关闭输入法 说明:这段代码是在表格提交时用到的。也就是在输入数据时不可以使用其他输入法模式。 网页经典代码(二) 8.永远都会带着框架 说明:frames.htm为你的网页,这也是保护页面的一种方法 9.防止被人frame 10.网页将不能被另存为

js事件委托

JavaScript中的事件委托 传统的事件处理 事件委托就是在一个页面上使用一个事件来管理多种类型的事件。这并不是一个新的想法,但对于把握性能来说却很重要。通常情况,你会在web应用程序中看到这样的代码:document.getElementById("help-btn").onclick = function(event){ openHelp(); }; document.getElementById("save-btn").onclick = function(event){ saveDocumen t(); }; document.getElementById("undo-btn").onclick = function(event){ undoChanges (); }; 这种传统的编码方式给每个元素分配单独的事件处理方法。对于交互少的站点来说,这样做是可以的。然而,对于大型的wen应用程序,当存在大量的事件处理的时候,就会显得反应迟钝。这里要关注的不是速度问题,而是内存占用问题。如果有数百个交互,DOM元素和JavaScript 代码就会有数百个关联。 web应用需要占用的内存越多,它的响应速度就越慢。事件委托能将这个问题减小。 事件冒泡及捕获 要不是事件的下面这些属性,事件委托将成为可能。早期的web开发,浏览器厂商很难回答一个哲学上的问题:当你在页面上的一个区域点击时,你真正感兴趣的是哪个元素。这个问题带来了交互的定义。在一个元素的界限内点击,显得有点含糊。毕竟,在一个元素上的点击同时也发生在另一个元素的界限内。例如单击一个按钮。你实际上点击了按钮区域、body元素的区域以及html元素的区域。

js事件处理

JavaScript组成 ECMAScript:JavaScript语法核心。 DOM:文档对象模型(Document Object Model),提供访问和操作网页内容的方法和接口。 BOM:浏览器对象模型(Browser Object Model),提供与浏览器交互的方法和接口。 JavaScript中有五种简单数据类型,也称为基本数据类型,分别是undefined、null、boolean、number和string。另外还有一种复杂数据类型——object对象类型。JavaScript是基于对象的语言,这意味着程序员既可使用系统自定义的对象,也可使用自己创建的对象。 1 文档的结构和遍历 ParaentNode 获取该节点的父节点 ChildNodes 获取该节点的子节点数组 FirstChild 获取该节点的第一个子节点 LastChild 获取该节点的最后一个子节点 NextSibing 获取该节点的下一个兄弟节点 PreviousSibing 获取该节点上的一个兄弟节点 一般地,节点至少拥有nodeType nodeName nodeValue这三个基本属性吗,节点的类型不同,这三个属性的值也不相同NodeType属性类型分别对应1到12的常数值 NodeType 节点的类型 1 元素节点 2 属性节点 3 文本节点 4CDATA节点 5 实体引用名节点 6 实体名称节点 7处理指令节点 8注释节点 9文档节点 10文档类型节点 11 文档片段节点 12 DTD声明节点

网站登陆事件js源代码

1 显示登陆事件 时间日期篇--显示登陆时间

时间日期篇--显示登陆时间




您已登录本站

js事件说明

JS事件 事件 / 描述 onblur 事件发生在窗口失去焦点的时候。 onchange 事件发生在文本输入区的内容被更改,然后焦点从文本输入区移走之后。onclick 事件发生在对象被单击的时候。 onerror 事件发生在错误发生的时候。 onfocus 事件发生在窗口得到焦点的时候。 onload 事件发生在文档全部下载完毕的时候。 onmousedown 事件发生在用户把鼠标放在对象上按下鼠标键的时候。参考 onmouseup 事件。 onmouseout 事件发生在鼠标离开对象的时候。参考 onmouseover 事件。onmouseover 事件发生在鼠标进入对象范围的时候。 onmouseup 事件发生在用户把鼠标放在对象上鼠标键被按下的情况下,放开鼠标键的时候。 onreset 事件发生在表单的“重置”按钮被单击(按下并放开)的时候。 onresize 事件发生在窗口被调整大小的时候。 onsubmit 事件发生在表单的“提交”按钮被单击(按下并放开)的时候。 onunload 事件发生在用户退出文档(或者关闭窗口,或者到另一个页面去)的时候。onSelect 当Text或Textarea对象中的文字被加亮后,引发该事件。 onFocus 当用户单击Text或textarea以及select对象时,产生该事件。 onBlur 当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时,引发该文件. onDragDrog 拖放时发生 onLoseCapture onDblClick 鼠标双击事件 onKeyPress 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象] onKeyDown 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象] onKeyUp 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象] onAbort 图片在下载时被用户中断 onBeforeUnload 当前页面的内容将要被改变时触发的事件 onMove 浏览器的窗口被移动时触发的事件

Webkit里js与dom事件处理分析

1.event传递到js 所有的事件都是以WebViewWndProc作为入口点。我们以鼠标事件为例来分析,其它事件基本类似 在WebView里又对不同类型的事件处理做了分类主要有 鼠标事件:handleMouseEvent 键盘事件:keyDown, keyUp 在EventHandler类里开始对Event进行派发 EventHandler::dispatchMouseEvent 在这里EventHandler 是frame的一个对象,见frame.h文件 mutable EventHandler m_eventHandler; 在EventHandler记录了当前dom树中关于事件的结点所有信息,例如,当前处于鼠标下面的结点,最后处于鼠标下面的结点,最后处于鼠标下面的Scrollbar等。EventHandler里要做的事情就是在有事件发生的时候找到注册了该事件的结点,然后更新这些结点,并调用相应结点的事件处理函数。这些事情是在dom 结点本身结构的支持下完成的,凡是支持事件的dom结点都是继承于EventNode,而所有的dom结点类型都继承与Node。 在Node里有这样一个方法dispatchGenericEvent将事件进一步派发到EventTarget在EventTarget里会触发RegisteredEventListener 里注册的结点的事件处理函数 对于js事件,到了这一步又有一个js事件的入口点: JSEventListener::handleEvent JSEventListener从其类型的命名可以看出它是一个js事件监听者对象,既然有js事件监听者,那可以想象就有更一般的事件监听者,在webcoe里也确实是这样。上面是从处理事件的流程分析了这个过程,可能大家还会有疑问,事件是怎么派发到js监听者的?下面分析事件监听者注册的过程。 在html解析的时候即HTMLParser::parseToken(Token* t),分析到一个token有事件属性,就会将该属性添加到相应的存储结构里,在这里我们只分析事件属性,在分析到该token有event属性的时候(形容

代码触发超链接 Javascript代码 $(function() { $("#btn").click(function() { $("#submit").click(); $("#aLink").click(); }); }); 当单击:Click Me按钮时,先后弹出提交按钮被单击、超链接被单击的对话框,这表明两者的单击事件都被触发了。然而,从地址栏中可以看到,提交按钮的单击事件触发后,执行了它的默认行为:提交表单;可是超链接的单击事件触发后,并没有链接到目标地址。(不要怀疑说是提交按钮的提交地址对超链接有影响,因为我去掉提交按钮,只留下超链接也不会链接到目标地址。) 也许jQuery中的click()方法对超链接的单击事件并没有使其执行浏览器的默认行为(即使你手动加入return true也没有用)。注意:tigger("click")与click()一样的。jQuery 文档中说“这个函数也会导致浏览器同名的默认行为的执行”。同名的?不太明白,但是超链接的确不能执行它的默认行为。这是,只能想另外的方法——抛弃jQuery提供的事件。回到JavaScript自己的事件——click。代码如下: Javascript代码 $(function() { $("#btn").click(function() { $("#submit").click(); $("#aLink").get(0).click(); }); });

js事件

关于丢失键盘焦点的问题 var tf:TextField = new TextField(); tf.text = "请按任意键"; addChild(tf); this.stage.addEventListener(KeyboardEvent.KEY_DOWN, keydownHandler); function keydownHandler (evt:KeyboardEvent):void { tf.text = "按键码:" + evt.keyCode; } my_btn.addEventListener(MouseEvent.MOUSE_DOWN, clickHandler); function clickHandler (evt:MouseEvent):void { removeChild(my_btn); } // my_btn为场景中一普通按钮[SampleButton]实例 运行效果是这样的: 一开始按键是没问题的,tf能正常显示键值 然后点一下按钮后,再按键,事件就不响应了 经过分析是这么一会事: 点击按钮时,焦点在按钮上,按钮消失了,舞台就失去焦点了 function clickHandler (evt:MouseEvent):void { removeChild(my_btn); stage.focus = null; //在这里将焦点回归舞台} 这样设置下焦点就又可以继续响应按键了。 但是我想要问的是:如果都是这样的话,屏幕元件多了,岂不句句鼠标点击都要写这么一句么…… 难道没有其它解决办法吗?

https://www.360docs.net/doc/6312823354.html,/thread-18785-1-1.html JS的event对象 Event属性和方法: 1. type:事件的类型,如onlick中的click; 2. srcElement/target:事件源,就是发生事件的元素; 3. button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下多个键,酒把这些值加起来,所以3就代表左右键同时按下;(firefox中0代表左键,1代表中间键,2代表右键) 4. clientX/clientY:事件发生的时候,鼠标相对于浏览器窗口可视文档区域的左上角的位置;(在DOM标准中,这两个属性值都不考虑文档的滚动情况,也就是说,无论文档滚动到哪里,只要事件发生在窗口左上角,clientX和clientY都是0,所以在IE中,要想得到事件发生的坐标相对于文档开头的位置,要加上 document.body.scrollLeft和document.body.scrollTop) 5. offsetX,offsetY/layerX,layerY:事件发生的时候,鼠标相对于源元素左上角的位置; 6. x,y/pageX,pageY:检索相对于父要素鼠标水平坐标的整数; 7. altKey,ctrlKey,shiftKey等:返回一个布尔值; 8. keyCode:返回keydown何keyup事件发生的时候按键的代码,以及keypress 事件的Unicode字符;(firefox2不支持event.keycode,可以用event.which替代) 9. fromElement,toElement:前者是指代mouseover事件中鼠标移动过的文档元素,后者指代mouseout事件中鼠标移动到的文档元素; 10. cancelBubble:一个布尔属性,把它设置为true的时候,将停止事件进一步起泡到包容层次的元素;(e.cancelBubble = true; 相当于e.stopPropagation();) 11. returnValue:一个布尔属性,设置为false的时候可以组织浏览器执行默认的事件动作; (e.returnValue = false; 相当于e.preventDefault();) 12. attachEvent(),detachEvent()/addEventListener(),removeEventListener:为制定DOM对象事件类型注册多个事件处理函数的方法,它们有两个参数,第一个是事件类型,第二个是事件处理函数。在 attachEvent()事件执行的时候,this关键字指向的是window对象,而不是发生事件的那个元素; 13. screenX、screenY:鼠标指针相对于显示器左上角的位置,如果你想打开新的窗口,这两个属性很重要;

js鼠标事件大全

J S鼠标事件大全 o n M o u s e O v e r I E3|N2|O3当鼠标移动到某对象范围的上方时触发的事件 o n M o u s e M o v e I E4|N4|O鼠标移动时触发的事件 o n M o u s e O u t I E4|N3|O3当鼠标离开某对象范围时触发的事件 o n K e y P r e s s I E4|N4|O当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象] o n K e y D o w n I E4|N4|O当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象] o n K e y U p I E4|N4|O当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象] 页面相关事件 事件 浏览器支持 描述 o n A b o r t I E4|N3|O图片在下载时被用户中断 o n B e f o r e U n l o a d I E4|N|O当前页面的内容将要被改变时触发的事件 o n E r r o r I E4|N3|O捕抓当前页面因为某种原因而出现的错误,如脚本错误与外部数据引用的错误 o n L o a d I E3|N2|O3页面内空完成传送到浏览器时触发的事件,包括外部文件引入完成 o n M o v e I E|N4|O浏览器的窗口被移动时触发的事件 o n R e s i z e I E4|N4|O当浏览器的窗口大小被改变时触发的事件 o n S c r o l l I E4|N|O浏览器的滚动条位置发生变化时触发的事件 o n S t o p I E5|N|O浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断 o n U n l o a d I E3|N2|O3当前页面将被改变时触发的事件 表单相关事件 事件 浏览器支持 描述 o n B l u r I E3|N2|O3当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可] o n C h a n g e I E3|N2|O3当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可] o n F o c u s I E3|N2|O3当某个元素获得焦点时触发的事件 o n R e s e t I E4|N3|O3当表单中R E S E T的属性被激发时触发的事件 o n S u b m i t I E3|N2|O3一个表单被递交时触发的事件 滚动字幕事件 事件 浏览器支持 描述 o n B o u n c e I E4|N|O在M a r q u e e内的内容移动至M a r q u e e显示范围之外时触发的事件 o n F i n i s h I E4|N|O当M a r q u e e元素完成需要显示的内容后触发的事件 o n S t a r t I E4|N|O当M a r q u e e元素开始显示内容时触发的事件 编辑事件 事件 浏览器支持 描述 o n B e f o r e C o p y I E5|N|O当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件 o n B e f o r e C u t I E5|N|O当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件 o n B e f o r e E d i t F o c u s I E5|N|O当前元素将要进入编辑状态 o n B e f o r e P a s t e I E5|N|O内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件 o n B e f o r e U p d a t e I E5|N|O当浏览者粘贴系统剪贴板中的内容时通知目标对象 o n C o n t e x t M e n u I E5|N|O当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 [试试在页面中的中加入o n C o n t e n t M e n u="r e t u r n f a l s e"就可禁止使用鼠标右键了]

相关主题