2

JavaScript简单入门可以看看我丑丑的Github博客JavaScript简单入门

事件

JavaScript与HTML之间的交互是通过事件实现的。事件是文档或者浏览器窗口中发生的,特定的交互瞬间。

事件流

事件流描述的是从页面中接收事件的顺序。
事件传播的顺序对应浏览器的两种事件流模型:捕获型事件流和冒泡型事件流。

事件捕获

事件开始时是由较为不具体的节点接收,然后逐级向下传播到最具体的节点 。

事件冒泡

事件开始时是由最具体的节点接收,然后逐级向上传播到较为不具体的节点。

DOM事件流

“DOM2级事件”规定事件流包括三个阶段:

事件捕获阶段 -->  处于目标阶段 -->  事件冒泡阶段     

● 事件捕获:事件发生时(onclick,onmouseover……)首先发生在document上,然后依次传递给body,最后到达目的节点(即事件目标)
● 事件冒泡:事件到达事件目标之后不会结束,会逐层向上冒泡,直至document对象,跟事件捕获相反

例如单击页面div
图片描述

事件处理程序

事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字。响应某个事件的函数就叫事件处理程序(或事件侦听器)。事件处理程序的名字以"on"开头。
为事件指定事件处理程序的方法主要有3种。

html事件处理程序

事件直接加在DOM元素上。

//原生函数
<input type="button" value="click me!" onclick="alert('clicked!')" />
//自定义函数
<input  onclick="myAlert()"  type="button" value="click me!" />
<script type="text/javascript">
    function myAlert(){
        alert("谢谢支持");
    }
</script>

DOM0级事件处理程序

把一个函数赋值给一个事件处理程序属性。

<input id="myBtn" type="button" value="click me!"/>
<script>
    var myBtn=document.getElementById("myBtn");
    myBtn.onclick=function(){
        alert("clicked!");
    }
</script>

DOM2级事件处理程序

DOM2级事件处理程序可以为一个元素添加多个事件处理程序。其定义了两个方法用于添加和删除事件处理程序:addEventListener()和removeEventListener()。
优点:

  1. 可以绑定多个事件。
  2. 可以解除相应的绑定
  • addEventListener

elementObject.addEventListener(eventName,handle,useCapture); IE8及以下不支持,属于DOM2级的方法,可添加多个方法不被覆盖
图片描述

  • removeEventListener

通过addEventListener添加的事件处理程序必须通过removeEventListener删除,且参数一致。

<input id="myBtn" type="button" value="click me!"/>
<script>
    var myBtn=document.getElementById("myBtn");
    var handler=function(){
        alert("hello");
    }
    myBtn.addEventListener("click",handler,false);
    myBtn.removeEventListener("click",handler,false);
</script>

IE特有

  • attachEvent
    elemObject.attachEvent("eventName", functionReference); IE特有,兼容IE8及以下,可添加多个事件处理程序,只支持冒泡阶段

图片描述
useCapture:(可选)指定事件是否在捕获或冒泡阶段执行。true,捕获。false,冒泡。默认false。

  • detachEvent

通过attachEvent添加的事件处理程序必须通过detachEvent方法删除,且参数一致。

兼容写法示例

function addEvent(obj,type,handle){
    try{  
    // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
        obj.addEventListener(type,handle,false);
    }catch(e){
        try{  
        // IE8.0及其以下版本
            obj.attachEvent('on' + type,handle);
        }catch(e){  
        // 早期浏览器
            obj['on' + type] = handle;
        }
    }
}

取消事件

  • 给对象的事件属性赋值为null,可取消此事件的所有注册过的处理事件程序。
document.body.onclick=null;     //onclick属性赋值为null,相当于注销了onclick事件
  • 阻止通过on这种方式绑定的事件的默认事件
ele.onclick = function() {
    return false;              //通过返回false值阻止默认事件行为
};

阻止事件

阻止事件冒泡

标准事件对象是e.stopPropagation(),IE则使用e.cancelBubble = true/false

var btn = document.getElementById("myButton");
btn.addEventListener("click", function(event) {
    event.stopPropagation();   
});
//IE
btn.attachEvent("onclick", function(event) {
    event.cancelBubble = true;  
});
阻止默认事件

标准事件对象使用preventDefault(),IE则使用returnValue = true/false

var btn = document.getElementById("myButton");
btn.addEventListener("click", function(event) {
    event.preventDefault(); 
});
//IE
btn.attachEvent("onclick", function(event) {
    event.returnValue = false;
});

事件对象

事件在浏览器中是以对象的形式存在的,即event。触发一个事件,就会产生一个事件对象event,该对象包含着所有与事件有关的信息。
部分属性如下:

  1. type属性,被触发的事件的类型
  2. target属性,直接事件目标,真正触发事件的目标
  3. currentTarget属性,其事件处理程序当前正在处理事件的那个元素
在事件处理程序内部,对象this始终等于currentTarget的值,而target则是包含事件的实际目标。

DOM中的事件对象

<input id="btn" type="button" value="click"/>
<script>
    var btn=document.getElementById("btn");
    btn.onclick=function(event){
        console.log(event); 
    }
    btn.addEventListener("click", function (event) {
        console.log(event); 
    },false);

IE中的事件对象

  • 通过DOM0级方法添加事件处理程序时,event对象作为window对象的一个属性存在
<input id="btn" type="button" value="click"/>
<script>
    var btn=document.getElementById("btn");
    btn.onclick= function () {
        var event=window.event;
       console.log(event); 
    }
</script>
  • 通过attachEvent()添加的事件处理程序,event对象作为参数传入
<input id="btn" type="button" value="click"/>
<script>
    var btn=document.getElementById("btn");
    btn.attachEvent("onclick", function (event) {
        console.log(event);
    })
</script>

部分属性如下:

  1. srcElement属性,事件的目标(与DOM中的target属性相同)

兼容性处理

function showMsg(event){
    event = event || window.event;  
    var ele = event.target || event.srcElement; 
    ......
 }

事件处理程序中this

IE事件处理程序中this的值等于 window 对象,而在标准事件绑定当中,this的值等于被绑定的元素。

var btn = document.getElementById("myButton");
btn.attachEvent("onclick", function(event) {
    alert(this === window);              // true
});
btn.addEventListener("click", function(event) {
    alert(this === btn);                  // true
});

事件委托

利用冒泡的原理,把事件加到父元素或祖先元素上,触发执行效果,解决事件处理程序过多问题。
事件委托优点:

  1. 提高JavaScript性能。事件委托可以显著的提高事件的处理速度,减少内存的占用
  2. 动态的添加DOM元素,不需要因为元素的改动而修改事件绑定。
<ul id="color">
    <li>red</li>
    <li>orange</li>
    <li>yellow</li>
    <li>green</li>
</ul>
<script>
    (function(){
        var color = document.getElementById("color");
        color.addEventListener('click', showColor, false);
        function showColor(e) {
            e = e || window.event;
            var targetElement = e.target||e.srcElement;
            if (targetElement.nodeName.toLowerCase()==="li") {
                alert(targetElement.innerHTML);
            }
        }
    })();
</script>

zhouzhou
1.5k 声望76 粉丝

web前端