js事件篇

javascript和html之间的交互式通过事件来实现的,事件就是文档或浏览器窗口中发生的一些特定的交互。

事件流:描述的是从页面中接收事件的顺序。

不同的是,IE和Netscape开发团队竟然提出了差不多是完全相反的事件流概念。IE的事件流失事件流冒泡,而Netscape的事件流是事件流捕获。

<div id="demo">12312<span id=‘demo1‘>sdasd</span></div>
<script>
    var oDiv = document.getElementById(‘demo‘);
    var oDiv1 = document.getElementById(‘demo1‘);
    oDiv.onclick = function(){
        alert(123);
    }
    oDiv1.onclick = function(){
        alert("abc");
    }
</script>

以这段代码为例

事件冒泡:span->div->body->html->document->window

事件捕获: window->document->html->body->div->span

事件冒泡:

IE的事件流叫做事件冒泡,是指事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点。事件冒泡:span->div->body->html->document->window

事件捕获:

Netscape Communicator团队提出的另一种事件流叫做事件捕获,思想是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件,事件捕获的用意在于在事件到达预定目标之前捕获它。事件捕获: window->document->html->body->div->span

事件处理程序:

<input onclick="alert(123)">
oDiv.onclick = function(){
        alert(123);
}
oDiv.addEventListener(‘click‘,function(){
        alert(123);
    },false);

上面是三种事件处理方法,首先第一种方法不推荐,因为违反了HTML与JavaScript分离的准则。

第二种方法只能给一个事件绑定一个响应函数,重复绑定会覆盖之前的绑定。

第三种方法比较推荐,可以绑定多个不同的函数。

addEventListener这个方法有三个参数,第一个参数是你要绑定的事件,第二个参数是执行的函数,第三个参数有两个值(true flase)。

true表示该元素在事件的“捕获阶段”(由外往内传递时)响应事件,

false表示该元素在事件的“冒泡阶段”(由内往外传递时)响应事件;

IE事件处理程序:

IE实现了与DOM中类似的两个方法:attachEvent()和detachEvent()。

btn.attachEvent(‘click‘,function(){
    alert(123);
});

由于IE8及更早版本只支持事件冒泡,所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。

下面我们来封装一个能力检测的js库的事件部分:

    var oDiv = document.getElementById(‘demo‘);
    var Event = {
        addEvent:function(element,type,even){
            if(element.addEventListener){
                element.addEventListener(type,even,false);
            }else if(element.attachEvent){
                element.attachEvent(‘on‘+type,even);
            }else{
                element["on"+type]=even;
            }
        },
        removeEvent:function(element,type,even){
            if(element.removeEventListener){
                element.removeEventListener(type,even,false);
            }else if(element.detachEvent){
                element.detachEvent(‘on‘+type,handler);
            }else{
                element["on"+type]=null;
            }
        }
    };
    Event.addEvent(oDiv,"click",function(){
        alert(123);
    });

下面我们来介绍一下如何取消事件(冒泡):

事件对象还提供了一个.stopPropagation()方法,该方法可以完全阻止事件冒泡。这个方法也是一种纯JavaScript特性,但在跨浏览器的环境中则无法安全地使用 。不过,只要我们通过jQuery来注册所有的事件处理程序,就可以放心地使用这个方法。w3c的方法是event.stopPropagation(),IE则是使用window.event.cancelBubble = true.

下面我们来封装一个取消事件冒泡的函数:

function stopEventBubble(event){
        var e=event || window.event;
        if (e && e.stopPropagation){
            e.stopPropagation();
        }
        else{
            e.cancelBubble=true;
        }
    }

是不是很简单呢?其实我们遇到的不都是事件的冒泡与捕获,我们在工作中还可能遇到一些其他的问题。

例如:

我们把单击事件注册到一个锚元素,当用户单击链接时,浏览器会加载一个新页面。这种行为和事件处理程序是不同的。类似地,当用户在编辑完表单后,会触发表单的submit事件,在此事件发生后,表单提交才会真正发生。如果我们不希望执行这种默认操作,那么在事件对象上调用.stopPropagation()方法也没用,因为默认操作不是在正常的事件传播流中发生的。在这种情况下,.preventDefault()方法则可以在触发默认操作之前终止事件 。

事件的传播和浏览器默认操作是相互独立的两套机制,在二者任何一方发生时,都可以终止另一方。

