JavaScript事件概览

JavaScript是单线程,在同一个时间点,不可能同时运行两个“控制线程”。

事件句柄和事件对象

1.注册事件句柄

标准和非标准

var button=documenbt.elementByID("#button");button.addEventListener(‘click‘,function(){
    //do something.},false);//第三个参数表明事件是否阻止冒泡。true阻止冒泡,false类似默认行为一样进行事件冒泡。
var button=documenbt.elementByID("#button");button.attachEvent(‘onclick‘,function(){
    //do something.});

早期兼容性代码,查看浏览器支持哪种事件模型:

function registerEventHandler(node,event,handler){
            if(typeof node.addEventListener==‘function‘){
                node.addEventListener(node,event,handler);
            } else{
                node.attachEvent("on"+event,hander);
            }
        }registerEventHandler(button,"click",function(){
            //to do
        });

2.获得事件对象

标准 event

非标准: window.event

兼容性代码:

registerEventHandler(document.body,"click",function(event){
            event=event||window.event;
            print(event.clientX,",",event.clientY);
        });

3.从事件对象中获取数据

鼠标事件,event对象中的属性(部分):

4.标记事件已经完成

function unregisterEventHandler(node,event,handler){
            if(typeof node.removeEventListener==‘function‘){
                node.removeEventListener(node,event,handler);
            } else{
                node.detachEvent("on"+event,hander);
            }
        }registerEventHandler(button,"click",function(){
            //to do
        });

事件类型

1.鼠标事件,
2.键盘事件
3.停止行为
事件冒泡和阻止默认行为。标准和非标准如下:

阻止事件冒泡:
event.stopPropagation

cancelBubble

阻止默认行为:
event.preventDefault();

returnValue=false;

4.跟踪焦点事件
focus和blur

5.表单事件
submit事件

6.window事件

load事件:在文档完全加载完毕时触发

resize事件: 每次窗口发生改变时被触发

scroll事件: 文档滚动的时候,浏览器都会触发window对象上的scroll事件

时间: 2024-11-03 19:50:19

JavaScript事件概览的相关文章

javascript事件委托机制详解

以个人前端工作面试经历来看,javascript事件委托是问的最多的一类题目之一,熟悉事件委托能够了解你对于javascript的掌握程度. 面试官可能问一下问题,现在有5个li待办事件,需要实现当点击一个li时实现弹出该li的信息 <ul class="top"> <li>橘子</li> <li>香蕉</li> <li>苹果</li> <li>梨子</li> <li>

JavaScript事件委托的技术原理

如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父元素上.事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件.基本概念非常简单,但仍有很多人不理解事件委托的工作原理.这里我将要解释事件委托是如何工作的,并提供几个纯JavaScript的基本事件委托的例子. 假定我们有一个UL元素,它有几个子元素: <ul id="parent-l

JavaScript事件机制

<script type="text/javascript" src="http://runjs.cn/gist/2zmltkfa/all"></script> [前端培养-作业01]javascript事件机制 1.javascript事件模型 2.e.target与e.currentTarget是干什么的? 3.preventDefault与stopPropagation是干什么的 4.什么是dispatchEvent? 5.说一说事件代

javascript事件委托练习

JavaScript事件代理是一种简单的技巧,通过它你可以把事件处理器添加到一个父级元素上,这样就不需要为每一个元素添加或者删除事件处理器,从而避免了内存泄露或者是遍历节点造成的性能下降. 如果整个页面都采用同样事件流方式,当红色蓝色区域触发相同事件,冒泡法:先处理蓝色区域请求,捕获法:先处理红色区域请求 如果不同层的元素使用的useCapture不同,会先从最外层元素往目标元素寻找设定为capture(捕获)模式的事件,到达目标元素执行目标元素的事件后,再寻原路往外寻找设定为bubbling(

JavaScript事件---事件对象

原文:JavaScript事件---事件对象 发文不易,若转载传播,请亲注明出处,谢谢!   内容提纲: 1.事件对象 2.鼠标事件 3.键盘事件 4.W3C与IE JavaScript事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开发提供更多的强大功能.最方便和强大的就是事件对象,他们可以帮你处理鼠标事件和键盘敲击方面的情况,此外还可以修改一般事件的捕获/冒泡流的函数. 一.事件对象 事件处理函数的一个标准特性是,以某些方式访问的事件对象包含有关于当前事件的上下文信息. 事件处理三

JavaScript事件代理入门

事件代理(Event Delegation),又称之为事件委托.是 JavaScript 中常用绑定事件的常用技巧. 顾名思义,"事件代理"即是把原本需要绑定的事件委托给父元素,让父元素担当事件监听的职务. 为什么要这样做呢? 众所周知,DOM操作是十分消耗性能的.所以重复的事件绑定简直是性能杀手.而事件代理的核心思想,就是通过尽量少的绑定,去监听尽量多的事件. 下面将会用 Zepto 为大家演示怎么实现事件代理. 啊?Zepto是什么? Zepto is a minimalist J

Javascript事件冒泡,没有想象中那么糟糕

Javascript事件冒泡,没有想象中那么糟糕  提到js事件,我们可能第一时间反应的就是“如何阻止事件冒泡”:但是事件冒泡真的是如我们想象的那么糟糕吗? 1. Event 对象  Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 2. 事件句柄 (Event Handlers)  指能够使 HTML 事件触发浏览器中的行为,比如点击(onclick).鼠标悬浮(onfocus)等 3. 什么是事件冒泡  一个对象(event.srcEle

Javascript事件处理程序的3种方式

既然产生了事件,我们就要去处理它,据我了解Javascript事件处理程序主要有3种方式: 1.HTML事件处理程序 即我们直接在HTML代码中添加事件处理程序,如下面这段代码: <input id="btn1" value="按钮" type="button" onclick="showmsg();"> <script>    function showmsg(){        alert(&quo

javaScript事件(五)事件类型之鼠标事件

一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 四.IE事件处理程序 以上内容见javaScript事件(二)事件处理程序 五.事件对象 以上内容见javaScript事件(三)事件对象 六.事件对象的公共成员 以上内容见javaScript事件(四)event的公共成员 七.鼠标事件 DOM3级事件中定义了9个鼠标事件. mousedown:鼠标按钮被按下(左键或者右键)时触发.不能通过键盘触发. mouseup:鼠标按钮被释放弹起时触发.不能通过键盘