• 事件


    一、什么是事件:

    事件是您在编程时系统内发生的动作或者发生的事情,系统响应事件后,如果需要,您可以某种方式对事件做出回应。

    浏览器赋予元素天生默认的一些行为,不论是否绑定相关的方法,只要进行相应的行为操作了,那么一定会触发相应的事件

    事件是文档或者浏览器窗口中发生的,特定的交互瞬间。

    事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字。

    事件是javaScript和DOM之间交互的桥梁。

    你若触发,我便执行——事件发生,调用它的处理函数执行相应的JavaScript代码给出响应。

    典型的例子有:页面加载完毕触发load事件;用户单击元素,触发click事件。

     事件三要素:事件源(事件被触发的对象)、事件类型(什么事件,比如鼠标点击事件)和事件处理函数(针对某个事件要做出的相应)。

    二、事件处理程序(事件处理器

    响应某个事件的函数就叫事件处理程序(也叫事件处理函数事件句柄)。事件处理程序的名字以"on"开头,因此click事件的事件处理程序就是onclick,load事件的事件处理程序就是onload。

    三、事件对象

    什么是事件对象?

    用我自己的话说,当某个事件触发时,浏览器就会创建一个对象,这个对象包含了该事件所有相关的属性和方法等有关信息,我们可以调用这个事件对象。

    有人这么定义事件对象,说事件在浏览器中是以对象的形式存在的,触发一个事件,就会产生一个事件对象,该对象包含着所有与事件有关的信息,包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。这感觉就像是“手机”和“华为P7手机”的关系一样。

    例如:鼠标操作产生的event中会包含鼠标位置的信息;键盘操作产生的event中会包含与按下的键有关的信息。

    所有浏览器都支持event对象,但支持方式不同,在DOM中event对象必须作为唯一的参数传给事件处理函数,在IE中event是window对象的一个属性。

    (一)、html事件处理程序中的event

      会创建一个包含局部变量event的函数。可通过event直接访问事件对象。

    <input id="btn" type="button" value="click" onclick=" console.log('html事件处理程序'+event.type)"/>

    (二)、DOM中的事件对象

      都会把event作为参数传入事件处理程序

      DOM中事件对象重要的属性和方法

        属性

      • type属性,用于获取事件类型
      • target属性 用户获取事件目标 事件加在哪个元素上。(主要在事件委托时使用)

        方法

      • stopPropagation()方法 用于阻止事件冒泡
      • preventDefault()方法 阻止事件的默认行为 移动端用的多
     1 <body>
     2 <input id="btn" type="button" value="click"/>
     3 <script>
     4     var btn=document.getElementById("btn");
     5     btn.onclick=function(event){
     6         console.log("DOM0 & click");
     7         console.log(event.type);    //click
     8     }
     9     btn.addEventListener("click", function (event) {
    10         console.log("DOM2 & click");
    11         console.log(event.type);    //click
    12     },false);
    13 </script>
    14 </body>

    (三)、IE中的事件对象

      第一种情况: 通过DOM0级方法添加事件处理程序时,event对象作为window对象的一个属性存在。

      第二种情况:通过attachEvent()添加的事件处理程序,event对象作为参数传入。

    <body>
    <input id="btn" type="button" value="click"/>
    <script>
        var btn=document.getElementById("btn");
        btn.onclick= function () {
            var event=window.event;
           console.log(event.type); //click
        }
    </script>
    </body>
    <body>
    <input id="btn" type="button" value="click"/>
    <script>
        var btn=document.getElementById("btn");
        btn.attachEvent("onclick", function (type) {
            console.log(event.type);    //click
        })
    </script>
    </body>这里有个大大的问题没搞懂

    (四)、事件对象的公共成员

    1、DOM中事件对象的公共成员

    事件对象包含与创建它有关的属性和方法。所以事件类型不一样,可用的属性和方法不一样。但是,DOM中所有事件都有以下公共成员。【注意bubbles属性和cancelable属性】

    属性/方法 类型 读/写 说明
    bubbles Boolean 只读    表明事件是否冒泡
    stopPropagation()*** Function 只读 取消事件的进一步捕获或冒泡。如果bubbles为true,则可以使用这个方法
    stopImmediatePropagation()  Function 只读 取消事件的进一步捕获或冒泡,同时阻止任何事件处理程序被调用(DOM3级事件中新增)
    cancelable Boolean 只读 表明是否可以取消事件的默认行为
    preventDefault()*** Function 只读 取消事件的默认行为。如果cancelable是true,则可以使用这个方法
    defaultPrevented Boolean 只读 为true表示已经调用了preventDefault()(DOM3级事件中新增)
    currentTarget*** Element 只读 事件处理程序绑定的那个元素(currentTarget始终===this,即处理事件的元素
    target*** Element 只读 直接事件目标,真正触发事件的目标
    detail Integer  只读 与事件相关的细节信息
    eventPhase*** Integer 只读 调用事件处理程序的阶段:1表示捕获阶段,2表示处于目标阶段,3表示冒泡阶段
    trusted Boolean 只读 为true表示事件是由浏览器生成的。为false表示事件是由开发人员通过JavaScript创建的(DOM3级事件中新增)
    type*** String 只读 被触发的事件的类型
    view AbstractView 只读 与事件关联的抽象视图。等同于发生事件的window对象

    a、对比currentTarget和target

    在事件处理程序内部,对象this始终等于currentTarget的值,而target则只是包含事件的实际目标。

    举例:页面有个按钮,在body(按钮的父节点)中注册click事件,点按钮时click事件会冒泡到body进行处理。

     1 <body>
     2 <input id="btn" type="button" value="click"/>
     3 <script>
     4     document.body.onclick=function(event){
     5         console.log("body中注册的click事件");
     6         console.log("this===event.currentTarget? "+(this===event.currentTarget)); //true
     7         console.log("currentTarget===document.body?"+(event.currentTarget===document.body)); //true
     8         console.log('event.target===document.getElementById("btn")? '+(event.target===document.getElementById("btn"))); //true
     9     }
    10 </script>
    11 </body>

    b、通过type属性,可以在一个函数中处理多个事件。

    原理:通过检测event.type属性,对不同事件进行不同处理。

    举例:定义一个handler函数用来处理3种事件:click,mouseover,mouseout。

    运行效果:点击按钮,弹出框。鼠标经过按钮,按钮背景色变为粉色;鼠标离开按钮,背景色恢复默认。

     1 <body>
     2 <input id="btn" type="button" value="click"/>
     3 <script>
     4 var handler=function(event){
     5     switch (event.type){
     6         case "click":
     7             alert("clicked");
     8             break;
     9         case "mouseover":
    10             event.target.style.backgroundColor="pink";
    11             break;
    12         case "mouseout":
    13             event.target.style.backgroundColor="";
    14     }
    15 };
    16     var btn=document.getElementById("btn");
    17     btn.onclick=handler;
    18     btn.onmouseover=handler;
    19     btn.onmouseout=handler;
    20 </script>
    21 </body>

    c、stopPropagation()和stopImmediatePropagation()对比

    同:stopPropagation()和 stopImmediatePropagation()都可以用来取消事件的进一步捕获或冒泡。

    异:二者的区别在于当一个事件有多个事件处理程序时,stopImmediatePropagation()可以阻止之后事件处理程序被调用。

    举例:

     1 <body>
     2 <input id="btn" type="button" value="click"/>
     3 <script>
     4     var btn=document.getElementById("btn");
     5     btn.addEventListener("click",function(event){
     6         console.log("buttn click listened once");
     7 //    event.stopPropagation();//取消注释查看效果
     8 //    event.stopImmediatePropagation();//取消注释查看效果
     9     },false);
    10     btn.addEventListener("click",function(){
    11         console.log("button click listened twice");
    12     },false);
    13     document.body.onclick= function (event) {
    14         console.log("body clicked");
    15     }
    16 </script>
    17 </body>

    d、eventPhase

    eventPhase值在捕获阶段为1,处于目标阶段为2,冒泡阶段为3。可以通过下面代码查看:

    var btn=document.getElementById("btn");
    btn.onclick= function (event) {
    console.log(event.CAPTURING_PHASE); //1
    console.log(event.AT_TARGET); //2
    console.log(event.BUBBLING_PHASE); //3
    }

    (2)、IE中event的公共成员

    IE中的event的属性和方法和DOM一样会随着事件类型的不同而不同,但是也有一些是所有对象都有的公共成员,且这些成员大部分有对应的DOM属性或方法。

    属性/方法 类型 读/写 说明
    cancelBubble Boolean 读/写 默认为false,但将其设置为true就可以取消事件冒泡(与DOM中stopPropagation()方法的作用相同
    returnValue Boolean 读/写 默认为true,但将其设置为false就可以取消事件的默认行为(与DOM中的preventDefault()方法的作用相同
    srcElement Element 只读 事件的目标(与DOM中的target属性相同
    type String 只读 被触发的事件的类型

      (五)总结JS事件对象(event)的一些兼容性写法   

    获得event对象兼容性写法 
    event || (event = window.event);
    获得target兼容型写法 
    event.target||event.srcElement
    阻止浏览器默认行为兼容性写法 
    event.preventDefault ? event.preventDefault() : (event.returnValue = false);
    阻止冒泡写法 
    event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
    添加事件监听和取消事件监听

     //添加事件监听兼容函数
     function addHandler(target, eventType, handler){
         if(target.addEventListener){//主流浏览器
             addHandler = function(target, eventType, handler){
                 target.addEventListener(eventType, handler, false);
              };
          }else{//IE
              addHandler = function(target, eventType, handler){
                  target.attachEvent("on"+eventType, handler);
             };        
         }
         //执行新的函数,如果不在这里执行,则智能添加一个处理程序
         addHandler(target, eventType, handler);
     }
     //删除事件监听兼容函数
     function removeHandler(target, eventType, handler){
         if(target.removeEventListener){//主流浏览器
             removeHandler = function(target, eventType, handler){
                 target.removeEventListener(eventType, handler, false);
             }        
         }else{//IE
             removeHandler = function(target, eventType, handler){
                 target.detachEvent("on"+eventType, handler);
             }        
         }
         //执行新的函数
         removeHandler(target, eventType, handler);
     }
     
    

      

    四、事件流:

    定义:事件流是从页面中接收事件的顺序,事件发生时会在元素节点与根节点之间按照特定的顺序传播,路径所经过的所有节点都会收到该事件,这个传播过程即DOM事件流。

    DOM标准规定事件流包括三个阶段:

      • 事件捕获阶段;由根节点到达事件实际目标的阶段,实际目标在捕获阶段不会接收事件
      • 处于目标阶段;目标阶段事件处理会被看成是冒泡阶段的一部分
      • 事件冒泡阶段。事件又传播回文档。

     注:

    1)、尽管“DOM2级事件”标准规范明确规定事件捕获阶段不会涉及事件目标,但是在IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。结果,就是有两次机会在目标对象上面操作事件。

    2)、并非所有的事件都会经过冒泡阶段 。所有的事件都要经过捕获阶段和处于目标阶段,但是有些事件会跳过冒泡阶段:如,获得输入焦点的focus事件和失去输入焦点的blur事件。

    两次机会在目标对象上面操作事件例子:

     1 <!DOCTYPE html>
     2 <html>
     3 <head lang="en">
     4     <meta charset="UTF-8">
     5     <title></title>
     6 </head>
     7 <style>
     8     #outer{
     9         position: absolute;
    10          400px;
    11         height: 400px;
    12         top:0;
    13         left: 0;
    14         bottom:0;
    15         right: 0;
    16         margin: auto;
    17         background-color: deeppink;
    18     }
    19     #middle{
    20         position: absolute;
    21          300px;
    22         height:300px;
    23         top:50%;
    24         left: 50%;
    25         margin-left: -150px;
    26         margin-top: -150px;
    27         background-color: deepskyblue;
    28     }
    29     #inner{
    30         position: absolute;
    31          100px;
    32         height:100px;
    33         top:50%;
    34         left:50%;
    35         margin-left: -50px;
    36         margin-top: -50px;;
    37         background-color: darkgreen;
    38         text-align: center;
    39         line-height: 100px;
    40         color:white;
    41     }
    42     #outer,#middle,#inner{
    43         border-radius:100%;
    44     }
    45 </style>
    46 <body>
    47 <div id="outer">
    48     <div id="middle">
    49         <div id="inner">
    50             click me!
    51         </div>
    52     </div>
    53 </div>
    54 <script>
    55     var innerCircle= document.getElementById("inner");
    56     innerCircle.addEventListener("click", function () {
    57         alert("innerCircle的click事件在捕获阶段被触发");
    58     },true);
    59     innerCircle.addEventListener("click", function () {
    60         alert("innerCircle的click事件在冒泡阶段被触发");
    61     },false);
    62     var middleCircle= document.getElementById("middle");
    63     middleCircle.addEventListener("click", function () {
    64         alert("middleCircle的click事件在捕获阶段被触发");
    65     },true);
    66     middleCircle.addEventListener("click", function () {
    67         alert("middleCircle的click事件在冒泡阶段被触发");
    68     },false);
    69     var outerCircle= document.getElementById("outer");
    70     outerCircle.addEventListener("click", function () {
    71         alert("outerCircle的click事件在捕获阶段被触发");
    72     },true);
    73     outerCircle.addEventListener("click", function () {
    74         alert("outerCircle的click事件在冒泡阶段被触发");
    75     },false);
    76 </script>
    77 </body>
    78 </html>
    View Code

     运行效果就是会陆续弹出6个框,为说明原理我整合成了一个图:

    五、事件类型

    (一)、按级别划分:

    1、HTML事件

    事件直接加在html元素上。

      首先,这种方法已经过时了。因为动作(javascript代码)和内容(html代码)紧密耦合,修改时即要修改html也要修改js。但是写个小demo的时候还是可以使用的。

    这种方式也有两种方法,都很简单:

    第一种:直接在html中定义事件处理程序及包含的动作。

    <input type="button" value="click me!" onclick="alert('clicked!')"/>

    第二种:html中定义事件处理程序,执行的动作则调用其他地方定义的脚本。

    1 <input type="button" value="click me!" onclick="showMessage()"/>
    2 <script>
    3 function showMessage(){
    4     alert("clicked!");
    5 }
    6 </script>

    :

    1)通过event变量可以直接访问事件本身,比如onclick="alert(event.type)"会弹出click事件。

    2)this值等于事件的目标元素,这里目标元素是input。比如 onclick="alert(this.value)"可以得到input元素的value值。

    2、DOM0级事件(无法绑定多个处理函数,后定义的处理函数会覆盖前面定义的函数)

          绑定事件:element.onclick=function(){}

          解绑事件:element.onclick=null;

    3、DOM1没有跟事件相关的更新

    4、DOM2级事件(可以绑定多个处理函数,所有的DOM节点都包含这2个方法。

      绑定事件:element.addEventListener('click', 函数名,  false);

      解绑事件:element.removeEventListener('click', 函数名, false);

      function 函数名(){};

      注:通过addEventListener添加的匿名函数将无法删除。

           为了能删除事件处理程序,代码可以这样写:

    <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>

    5、DOM3级事件 (定义了自定义事件)

       element.addEventListener('keyup', function(){}, false)

      

     (二)、按事件类型划分

    1、鼠标事件

      1. click:用户单击主鼠标按钮(一般是左键)或者按下在聚焦时按下回车键时触发
      2. dblclick:用户双击主鼠标按键触发(频率取决于系统配置)
      3. mousedown:用户按下鼠标任意按键时触发
      4. mouseup:用户抬起鼠标任意按键时触发
      5. mousemove:鼠标在元素上移动时触发
      6. mouseover:鼠标进入元素时触发
      7. mouseout:鼠标离开元素时触发
      8. mouseenter:鼠标进入元素时触发,该事件不会冒泡
      9. mouseleave:鼠标离开元素时触发,该事件不会冒泡

        区别:
        over和out,不考虑子元素,从父元素移动到子元素,对于父元素而言,仍然算作离开
        enter和leave,考虑子元素,子元素仍然是父元素的一部分
        mouseenter和mouseleave不会冒泡
        事件对象
        所有的鼠标事件,事件处理程序中的事件对象,都为 MouseEvent

        altKey:触发事件时,是否按下了键盘的alt键
        ctrlKey:触发事件时,是否按下了键盘的ctrl键
        shiftKey:触发事件时,是否按下了键盘的shift键
        button:触发事件时,鼠标按键类型
        0:左键
        1:中键
        2:右键
        位置
        page:pageX、pageY,当前鼠标距离页面的横纵坐标
        client: clientX、clientY,鼠标相对于视口的坐标
        offset:offsetX、offsetY,鼠标相对于事件源的内边距的坐标
        screen: screenX、screenY,鼠标相对于屏幕
        x、y,等同于clientX、clientY
        movement:movementX、movementY,只在鼠标移动事件中有效,相对于上一次鼠标位置,偏移的距离

    2、键盘事件

    3、表单事件

    4、html5事件

    5、window全局对象

     

    IE事件兼容问题

    IE8及以下浏览器不支持addEventListener,在实际开发中如果要兼容到IE8及以下浏览器。如果用原生的绑定事件,需要做兼容处理,可利用jquery的bind代替。

    IE8及以下版本浏览器实现了与DOM中类似的两个方法:attachEvent()和detachEvent()。

    这两个方法都需要两个参数:事件处理程序名称事件处理程序函数。由于IE8及更早版本只支持事件冒泡,所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。注意是事件处理程序名称而不是事件名称,所以要加上on,是onclick而不是click。

    :

    IE11只支持addEventListener!

    IE9,IE10对attachEvent和addEventListener都支持!

    TE8及以下版本只支持attachEvent!

    可以拿下面代码在IE各个版本浏览器中进行测试。

     1 <input id="myBtn" type="button" value="click me!"/>
     2 <script>
     3     var myBtn=document.getElementById("myBtn");
     4     var handlerIE=function(){
     5         alert("helloIE");
     6     }
     7     var handlerDOM= function () {
     8         alert("helloDOM");
     9     }
    10     myBtn.addEventListener("click",handlerDOM,false);
    11     myBtn.attachEvent("onclick",handlerIE);
    12 </script>

    添加事件处理程序:现在为按钮添加两个事件处理函数,一个弹出“hello”,一个弹出“world”

    1 <script>
    2     var myBtn=document.getElementById("myBtn");
    3     myBtn.attachEvent("onclick",function(){
    4         alert("hello");
    5     });
    6     myBtn.attachEvent("onclick",function(){
    7         alert("world");
    8     });
    9 </script>

    注:这里运行效果值得注意一下:

    IE8以下浏览器中先弹出“world”,再弹出“hello”。和DOM中事件触发顺序相反。

    IE9及以上浏览器先弹出“hello”,再弹出“world”。和DOM中事件触发顺序相同了。

    可见IE浏览器慢慢也走上正轨了。。。

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

    和DOM事件一样,添加的匿名函数将无法删除。

    所以为了能删除事件处理程序,代码可以这样写:

    1 <input id="myBtn" type="button" value="click me!"/>
    2 <script>
    3     var myBtn=document.getElementById("myBtn");
    4     var handler= function () {
    5         alert("hello");
    6     }
    7     myBtn.attachEvent("onclick",handler);
    8     myBtn.detachEvent("onclick",handler);
    9 </script>

    note:IE事件处理程序中还有一个地方需要注意:作用域

    使用attachEvent()方法,事件处理程序会在全局作用域中运行,因此this等于window。

    而dom2或dom0级的方法作用域都是在元素内部,this值为目标元素。

    下面例子会弹出true。

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

    在编写跨浏览器的代码时,需牢记这点。

    IE7\8检测:

     1 //判断IE7\8 兼容性检测
     2             var isIE=!!window.ActiveXObject;
     3             var isIE6=isIE&&!window.XMLHttpRequest;
     4             var isIE8=isIE&&!!document.documentMode;
     5             var isIE7=isIE&&!isIE6&&!isIE8;
     6              
     7             if(isIE8 || isIE7){
     8                 li.attachEvent("onclick",function(){
     9                     _marker.openInfoWindow(_iw);
    10                 })    
    11             }else{
    12                 li.addEventListener("click",function(){
    13                     _marker.openInfoWindow(_iw);
    14                 })
    15             }

    焦点事件

    鼠标事件

    六、事件代理(事件委托)

     传统的事件处理中,需要为每个元素添加事件处理器。js事件代理则是一种简单有效的技巧,通过它可以把事件处理器添加到一个父级元素上,从而避免把事件处理器添加到多个子级元素上。

    1、事件代理

    事件代理的原理用到的就是事件冒泡和目标元素,把事件处理器添加到父元素,等待子元素事件冒泡,并且父元素能够通过target(IE为srcElement)判断是哪个子元素,从而做相应处理。

    传统事件处理,为每个元素添加事件处理器,代码如下:

     1 <body>
     2 <ul id="color-list">
     3 <li>red</li>
     4 <li>orange</li>
     5 <li>yellow</li>
     6 <li>green</li>
     7 <li>blue</li>
     8 <li>indigo</li>
     9 <li>purple</li>
    10 </ul>
    11 <script>
    12 (function(){
    13     var colorList=document.getElementById("color-list");
    14     var colors=colorList.getElementsByTagName("li");
    15     for(var i=0;i<colors.length;i++)
    16     {
    17         colors[i].addEventListener('click',showColor,false);
    18     };
    19     function showColor(e)
    20     {
    21         e=e||window.event;
    22         var targetElement=e.target||e.srcElement;
    23         alert(targetElement.innerHTML);
    24     }
    25 })();
    26 </script>
    27 </body>
    View Code

    事件代理的处理方式,代码如下:

     1 <body>
     2 <ul id="color-list">
     3 <li>red</li>
     4 <li>orange</li>
     5 <li>yellow</li>
     6 <li>green</li>
     7 <li>blue</li>
     8 <li>indigo</li>
     9 <li>purple</li>
    10 </ul>
    11 <script>
    12 (function(){
    13     var colorList=document.getElementById("color-list");
    14     colorList.addEventListener('click',showColor,false);
    15     function showColor(e)
    16     {
    17         e=e||window.event;
    18         var targetElement=e.target||e.srcElement;
    19         if(targetElement.nodeName.toLowerCase()==="li"){
    20         alert(targetElement.innerHTML);
    21         }
    22     }
    23 })();
    24 </script>
    25 </body>
    View Code

    2、事件代理的好处

     总结一下事件代理的好处:

    • 将多个事件处理器减少到一个,因为事件处理器要驻留内存,这样就提高了性能。想象如果有一个100行的表格,对比传统的为每个单元格绑定事件处理器的方式和事件代理(即table上添加一个事件处理器),不难得出结论,事件代理确实避免了一些潜在的风险,提高了性能。
    • DOM更新无需重新绑定事件处理器,因为事件代理对不同子元素可采用不同处理方法。如果新增其他子元素(a,span,div等),直接修改事件代理的事件处理函数即可,不需要重新绑定处理器,不需要再次循环遍历。

    3、事件代理的问题:

    代码如下:事件代理同时绑定了li和span,当点击span的时候,li和span都会冒泡。

    <li><span>li中的span的内容</span></li>
    
    <script>
        $(document).on('click', 'li', function(e){
            alert('li li');
        });
    
        $(document).on('click', 'span', function(e){
            alert('li span');
        })
    </script>

    解决办法:

    方法一:span的事件处理程序中阻止冒泡

    $(document).on('click', 'span', function(e){
            alert('li span');
            e.stopPropagation();
        })

    方法二:li的事件处理程序中检测target元素

    $(document).on('click', 'li', function (e) {
            if (e.target.nodeName == 'SPAN') {
                e.stopPropagation();
                return;
            }
            alert('li li');
        });

    4、事件代理的一个有趣应用

    点击一个列表时,输出对应的索引

    <script>
        var ul=document.querySelector('ul');
        var lis=ul.querySelectorAll('ul li');
        ul.addEventListener('click', function (e) {
            var target= e.target;
            if(target.nodeName.toUpperCase()==='LI'){
                alert([].indexOf.call(lis,target));
            }
        },false)
    </script>

    举例:

    页面加载事件

    JS:window.onload = function(){};-----函数表达式结构创建函数
    当页面所有资源加载完毕之后执行,无法同时绑定多个处理程序–DOM0级
    DOM2级加载:

    document.addEventListener("DOMContentLoaded",function(){
        alert(2)
    },false);
  • 相关阅读:
    常用验证函数isset()/empty()/is_numeric()函数
    jquery select取option的value值发生变化事件
    (转)浅谈HTML5与css3画饼图!
    文本框输入值文字消失常用的两种方法
    简洁的滚动代码(上下滚动)
    (转)PHP的语言结构和函数的区别
    兼容ie7的导航下拉菜单
    jquery中each()函数
    tomcat源码导入eclipse
    weblogic linux环境下新建domain
  • 原文地址:https://www.cnblogs.com/shangsi/p/12069502.html
Copyright © 2020-2023  润新知