（第九天）DOM事件

2021-12-12 04:04:47

addEventListener

使用addEventListner()方法可以为事件目标注册事件处理程序。addEventListner()接受三个参数。第一个是要注册处理程序的事件类型，这个事件类型（或名字）是字符串，但它不包括应该用于设置事件处理程序属性的前缀”on“。第二个参数是当指定类型的事件发生时应该调用的函数。最后一个参数时布尔值。通常情况下，会给这个参数传递false。如果相反传递了true，那么函数将注册为捕获事件处理程序，并在事件不同的调度阶段调用。你可以忽略第三个参数并无须传递false，同时规范最终应该会改变从而允许这么做。但在下面例子忽略这个参数可能在某些浏览器中报错。

                <button id = "btn">click me</button>

                var b = document.getElementById("btn");
                b.onclick = function() {
                    alert("Thanks for clicking me!");
                }
                b.addEventListener("click", function() {
                    alert("Thanks again!");
                }, false);

上述中用"click"作为第一个参数调用addEventListener()不会影响onclick属性的值。在前面的代码中，单击按钮会产生两个alert()对话框。

（1）通过多次调用addEventListener()为同一个对象注册同一事件类型的多个处理程序函数。当对象发生事件时，所有该事件类型的注册处理程序都会按照注册的顺序调用。

（2）使用相同的参数在同一个对象上多次调用addEventListener()是没用的，处理程序仍然只注册一次，同时重复调用也不会改变调用处理程序的顺序。

attachEvent

IE9之前的IE不支持addEventListener()和removeEventListener()。IE5及以后版本定义了类似的方法attachEvent()和detachEvent()。

attachEvent()和detachEvent()方法的工作原理与addEventListender()和removeEventListener()类似，但有一下例外：

因为IE事件模型不支持事件捕获，所以attachEvent()和detachEvent()要求只有两个参数：事件类型和处理程序函数。
IE方法的第一个参数使用了带”on“前缀的事件处理程序属性名，而非没有前缀的事件类型。例如，当给addEventListener()传递"click"时，要给attachEvent()传递”onclick“。
attachEvent()允许相同的事件处理程序函数注册多次。当特定的事件类型发生时，注册函数的调用次数和注册次数一样。

经常可以看到的事件处理程序注册代码是在支持addEventListener()的浏览器中就调用它，否则就用attachEvent()：

var b = document.getElementById("mybutton");

var handler = function() { alert("Thanks!"); };

if (b.addEventListener)
    b.addEventListener("click", hanlder, false);
else if (b.attachEvent)
    b.attachEvent("onclick",handler)

事件处理程序的参数

在IE8以前的版本中，通过设置属性注册事件处理程序，当调用它们时并未传递传递事件对象。取而代之，需要通过全局对象 window.event 来获得事件对象。出于互通性，你可编写如下程序，这样如果没有参数就使用window.event:

function handler(event) {
       event = event || window.event;

}

向使用attachEvent()注册事件处理程序传递事件对象，但它们也能使用window.event。

事件取消

在支持addEventListener()的浏览器中，也通过调用事件对象的 preventDefault() 方法来取消事件的默认操作。不过，在IE9之前的IE中，可以通过设置事件对象的 returnValue 属性为false来达到同样的效果。

            window.onload = function() {
                var a = document.getElementById("a");
                a.onclick = function(event){
                    event.preventDefault();
                }
            }

           <a id="a" href="http:www.cnblogs.com">clcik me</a>


/*在IE9以下是不好使的！显示错误：无法获取未定义或 null 引用的属性“preventDefault”*/

接下来进行修改如下：

          window.onload = function() {
                var a = document.getElementById("a");
                a.onclick = function(event){
                       var event = event || window.event;
                       event.preventDefault();
                }
            }

           <a id="a" href="http:www.cnblogs.com">clcik me</a>

           /*但是在IE8以下还是不支持，必须用event.returnValue = false*/

下面的代码给出三种事件取消技术

function cancelHandler(event) {
     var event = event || window.event;

       /*这里是处理事件的代码*/
     if (event.preventDefault) event.preventDefault();  //标准技术

     if (event.returnValue) event.returnValue = false; //IE

     return false; //用于处理使用对象属性注册的处理程序
}

事件传播（事件冒泡）

概念

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

（1）event.stopPropagation()

事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转）

【注】IE9之前IE不支持stopPropagation()方法。相反，IE事件对象有一个 cancelBubble 属性，设置这个属性为 true 能阻止事件进一步传播。

（2）return false

事件处理过程中，阻止了事件冒泡，也阻止了默认行为

（3）event.preventDefault()

它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）

（4）stopImmediatePropagation()

此方法阻止了任何其他对象的事件传播，但也阻止了在相同对象上注册的任何其他事件处理程序的调用。【注】该方法只在IE 11+上支持，如果要求对IE兼容性支持的话，此方法不建议使用

鼠标事件

 1 click
 2 
 3 contextmenu 
 4 /*可以取消的事件，当上下文菜单即将出现时触发。当前浏览器在鼠标右键时显示上下文菜单，所以这个事件也能像click事件使用*/ 
 5 
 6 ondblclick
 7 /*当用户双击鼠标时触发*/
 8 
 9 mousedown
10 /*当用户按下鼠标按键时触发*/
11 
12 mouseup
13 /*当用户释放鼠标按键时触发*/
14 
15 mousemove
16 /*当用户移动鼠标时触发*/
17 
18 mouseover
19 /*当鼠标进入元素时触发*/
20 
21 mouseout
22 /*当鼠标离开元素时触发*/
23 
24 mouseenter
25 /*类似”mouseover，但不冒泡。IE将其引入，HTML5将其标准化，但未广泛实现“*/
26 
27 mouseleave
28 /*类似”mouseout，但不冒泡。IE将其引入，HTML5将其标准化，但尚未广泛实现“*/

文本事件

浏览器有三个传统的键盘输入事件。onkeydown事件、onkeyup事件和onkeypress事件。这三者中keypress是比较高级的事件，它表示产生了一个可打印字符。并且通过keypress事件传递的对象更加混乱。一个onkeypress事件表示输入的单个字符。事件对象以数组Unicode编码的形式指定字符，所以必须用String.fromCharCode()把它转换成字符串。

码农公寓