javascript事件问题
<div onmouseover="alert('hello');" onmouseout="alert('out_div');" >
<span onmouseover="alert('world');" onmouseout="alert('out_span');" >你好</span>
</div>
1,当鼠标放到<span>上面时,会只依次执行alert('world')、alert('hello'),可知事件响应函数是在冒泡阶段执行的,也就是说,对于DOM兼容浏览器,在捕获阶段也没有执行。所以,写在html里的事件响应函数只有在冒泡阶段才会被执行。
2,当把鼠标从div移到span上面时,会依次执行alert('out_div')、alert('world')、alert('hello'),这说明了尽管span是在div里,但当把鼠标从div移到span上时,也算是把鼠标移出div。
相关推荐
-
Javascript事件实例详解
document是位于html标签之上的,可以说是权力最大的.下面的实例当你单击页面上的任何位置都会弹出"a",正是运用了document的特性. 复制代码 代码如下: <script> document.onclick=function(){ alert('a'); }; </script> 获取鼠标位置clientX,clientY---注意这里仅仅只是可视区的鼠标位置 复制代码 代码如下: <scrip
-
JavaScript事件处理程序(事件侦听器)
我们知道,javascript与HTML之间的交互是通过事件来实现的,事件就是用户或浏览器自身执行的某种动作,比如click.mounseover.load--,而响应事件的函数就叫做事件处理函数(或事件侦听器). event util test var eventUtil = { addListener: function(element, type, hander) { if (element.addEventListener) { element.addEventListener(type
-
JavaScript事件处理器中的event参数使用介绍
在大部分浏览器中,当一个事件处理器被触发时,名为Event的类实例会作为第一个参数传入处理器中.而一直占据主流地位的ie却以自己专的方式行事,将Event实例保存到一个名为event的全局属性中. 复制代码 代码如下: if (!event) event=window.event; 上面的语句用来检测event参数是否为undefined或者null,如果是的话把window的event属性赋值给它,从而消除了浏览器差异. 为了获取目标元素的引用,在标准兼容的浏览器中使用target属性,在ie
-
fckediter javascript事件函数代码
demo: function FCKeditor_OnComplete( editorInstance ) { editorInstance.EditorDocument.attachEvent("onkeydown", editor_keydown); editorInstance.EditorDocument.attachEvent("onkeyup", editor_keyup); } function editor_keydown() { var oEdit
-
浅谈Javascript事件模拟
这就意味着会有适当的事件冒泡,并且浏览器会执行分配的事件处理程序.这种能力在测试web应用程序的时候,是非常有用的,在DOM 3级规范中提供了方法来模拟特定的事件,IE9 chrome FF Opera 和 Safari都支持这样的方式,在IE8及以前的办法的IE浏览器有他自己的方式来模拟事件 a)Dom 事件模拟 可以通过document上的createEvent()方法,在任何时候创建事件对象,此方法只接受一个参数,既要创建事件对象的事件字符串,在DOM2 级规范上所有的字符串都是复数形式,
-
Javascript事件热键兼容ie|firefox
复制代码 代码如下: <textarea onkeydown="keyHanlder(event)"> </textarea> <script> function keyHanlder(e){ if(e.ctrlKey&&e.keyCode==13){ alert('"Ctrl+Enter"'); if(e.preventDefault)e.preventDefault(); else e.returnValue=
-
浅谈Javascript事件处理程序的几种方式
事件就是用户或浏览器自身执行的某种动作.比如说click,mouseover,都是事件的名字.而相应某个事件的函数就叫事件处理程序(或事件侦听器).为事件指定处理程序的方式有好几种. 一:HTML事件处理程序. 如: 复制代码 代码如下: <script type="text/javascript"> function show(){ alert('hello world!'); } </script> <input type="button&q
-
JavaScript事件类型中焦点、鼠标和滚轮事件详解
本文针对JavaScript 事件中"事件类型"下"焦点.鼠标和滚轮事件"的注意要点进行整理,分享给大家供大家参考,具体内容如下 一.焦点事件 一般利用这些事件与document.hasFocus()方法和document.activeElement属性配合.主要有: blur:元素失去焦点,不会冒泡: DOMFocusIn:同HTML事件focus,于DOM3遭废弃,选用focusin: DOMFocusOut:同HTML事件blur,于DOM3遭废弃,选用foc
-
JavaScript事件委托实例分析
本文实例讲述了JavaScript事件委托用法.分享给大家供大家参考.具体如下: var addEvent = function (elem, eventType, func) { if ( elem.addEventListener ) addEvent = function (elem, eventType, func) { elem.addEventListener(eventType, func, false); }; else if ( elem.attachEvent ) addEv
-
21个JavaScript事件(Events)属性汇总
1.js事件通常和函数结合来使用,这样可以通过发生的事件来驱动函数的执行,从而引起html出现不同的效果. 2.属性(当这些事件的属性发生时,会触发function{}的函数): 1)onabort:当图像加载被中断时,会引发function内的函数. 2)onbur:当元素失去焦点: 3)onfocus:当元素获得焦点 4)onclick:鼠标点击某个对象 5)ondbclick:鼠标双击某个对象 6)onerror:当加载文档或图像时发生某个错误 7)onchange:当用户改变域的内容(o
-
javaScript事件机制兼容【详细整理】
[添加事件机制] addEventListener 和 attachEvent [W3C] addEventListener('click' , function(){alert('Hello World')} ,false ) //W3C规范添加事件(IE8及以上不兼容): 第一个参数为事件类型 ,第二个为事件程序 ,第三个 false为事件冒泡,true为事件捕获 [IE] attachEvent('onclick',function(){alert('Hello World')}
-
JavaScript事件学习小结(五)js中事件类型之鼠标事件
相关阅读: JavaScript事件学习小结(五)js中事件类型之鼠标事件 http://www.jb51.net/article/86259.htm JavaScript事件学习小结(一)事件流 http://www.jb51.net/article/86261.htm javaScript事件学习小结(四)event的公共成员(属性和方法) http://www.jb51.net/article/86262.htm JavaScript事件学习小结(二)js事件处理程序 http://www
-
javascript事件冒泡详解和捕获、阻止方法
一.事件的发生顺序 这个问题的起源非常简单,假设你在一个元素中又嵌套了另一个元素 复制代码 代码如下: ----------------------------------- | element1 | | ------------------------- | | |element2 | | | ------------------------- | |
-
javascript事件冒泡简单示例
本文实例讲述了javascript事件冒泡的定义与用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang=&
-
JavaScript 事件冒泡应用实例分析
然而,在今天一些大型的WEB交互项目中,比如大型的WebGame项目,JavaScript事件冒泡影响是值得重视的.本文通过一个简单的例子来讲解JavaScript事件冒泡及使用注意事项. 如果你对JavaScript事件冒泡还没有什么印象,不妨先看看我之前写的一篇博客<JavaScript事件冒泡简介及应用>.本文讲究实用,不在对JavaScript事件冒泡基础知识进行过多的阐述. 在文章开始之前,现在先看看下面这样一个需求:下面HTML假设描述的是一个WebGame项目包裹栏(玩过网游的人
-
整理Javascript事件响应学习笔记
什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 1.鼠标单击事件(onclick) onclick是鼠标单击事件,当在网页上单击鼠标时,就会发生该事件.同时onclick事件调用的程序块就会被执行,通常与按钮一起使用. 例:我们单击按钮时,触发 onclick 事件,并调用两个数和的函数add2(). <html> <head> <scrip
-
浅谈JavaScript事件绑定的常用方法及其优缺点分析
传统方式 element.onclick = function(e){ // ... }; 1. 传统绑定的优点 非常简单和稳定,可以确保它在你使用的不同浏览器中运作一致 处理事件时,this关键字引用的是当前元素,这很有帮组 2. 传统绑定的缺点 传统方法只会在事件冒泡中运行,而非捕获和冒泡 一个元素一次只能绑定一个事件处理函数.新绑定的事件处理函数会覆盖旧的事件处理函数 事件对象参数(e)仅非IE浏览器可用 W3C方式 element.addEventListener('click'
随机推荐
- 分享下自己总结的Git常用命令
- Java程序打印奥林匹克标志方法详解
- 用html+css+js实现的一个简单的图片切换特效
- 在ASP.NET 2.0中操作数据之三十二:数据控件的嵌套
- jsp页面数据分页模仿百度分页效果(实例讲解)
- 解析:内联,左外联,右外联,全连接,交叉连接的区别
- php Ajax乱码
- 浅析Java.IO输入输出流 过滤流 buffer流和data流
- ruby 局部变量
- C#实现windows form倒计时的方法
- 一条语句简单解决“每个Y的最新X”的经典sql语句
- Jquery异步提交表单代码分享
- 初识JQuery 实例一(first)
- javascript自动切换焦点控制效果完整实例
- Windows7 apache启动失败的解决方法
- 详解Android客户端与服务器交互方式
- 商务主机威力显现 助企业发展后劲十足
- Python基于递归算法实现的汉诺塔与Fibonacci数列示例
- iOS NSURLSessionDownloadTask设置代理文件下载的示例
- java编程实现两个大数相加代码示例