Javascript 在浏览器环境中事件

最新推荐文章于 2024-11-13 17:27:29 发布

huangbomeizi

最新推荐文章于 2024-11-13 17:27:29 发布

阅读量1.8k

点赞数

分类专栏： JavaScript 文章标签：浏览器 javascript function callback ie firefox

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

转至http://www.javaeye.com/topic/334133

事件

事件的例子很多了。如用户输入，点击按钮等等。可以把一个javascript函数赋给一个事件(这个可以叫做事件监听器或者事件处理器)，当事件发生了，就会执行这个函数。

基于内置的HTML属性

添加一个时间最快的方法就是，直接添加到html属性中，代码如下

Js代码

<div οnclick= "alert('aaa!')" >click</div>

<div οnclick="alert('aaa!')">click</div>

当用户点击这个div的时候，alert('aaa')就被执行了。发现了这种方式并没有明显的函数来监听这个事件，但是这个函数已经在后台创建了。

元素的属性

另一种方法是，把一个函数赋给元素的属性。代码如下

Html代码

< div id = "my-div" > click </ div >
< script type = "text/javascript" >
var myelement = document .getElementById('my-div');
myelement.onclick = function () {
alert('aaa!');
alert('bbb!');
}
</ script >

<div id="my-div">click</div>
<script type="text/javascript">
  var myelement = document.getElementById('my-div');
  myelement.onclick = function() {
    alert('aaa!');
    alert('bbb!');
  }
</script>

这个方法很面显得要比第一种方式要好，因为它实现了html代码和javascript代码的分离了。一定要知道html的作用在于内容，而javascript是行为，css是用于样式的。我们尽可能的让这三部分进行分离。

缺点是灵活度不够，只能一个函数监听一个事件。下面的方法就可以解决这个问题。

DOM事件监听器

最好的方式是使用时间监听器，这样就可以用许多函数监听一个事件。当发生事件的时候，所有监听的函数就会执行。所有的函数都是独立的，不需要管其他的函数。代码如下

Js代码

var mypara = document.getElementById( 'my-div' );
mypara.addEventListener('click' , function () {alert( 'Boo!' )}, false );
mypara.addEventListener('click' , console.log, false );

var mypara = document.getElementById('my-div');
mypara.addEventListener('click', function() {alert('Boo!')}, false);
mypara.addEventListener('click', console.log, false);

这段javascript用addEventListener去监听click事件。第一个参数是事件的类型，第二个参数是一个函数，匿名函数也可以。当click发生click事件的时候，函数被执行，并且传入一个event对象。

事件的捕捉和冒泡

下面让我们详细的来说下 addEventListener() 第三个参数。

Html代码

< body >
< ul >
< li > < a href = "http://phpied.com" > my blog </ a > </ li >
</ ul >
</ body >

<body>
  <ul>
    <li><a href="http://phpied.com">my blog</a></li>
  </ul> 
</body>

当你点击这个链接，当然也同样点击了li,ul,body.一个click链接，就相当于点击了这个document了。这就是事件的传播。事件的传播可以用两种方法实现

时间的捕捉-这个点击事件首先发生在document上，然后是body，然后是ul,然后是li，最后是a。
事件的冒泡-和上一个过程刚好相反。先从a开始在传播到document。

DOM 2规范建议事件的传播分为三个阶段。捕获，目标，冒泡。意思就是document->a 再从 a->document.这个过程。。。event对象有eventPhase属性，能返回当前的阶段。

说说残酷的现实把。大家都知道历史上是ie和netscape，它们都实现了规范的一部分。IE实现的是冒泡，而netscape实现的是捕获。现在firefox,opera都实现了三个阶段。但是ie还是冒泡。。。

我们看看关于事件传播的实际意义

关于第三个参数就是是否使用事件的传播。一般为了跨浏览器，这个参数最好设为false以及用冒泡的实现方式。
可以在监听器中，控制事件的传播。因此可以停止冒泡。我们可以使用事件对象的stopPropagation方法。
我们也可以用事件代理。如果在div有10个按钮的话，你可以把每个按钮添加一个监听器。但是最好的方法是监听div。当事件发生后，判断哪个按钮被点击就可以了。

在IE中，用setCapture和releaseCapture方法，但是仅仅适用于鼠标事件。

停止事件的传播

Html代码

< p id = "closer" > final </ p >

<p id="closer">final</p>

一个函数用来处理click事件。

Js代码

function paraHandler(){alert( 'clicked paragraph' );}

function paraHandler(){alert('clicked paragraph');}

接下来让这个函数作为一个事件的监听器

Js代码

var para = document.getElementById( 'closer' );
para.addEventListener('click' , paraHandler, false );

var para = document.getElementById('closer');
para.addEventListener('click', paraHandler, false);

接下来，在分别为document,body,window添加监听器。

Js代码

document.body.addEventListener( 'click' , function (){alert ( 'clicked body' )}, false );
document.addEventListener('click' , function (){alert ( 'clicked doc' )}, false );
window.addEventListener('click' , function (){alert( 'clicked window' )}, false );

