javascript 事件

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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值