【JavaScript】DOM事件和监听

一、将事件绑定到元素身上的三种方法：

1、HTML事件处理程序（不推荐使用）

<a "hide()">

2、传统的DOM事件处理程序

即在目标DOM事件的基础上绑定事件。如果在声明函数时加上括号，函数会立即调用，去掉括号，函数不会立即调用。

function change(){
    //code
}
var name = document.getElementById("name");
name.onclick = change;   //

3、设置事件监听器。

• 即为addEventListener()函数，该函数有三个参数，第一个参数指定事件名称，第二个参数是发生事件时要调用的函数，第三个参数是指定事件响应的方式，为布尔值。当第三参数为true时为捕获传递，当参数为false时为冒泡传递。默认值为false。

element.addEventListener(event, function, useCapture);

因为在注册事件处理程序和事件监听器时，在函数名的后面是没有小括号的，因此需要采用其他的手段来传递参数。
如果需要向事件处理程序或事件监听器所调用的函数传递参数，就需要把方法调用封装在匿名函数中。

传递参数

当传递参数值时，使用 “匿名函数” 调用带参数的函数：

<p>实例演示了在使用 addEventListener() 方法时如何传递参数。</p>
<p>点击按钮执行计算。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
    myFunction(p1, p2);
});
function myFunction(a, b) {
    var result = a * b;
    document.getElementById("demo").innerHTML = result;
}
</script>

什么是事件流、事件冒泡、事件捕获？

• 事件流：描述从页面中接受事件的顺序。
  • HTML元素都位于另一些元素中。当一个元素发生某个事件时，它的父元素同样会发生该事件。
  • 当代码在一个元素和其祖先元素或者后代元素上都有事件处理程序时，事件流就会变得很重要。
• 事件传递有两种方式：冒泡与捕获。

  • 事件冒泡：指的是事件从最具体的节点开始向外传播到最宽泛的节点。这是事件流的默认类型，被绝大多是浏览器支持。

  • 事件捕获：指的是事件从最宽泛的节点开始向内传播到最具体的节点。这种方式在IE8和更早版本的IE中不被支持。

  • 如：事件传递定义了元素事件触发的顺序。 如果你将··<p> 元素插入到<div> 元素中，用户点击<p>元素, 哪个元素的 “click” 事件先被触发呢？

    • 在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p>元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
    • 在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div>元素的点击事件先触发 ，然后再触发<p>元素的点击事件。

    addEventListener(event, function, useCapture);
    
    //"useCapture" 默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递
    

removeEventListener() 方法

removeEventListener()方法移除由addEventListener()方法添加的事件句柄:

//如果element元素绑定了"mousemove"事件
element.removeEventListener("mousemove", myFunction);

4、浏览器支持

注意： IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持addEventListener()和 removeEventListener()方法。但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:

element.attachEvent(event, function);
element.detachEvent(event, function); 
//跨浏览器解决方法:
<p> Internet Explorer 8 及更早IE版本不支持addEventListener() 方法。</p>
<p>该实例演示了所有浏览器兼容的解决方法。</p>
<button id="myBtn">点我</button>
<script>
var x = document.getElementById("myBtn");
if (x.addEventListener) {
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
    x.attachEvent("onclick", myFunction);
}
function myFunction() {
    alert("Hello World!");
}
</script>