首页
学习
活动
专区
圈层
工具
发布

浅谈JavaScript的事件(事件对象)

在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有关的信息。包括导致事件的元素、事件的类型和事件的相关信息。例如鼠标操作的事件中,会包含鼠标的位置信息。...而键盘触发的事件会包含与按下的键有关信息。所有浏览器都支持event对象,但支持方式不同。 DOM中的事件对象   兼容dom的浏览会将一个event对象传递到事件处理程序中。...只读 为true表示事件是浏览器生成,false表示JavaScript添加 type String 只读 被触发事件的类型 view AbstarctView 只读 与事件关联的抽象视图   上面的表格列出了...,取消事件的默认行为 srcElement Element 只读 事件的目标,与target相同   因为事件处理程序的指定方式不同,故它的作用域也不相同。...document.getElementById("hh"),"click",function(event){ 2 event.returnValue=false; 3 }); 跨浏览器的事件对象

1.4K60
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    浅谈JavaScript的事件(事件委托)

    需要事先为DOM对象指定事件处理程序,导致访问DOM的次数增多,会延迟整个页面的交互就绪时间。 事件委托   对事件处理程序过多的解决方案是使用事件委托。...事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。...ul1指定了事件处理程序,在我们单击li的时候通过事件冒泡也会触发该事件,并且能够通过target来获取当前单击的元素对象。...移除事件处理程序   前文已经讲过事件的添加以及事件的移除。对于页面的事件处理程序太多,会影响页面的性能,除了使用事件委托之外,还可以将一些事件移除。...内存中留有的一些过时的用不到的事件处理程序也是造成Web页面和内存性能的主要问题。

    1.2K70

    浅谈JavaScript的事件(事件类型)

    Web浏览器能够发生的事件有很多种类型,不同的事件类型有不同的事件信息。...,则在object上面触发;error事件,当发生JavaScript脚本错误时触发,当无法加载图像时,在img元素上触发,当无法加载嵌入内容时在object上触发,当框架无法加载时触发;select事件...,当用户选择文本框的内容时触发;resize事件,当浏览器窗口大小改变时触发;scroll事件,当用户滚动带滚动条的元素时触发。...resize中添加大量的计算代码,因为在浏览器窗口改变的时候,resize事件会被频繁的触发,会影响浏览器的性能。...当用户在页面上由一个元素移动到另一个元素事件触发的顺序为:focusout事件,在失去焦点的元素上触发;focusin事件,在获得焦点的元素上触发;blur事件,在失去焦点的元素上触发;focus事件,

    2.2K50

    浅谈JavaScript的事件(事件模拟)

    事件经常由操作或者通过浏览器功能触发,通过JavaScript也可以触发元素的事件。通过JavaScript触发事件,也称为事件的模拟。...模拟事件的最后一步是触发事件,触发事件使用dispatchEvent方法,所有支持DOM事件的节点都支持该方法。...,如true;view,事件关联的视图,一般是document.defaultView;detail,与事件有关的详细信息,通常设置为0;screenX,事件相对于屏幕的x坐标;screenY,事件相对于屏幕的...可以通过JavaScript代码模拟鼠标事件、键盘事件、HTML事件和变动事件。同时也可以模拟自定义事件。...第5行输出事件的类型为myevent,正是我们自定义的事件。   上面的创建模拟事件的方法在ie8以及ie8以下的浏览器中,并不支持。可以使用以下的代码来模拟事件。

    2.2K70

    浅谈JavaScript的事件(事件流)

    事件流描述的是从页面中接收事件的顺序。IE的事件流失事件冒泡,而Netspace的事件流失事件捕获。...事件冒泡   IE的事件流叫事件冒泡,即事件开始时,由具体的元素(文档中嵌套层次最深的节点)接收,然后向上传播到不具体的节点。...事件捕获    事件捕获的思想是不太具体的节点先接收到事件,最具体的节点最后接收到事件。事件捕获的用意在于事件到达最终的节点前,就可以捕获。...首先发生的是事件捕获,为事件的截获提供了机会。然后是实际目标接收到事件。最后一个是事件冒泡阶段,可以在这这个阶段对事件作出响应。 ?   ...下一个阶段处于目标阶段,于是事件在div上面发生,并在事件处理中被看成事件冒泡阶段的一部分。最后事件冒泡发生,并将事件回传到document。ie8以及更早的浏览器不支持Dom事件流。

    94780

    杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

    事件,而不触发 和元素上的 click事件.当单击 元素时,只触发 元素上的click事件, 而不触发元素上的click事件....for(var i = 0 ; i < 10 ; i++){ createDiv(); } //2 窗口滚动事件...serializeArray()将表单中所有内容转成json数组 5 Javascript跨域 域名:(英语:Domain Name),又称网域、网域名称,是由一串用点分隔的名字组成的Internet...跨域:两个不同域名之间的通信,称之为跨域。例如:http://www.baidu.com和http://www.sina.com.cn。...跨域:在一个服务器上,去访问另一个服务器 jQuery如何实现跨域请求?使用JSONP形式实现跨域。 javascript如果调用另一个域程序,不能执行当前域js函数。

    9.4K20

    JavaScript—事件

    JavaScript—事件 事件机制: 在用户使用键盘、鼠标等设备进行操作时,实际上每一次的操作都是在发起一个事件。...当我们的鼠标点击到窗口上的按钮时,并不是鼠标的箭头真正点击到这个按钮了,而是鼠标发出了一个动作事件,然后这个事件先被传送到了操作系统的命令处理带,然后再传送到负责显示图形的图像数据层,事件到这里后图像数据层会先看哪个程序的窗口在最上面...(因为不是在最上面就没必要看了),再根据鼠标提供的X Y坐标确认点击的是哪个窗口上的按钮,接着再确认这个窗口是哪个程序。...以上提到的事件只是众多事件类型中的一种点击事件,事件是有很多种类型的,例如:鼠标的单击、双击、滚轴,键盘的按键弹起、按下、长按等等,反正很多就是了,还有一些是某些元素特有的事件。...接下来开始介绍JavaScript中给元素委托事件的三种常用的方式: 第一种方式,写好函数代码后,通过元素中的事件属性进行委托,下面用鼠标事件中的mouseout和mouseover事件进行演示,mousseout

    1.8K20

    浅谈JavaScript的事件(事件处理程序)

    HTML事件处理程序 元素支持的事件,都可以使用与相应事件处理程序同名的HTML特性来指定。这个特性的值能支持一定的JavaScript代码。...不同JavaScript引擎遵循的标识符解析规则略有差异,很可能在访问非限定对象时出错。   通过HTML指定事件处理程序的最后一个缺点是HTML与JavaScript代码的紧密耦合。...如果要更换事件处理程序就需要改动两个地方:JavaScript和HTML。 DOM级事件处理程序   通过JavaScript指定事件处理程序的传统方式是将一个函数赋值给事件处理程序属性。...通过JavaScript指定事件处理程序有两个优势:简单和浏览器兼容性好。要使用JavaScript指定事件处理程序,首先必须获取一个元素的对象引用。...跨浏览器事件处理程序    为了以跨浏览器的事件处理程序,开发人员可以封装适合自己的js库。

    1.9K50

    JavaScript事件

    事件的概念 事件:指的是文档或者浏览器窗口中发生的一些特定交互瞬间。...属性值得到对象 //此处click 点击 是一种事件名称 是浏览器窗口中发生点击的瞬间 on这个单词,就是响应click这个事件 所以onclick就是事件处理程序 又叫事件侦听器 作用是为tg...还可以直接使用JavaScript的代码等。...事件模拟是javascript事件机制中相当有用的功能,理解事件模拟与善用事件模拟是判别一个前端的重要依据,事件一般是由用户操作触发,其实javascript也是可以触发的,比较重要的是,javascript...谈一谈事件方面如何优化性能——事件委托和事件处理程序的移除 在JavaScript代码当中,添加到页面中的事件越多,页面的性能也就越差。

    2.3K60

    JavaScript事件对象与事件的委托

    事件对象 包含事件相关的信息,如鼠标、时间、触发的DOM对象等  js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: document.getElementsByTagName...("div")[0].onclick = function(e){   e = window.event || e; //兼容IE低版本(事件对象绑定在window的event上)   console.log...(e);//这里e就是事件对象 } 事件的属性和方法 type:获取事件类型(click、mouseover等等) target:获取发生的所在元素(在低版本IE下用srcElement属性) stopPropagation...() 阻止事件冒泡(IE用cancelBubble属性为false阻止冒泡) preventDefault() 阻止事件默认行为(IE用returnValue属性为false阻止默认行为) 事件委托 利用...target属性,获取时间发生的所在对象,避免全体子元素加事件,对比如下:  var tbs=document.getElementsByTagName("td"); for(var i=0;i

    1K50

    javascript跨域

    最近在项目开发的过程中遇到一些Javascript 跨域请求的问题,今天抽空对其进行总结一下,以备后用,也希望同学们在遇到类似问题的时候可以有所帮助。...Javascript跨域问题是web开发人员最常碰到的一个问题之一。...所谓Javascript跨域问题,是指在一个域下的页面中通过js访问另一个不同域下的数据对象,出于安全性考虑,几乎所有浏览器都不允许这种跨域访问,这就导致在一些ajax和iframe应用中,使用跨域的web...javascript跨域图表 那到底什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。...跨域请求无处不在,平时我们在开发活动过程中,活动静态页面通过Javascript访问前端CGI就是明显的主域相同,子域不同的跨域例子,一般活动静态页面都是类似这样的(http://业务名.xx.com/

    1.7K40

    WPF 获取全局所有窗口的创建显示事件 监控窗口打开

    这是一个开发时的辅助机制,用来让开发者不要随便弹出窗口,我又好奇这个监控模块是如何监控到我弹出一个窗口的,学习了监控模块的机制,就写了这个博客 在 WPF 里面,可以通过 EventManager 监听全局的路由事件...,刚好窗口创建显示时,将会触发一些路径事件。...于是就可以进行监控窗口创建显示 监听窗口的 SizeChangedEvent 路由事件是比较靠谱的方式,这个有一点点违反开发者的想法,开发者默认想的是使用 LoadedEvent 事件。...e) { // 所有窗口都会触发 } 窗口创建的时候,将会进入 Window_SizeChanged 事件。...也可以在事件里面对每个窗口注入一些有趣的逻辑,或者是监听窗口的各个事件,输出更多日志,让开发者可以通过日志了解到当前有哪些窗口依然还在显示 这是另一位大佬写的代码,请看 https://gist.github.com

    2.6K50
    领券