index()、e.target.value、on()与快捷处理的区别、

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

     </head>

     <body>

         <div id="n1">

             <div id="n2">

                 <span id="n3"></span>

                 <ul id="n4">

                     <p></p><p>p</p>

                     <li id="n5">item1</li>

                     <li id="n6">item2</li>

                     <li id="n7">item3</li>

                 </ul>

                 <span id="n8"></span>

             </div>

         </div>

         <script>

             // index() 中如果无参数，则返回li在同辈参数中索引位置

             console.log($("li").index())   //2因为前面有两个p,index值从0开始计算

             // 如果前后都传入jquery对象作为参数，那么就代表是返回

             // 第二个参数依据第一个参数的索引位置,且第二个属于第一个,否则返回-1,例如此时在ul以依据查找#n5索引位置

             console.log($("li").index($("#n7")))  //2

             console.log($("ul").index($("#n5")))  //-1

             console.log($("span").index($("#n8"))) //1

             // 返回结果值同上面，

             //   此用法和上不同之处在于:被查找元素传入jquery对象,为依据的元素传入DOM对象,此句翻译为

             //   第一个参数依据第二个DOM的索引位置,且第一个属于第二个

             console.log($("#n8").index("span"))

         </script>

     </body>

 </html>

e.target.value

target定义：

　　　　target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。

语法：

　　　　event.target

　　　　event.target.nodeName 　　//获取事件触发元素标签name（li,p...）

　　　　event.target.id　　　　　　　//获取事件触发元素id

　　　　event.target.className　　//获取事件触发元素classname

　　　　event.target.innerHTML　　//获取事件触发元素的内容（li）

　　　　等。。。

this 与 e.target区别：

简单来说，this会冒泡。e.target不冒泡就是指向事件触发的dom。

this就是指向当前事件所绑定的元素，

e.target指向事件执行时鼠标所点击区域的那个元素。

容易搞不懂的地方是，初学者会认为当前事件所绑定的元素不就是鼠标所点击的那个元素嘛，这时候就要看看事件绑定的元素内部有没有子元素了，如果有子元素的话e.target指向这个子元素，如果没有，e.target和this都指向事件所绑定的元素。

事件委托：原生js

　　　　事件委托就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素（document）。

　　　　使用事件委托时，如果目标元素上的其他事件处理程序使用.stopPropagation()阻止了事件传播，那么事件委托就会失效。

多个事件绑定同一个函数

 $("#elem").on("mouseover mouseout",function(){ });

通过空格分离，传递不同的事件名，可以同时绑定多个事件

多个事件绑定不同函数

$("#elem").on({

    mouseover:function(){},

    mouseout:function(){},

});

通过空格分离，传递不同的事件名，可以同时绑定多个事件，每一个事件执行自己的回调方法

将数据传递到处理程序

function greet( event ) {

  alert( "Hello " + event.data.name ); //Hello 慕课网

}

$( "button" ).on( "click", {

  name: "慕课网"

}, greet );

可以通过第二参数（对象），当一个事件被触发时，要传递给事件处理函数的

秒客网

index()、e.target.value、on()与快捷处理的区别、

相关文章