JavaScript DOM编程(2)HTML事件

作者: 路墨 | 来源:发表于2016-08-11 17:55 被阅读62次

HTML DOM 事件
JavaScript DOM编程(2)HTML事件
HTML DOM 事件对象
JavaScript DOM编程艺术（第2版）的简单总结
事件
JS相关基础
DOM事件（一）
高性能 javaScript 之事件委托
简单讲述JS事件委托
HTML+JS事件捕获

HTML DOM 使 <code>JavaScript</code> 有能力对 HTML 事件做出反应。如下的代码：

<h1 onclick="this.innerHTML='变成神!'">点击文本!</h1>

点击文本，文字会变成“变成神！”

对事件做出反应

我们可以在事件发生时执行 <code>JavaScript</code>，比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 <code>JavaScript</code> 代码：

 onclick='JavaScript';

HTML 事件的例子：

当用户点击鼠标时 <code>onmousedown、onmouseup 以及 onclick</code> 事件
<code>onmousedown, onmouseup</code> 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
function on(){alert(1);}
function down(){alert(2);}
function up(){alert(3);}
</script>
</head>
<body>
<p onmouseup="up()" >dianji</p>
<p onmousedown="down()">dianji</p>
<p onclick="on()">dianji</p>
</body>
</html>
当网页或图像已加载时 <code>onload</code> 与关闭页面时 <code>onunload</code>事件
<body onload="alert(1);" onunload="alert(2);"></body>
当鼠标移动或移除到元素上时 onmouseover 和 onmouseout 事件
<p onmouseover="this.innerHTML='鼠标移上来了'" onmouseout="this.innerHTML='鼠标移走了'"></p>
当输入字段被改变时 onchange事件
<input type="text" onchange="this.value='变了变了' " />
当提交 HTML 表单时以及各种input事件
onfocus获取输入焦点时触发的事件，<code>select()</code>输入框内容的选中
<input type="text" onfocus="this.value='获取了焦点' " />
<input type="text" onfocus="select(this.value);" />
当用户触发按键时，不具体展开有兴趣自行百度

addEventListener() 方法

在用户点击按钮时触发监听事件：
<code>document.getElementById("myBtn").addEventListener("click", displayDate);</code>
由于没有找到太好的例子，所以我简单介绍下用法，实际使用情况再自行分析。
主要用于监听点击事件，而且可以并发事件。
<code>ddEventListener()</code> 方法添加的事件句柄不会覆盖已存在的事件。
你可以向一个元素添加多个事件。
你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。
你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
<code>addEventListener()</code> 方法可以更简单的控制事件（冒泡与捕获）。
当你使用 <code>addEventListener()</code> 方法时, <code>JavaScript</code> 从 HTML 标记中分离开来，可读性更强，在没有控制HTML标记时也可以添加事件监听。
你可以使用 <code>removeEventListener()</code> 方法来移除事件的监听。
不能写onclick，只能用<code>click</code>。
语法
```
element.addEventListener(event, function, useCapture);
```

第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
栗子
当用户点击元素时弹出 "Hello World!" :

      element.addEventListener("click", function(){ alert("Hello World!"); });

也可以获取id来添加：

    document.getElementById("myBtn").addEventListener("click", myFunction);
    function myFunction() {
        alert ("Hello World!");
    }

也可以添加多个，或者不同类型都可以：

    document.getElementById("myBtn").addEventListener("mouseout", myFunction);
    document.getElementById("myBtn").addEventListener("click", myFunction);
    document.getElementById("myBtn").addEventListener("click", myFunction);

向 Window 对象添加事件句柄
addEventListener() 方法允许你在 HTML DOM 对象添加事件监听， HTML DOM 对象如： HTML 元素, HTML 文档, window 对象。或者其他支出的事件对象如: xmlHttpRequest 对象。
实例
当用户重置窗口大小时添加事件监听：
window.addEventListener("resize", function(){ document.getElementById("demo").innerHTML = sometext;});
传递参数
当传递参数值时，使用"匿名函数"调用带参数的函数：
实例
element.addEventListener("click", function(){ myFunction(p1, p2); });
事件冒泡或事件捕获
事件传递有两种方式：冒泡与捕获。
事件传递定义了元素事件触发的顺序。如果你将 <p> 元素插入到 <code><div></code> 元素中，用户点击 <code><p></code> 元素, 哪个元素的 <code>"click"</code> 事件先被触发呢？
在 *冒泡 *中，内部元素的事件会先被触发，然后再触发外部元素，即： <code><p></code> 元素的点击事件先触发，然后会触发 <code><div></code> 元素的点击事件。
在 *捕获 *中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <code><div></code> 元素的点击事件先触发，然后再触发 <code><p></code> 元素的点击事件。
<code>addEventListener()</code> 方法可以指定 <code>"useCapture"</code> 参数来设置传递类型：
addEventListener(event, function, useCapture);
默认值为<code> false</code>, 即冒泡传递，当值为 <code>true</code> 时, 事件使用捕获传递。
实例
document.getElementById("myDiv").addEventListener("click", myFunction, true);
<code>removeEventListener()</code> 方法
<code>removeEventListener()</code> 方法移除由 <code>addEventListener()</code> 方法添加的事件句柄:
实例
element.removeEventListener("mousemove", myFunction);