如果想要同时停止事件传播和默认操作,可以在事件处理程序中返回false。

return false;

最后:我们做的许许多多的东西只要涉及到交互就一定涉及到事件的绑定,所有学好js中事件的部分我认为还是非常有必要的,你说是吧?

时间: 06-29

js事件篇的相关文章

jQuery事件篇---高级事件

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

js进阶篇学习

今天,闲来没什么事觉得要恶补一下js基础,虽说昨天听了尚大大的课,什么松耦合,紧耦合,各种组件化,可复用性.小小懵逼!硬着头皮也要上啊!但是还有一周的时间写这个组件化之前,觉得先恶补一下,js进阶比较好,所以有了今天的笔记. -----js进阶篇 因为之前看过慕课的js进阶篇但是好久不看,基本也给就馍吃的七七八八了,狠心从头开始 第一章,让你认识js 第二章,你要懂得规则,基础语法,变量啦,运算符拉 第三章,数组,(这个当初学的时候些些的懵逼,数组是个坎,二维更是懵逼,现在再看,依然是,迈过去了

原生js事件的添加和删除

在IE浏览器中添加或删除事件用attachEvent.detachEvent.在其他标准浏览器中则用addEventListener.removeEventListener.下面的对事件的添加和删除做了封装.直接看代码吧! /** * @description 事件绑定,兼容各浏览器 * @param target * 事件触发对象 * @param type * 事件 * @param func * 事件处理函数 */ function bind(target, type, func) { i

jQuery基础——事件篇

jQuery基础--事件篇 鼠标事件 click与dbclick事件 click方法监听用户单击操作,dbclick监听用户双击操作,这两个方法类似. dbclick与click事件不同的是: click事件触发需要以下几点: click事件其实是由mousedown与mouseup 2个动作构成,所以点击的动作只有在松手后才触发 dblclick事件触发需要以下几点: dblclick又是由2个click叠加而来的,所以dblclick事件只有在满足以下条件的情况下才能被触发 鼠标指针在元素里

JS事件模型小结

08年年初的一篇blog,转到这个博客上,想想当年跨浏览器真是一座山: 前几天看dojo的文档,其中多次提到DOM2事件模型,以前学习这部分的内容,主要愤慨于IE的不兼容性了,现在对于DOM2事件模型的概念又有些模糊,所以翻出了js权威指南(V4)又复习了一下,简单作一小结.       JS权威指南中将JS事件模型分为四种            1.原始事件模型:属性事件处理模式            2.标准事件模型:DOM2对其作了标准化            3.IE事件模型(IE5.5

node.js 事件发射器模式

目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEmitter 前言: 今天事儿太多了,没有发太多的东西.不好意思了各位. 本篇主要介绍Node.js中的事件驱动,至于Node.js事件概念的东西,太多了. 本系列课程主要抱着的理念就是,让大家慢慢的入门,我也尽量写的简单一点. 所以呢,本文事件驱动,大家的目标应该是:理解Node.js的事件驱动.会

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

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

JEPLUS平台添加JS事件的方式——JEPLUS软件快速开发平台

JEPLUS平台添加JS事件的方式 很多用户在使用平台的过程中有时候会涉及到比较复杂的功能,这些功能利用平台的配置有时候不能实现,这时候可能就需要来编写一些JS事件来完成功能需求的编写,可是很多客户不清楚平台的JS事件应该在什么地方加应该怎么加,今天这篇笔记就说一下平台添加JS事件的几种方式,大家根据自己的业务需求来进行自行添加编写. 一.脚本模板 平台的辅助程序里有很多关于平台的JS事件的一些设置,大家可以去辅助程序里进行查看,操作如图: 二.列表JS事件 打开目标功能的功能菜单的配置界面可以

JQuery基础修炼-事件篇

目录 第1章 事件介绍 第2章 鼠标事件 第3章 表单事件 第4章 键盘事件 第5章 事件的绑定和解绑 第6章 事件对象的使用 第7章 自定义事件 click与dbclick事件 用交互操作中,最简单直接就是点击操作.jQuery提供了两个方法一个是click方法用于监听用户单击操作,另一个方法是dbclick方法用于监听用户双击操作.这两个方法的用户是类似,下面以click()事件为例 使用上非常简单: 方法一:$ele.click() 绑定$ele元素,不带任何参数一般是用来指定触发一个事件