(第九天)DOM事件

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()把它转换成字符串

 

上一篇:如何给容器服务的Docker增加数据盘


下一篇:使用Docker Swarm来运行服务