说说事件

Posted xzhx

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了说说事件相关的知识,希望对你有一定的参考价值。

可以说,网页跟事件是分不开的。事件是一件太平常的事情,让很多人很多时候会忽略它的存在。然而我们还是很有必要了解一下事件。
事件就是用户或浏览器自身执行的某种动作。比如常见的click,load和mouseover,都是事件。相应某个事件的函数叫做事件处理程序,也叫事件监听器。事件监听器以on开头,如常见的onclick。

监听事件

监听事件的方法有多种:

html事件监听器

也就是常见的HTML内联属性的写法。即用与相应事件监听器同名的html特性来指定监听事件。

<div onclick="alert(‘Clicked‘)">

值得注意的是,事件监听器中的代码再执行时,有权访问全局作用域中的任何代码,所以在onclick里,我们可以使用定义在全局作用域中的javascript函数。
还有,我们可以通过event变量,访问到事件对象,而不用定义它。

<input type="button" value="Click Me" onclick="alert(event.type)">

而,在html中指定事件监听器有几个缺点:

  1. 时差问题。考虑一种情况:在我们触发某个事件时,可能事件处理程序中尚不具备执行条件,如用到的函数还未被解析。
  2. 耦合问题。这样的写法,html和JavaScript代码耦合了,需要修改时,也许需要修改多个地方。

DOM属性绑定

即将一个函数赋值给一个事件处理程序属性。
例子:

var btn = document.getElementById("myBtn");
btn.onclick = function(){
    alert("Clicked");
};

首先我们要取得对象的引用,然后才可以为它指定事件处理程序。
通过将事件处理程序属性的值设置为null可以删除事件处理程序。

通过addEventListener()和removeEventListener()

el.addEventListener(eventName,callback,flag)

所有的DOM节点都包含这两个方法,它有三个参数,分别是要处理的事件名,作为事件处理程序的函数,和一个布尔值(true和false分别表示在捕获阶段和冒泡阶段调用事件处理程序,默认是false)。

var btn = document.getElementsByTagName(‘button‘);
btn[0].addEventListener(‘click‘, function() {
    alert(‘Clicked‘);
}, false);

值得注意的是,这种方法可以添加多个事件处理程序。通过这种方式添加的事件处理程序也只能通过removeEventListener()来去掉。特殊的是,如果我们指定事件处理程序时用的是匿名函数,将无法去除这个事件处理程序。

以上是关于说说事件的主要内容,如果未能解决你的问题,请参考以下文章

如何使用事件侦听器来加载动画片段的循环

Android:将片段和弹出窗口的点击事件中生成的变量传递给活动的方法

C#常用代码片段备忘

从活动中调用片段事件

说说事件

选择选项卡片段时触发啥事件