document.body.addEventListener('click', function(){alert ('clicked body')}, false);
document.addEventListener('click', function(){alert ('clicked doc')}, false);
window.addEventListener('click', function(){alert('clicked window')}, false);

需要注意的是DOM规范并没有提到关于window的事件，DOM处理的是DOCUMENT和浏览器没啥关系。IE是不会有window的事件传播的，而firefox可以。

我们测试一下。执行的顺序如下

clicked paragraph
clicked body
clicked doc
clicked window

这个就可以看出来事件的传播。与addEventLister()相反的方法是removeEventListener().参数都是相同的。让我们移除这个监听器。

Js代码

para.removeEventListener( 'click' , paraHandler, false );

para.removeEventListener('click', paraHandler, false);

如果这么做会发现，结果如下

clicked body
clicked doc
clicked window

让我们来看看如何停止事件的传播。你可以调用 stopPropagation() 方法。

Js代码

function paraHandler(e){
alert('clicked paragraph' );
e.stopPropagation();
}
para.addEventListener('click' , paraHandler, false );

function paraHandler(e){
  alert('clicked paragraph');
  e.stopPropagation();
}
para.addEventListener('click', paraHandler, false);

当我们再次点击p的时候，发现只弹出一个alert。事件停止了传播。

需要注意的是，removeEventListener不能移除匿名函数的情况，这两个匿名函数是两个内存，下面的代码是不能移除监听器的。

Js代码

document.body.removeEventListener( 'click' ,
function (){
alert('clicked body' )
},
false ); // 不能移除监听器。

document.body.removeEventListener('click',
    function(){
        alert('clicked body')
    }, 
false); //  不能移除监听器。

阻止默认的行为

有许多浏览器事件有默认的行为。如link就是个例子。你click link默认的行为是跳转到另一个页面。我们可以禁止这个链接的行为。我们可以调用 preventDefault()方法去实现。

下面个例子就是在click链接之后，有提示信息出现。来确认是否跳转。代码如下

Js代码

// 获取所有链接的对象
var all_links = document.getElementsByTagName( 'a' );
for ( var i = 0; i < all_links.length; i++) { // 循环链接
all_links[i].addEventListener(
'click' , // 事件的类型
function (e){事件的函数
if (!confirm( 'Are you sure you want to follow this link?' )){
e.preventDefault();
}
},
false ); //事件的捕获为false
}

//  获取所有链接的对象
var all_links = document.getElementsByTagName('a'); 
for (var i = 0; i < all_links.length; i++) { // 循环链接
  all_links[i].addEventListener(
    'click', // 事件的类型
    function(e){事件的函数
      if (!confirm('Are you sure you want to follow this link?')){
        e.preventDefault();
      }
    },
    false); //事件的捕获为false
}

注意不是所有的事件都可以阻止。

跨浏览器的事件监听器

现在的大部分浏览器都支持DOM1规范。在DOM2规范之前，事件并没有规范化。所以出现了大量浏览器事件兼容的问题。先看段代码

Js代码

document.addEventListener( 'click' , function (e){}, false );

document.addEventListener('click', function(e){}, false);

让我们看看IE中有啥不一样的。

在IE中并没有addEventListener方法。在IE5之后可以用attachEvent
当使用attachEvent,click变为onclick.
如果有标签属性的方式来监听事件，是不会有event对象传入到函数中的。(就是开篇所说的前两个实现事件的方式。。)但在IE中，无论是什么方式，IE都会传入一个window.event。
在IE中，不会获取target属性，来知道哪个元素上的事件发生了。但是我们可以用srcElement来取代它。
以前说过了，IE中没有事件的捕获，只有事件的冒泡。
并没有stopPropagation()方法，可以设置cancelBubble属性为true。
没有preventDefault() 方法，而是用returnValue为false来取代它。
删除监听器可以用 detachEvent(). 来取代removeEventListener()

下面写一个跨浏览器的例子

Js代码

function callback(evt) {
evt = evt || window.event;//如果evt不存在，说明是ie，赋给evt一个window.event.
//判断target是否存在，不存在的话就是ie用evt.srcElment来取代标准的target.
var target = ( typeof evt.target !== 'undefined' ) ? evt.target : evt.srcElement;
// 下面可以写业务逻辑了。
}
// 开始监听一个click事件。
if (document.addEventListener){ // 如果存在就是FF
document.addEventListener('click' , callback, false );
} else if (document.attachEvent){ // 不存在就是IE
document.attachEvent('onclick' , callback);
} else { //其他的浏览器
document.onclick = callback;
}

function callback(evt) {
  evt = evt || window.event;//如果evt不存在，说明是ie，赋给evt一个window.event.
  //判断target是否存在，不存在的话就是ie用evt.srcElment来取代标准的target.
  var target = (typeof evt.target !== 'undefined') ? evt.target : evt.srcElement;
  // 下面可以写业务逻辑了。

}
// 开始监听一个click事件。
if (document.addEventListener){ // 如果存在就是FF
  document.addEventListener('click', callback, false); 
} else if (document.attachEvent){ // 不存在就是IE
  document.attachEvent('onclick', callback);
} else {//其他的浏览器
  document.onclick = callback;
}