javascript 事件

来源：互联网发布：淘宝女装天天特卖编辑：程序博客网时间：2024/04/29 12:15

1. 内联HTML属性法

通过标签的特定属性来添加事件

<div onclick="alert('hello')">click</div>

2. 元素属性法

事实上，这种方式比内联HTML属性法要好，因为它可以帮助我们理清

与相关 js 代码之间的关系，一般情况下，我们总是希望页面中的内容归 HTML、行为归 js、格式归 css ，并且三者之间能够彼此独立，互不干扰。
html代码

<div id="su">click</div>

js代码

<script type="text/javascript">    var su = document.getElementById("su");    su.onclick = function() {        alert("hello");        alert("haha");    }</script>

缺点是只允许我们指定一个处理函数，这样不太方便，所以我门需要使用 DOM 的事件监听器

3. DOM 事件监听器

addEventListener(参数1, 参数2, 参数3)

*事件类型的参数：click等
函数指针：可以是function()这样的匿名函数，也可以是console.log()这样的现存函数
布尔类型的参数：决定代码是否采用捕捉法来处理事件（下一节会详细讲述）*

html代码

<div id="su">click</div>

js代码

<script type="text/javascript">    var su = document.getElementById("su");    su.addEventListener('click', function() {        alert("hello");    }, false);    su.addEventListener('click', console.log, false);</script>

我们可以为一个事件指定多个监听器函数，它们的工作是彼此独立的，任何一个函数的加入或退出，都不会影响其他监听器的工作。

4. 捕捉法和冒泡法

addEventListener 的第三个参数到底是什么？
假设我们有一个无序链接列表

<body>    <ul>        <li><a href="http://www.ranranup.com">我的博客</a></li>    </ul></body>

当我们单击该链接时，实际上我们也单击了列表项li / 列表ul / body 乃至整个 document对象，这就形成了一个事件传播链。这种事件传播过程的实现通常有两种方式：

捕捉法：单击首先发生在document上，然后依次传递给body、列表、列表项，并最终到达该链接

冒泡法：单击首先发生在链接上，然后逐层向上冒泡，直至document对象

通过 addEventListener 的第三个参数，我们可以决定是否采用捕捉法来处理事件，事实上，为了让我们的代码适用于更多的浏览器，最好还是始终将其设置为false，即只使用冒泡法来处理事件（IE只使用冒泡法）

5. 防止默认行为

preventDefault()
需要提醒的是，并不是所有的默认行为都是可以禁止的，尽管大部分事件是可以的，但如果真的有必要确定一下，可以检测事件对象的cancellable属性

6. 神奇的IE

IE中没有 addEventListener() 方法，但是它从IE5开始就提供了一个叫做 attachEvent() 的等效方法
对于单击事件来说，使用 addachEvent() 就等同于使用 onclick 属性
使用老式手法进行事件监听，例如通过将某个函数赋值给 onclick 属性，那么当该回调函数被调用时，它不会获得相关的事件参数，但只要我们设置了事件监听器，IE就总会有一个全局的 window.event 指向该对象。
在IE的事件对象中，没有反映触发事件元素的target属性，但是我么可以使用它的等效属性 srcElement
IE不支持事件捕捉法，只使用冒泡法
IE没有 stopPropagation() 方法，我们可以将only-IE属性 cancelBubble 设置为 true 来完成相应的操作
IE没有 preventDefault() 方法，但是可以将only-IE属性 returnValue 设置为 true 来完成相应的操作
对于事件的取消监听操作，IE中使用的不是 removeEventListener() 方法，而是 detachEvent() 方法

0 0