首页 » 我的课程 » web前端 » 正文

jQuery中的事件处理写法(以click事件为例)


在原生态脚本中,我们学到了click事件


<button id=”btn”>按钮</button>
<script>   
      document.getElementById(“btn”).onclick=function()
      {
      alert(3);
      }
   </script>
//这种写法的缺点在于如果有多个事件赋值,后面的会覆盖前面的

于是我们学到了addEventListener(IE:attachEvent)

<button id=”btn”>按钮</button>
<script>   
      document.getElementById(“btn”).addEventListener(“click”,function(){
      alert(3)
      })
        document.getElementById(“btn”).addEventListener(“click”,function(){
      alert(33)
      })
</script>
//这种写法可以对click事件多次赋值

那么jQuery 怎么进行事件处理的呢?  

其实在jQuery中 采用的是 “绑定“的方式,也就是刚才讲到的第二种
 $(“#btn”).bind(“click”,function(){
     alert(3)
     })
 $(“#btn”).bind(“click”,function(){
     alert(33)
     })
//注意:对click事件可以多次绑定

多次绑定

$(“#btn”).bind(“click”,function(){
     alert(3)
     }) .bind(“click”,function(){
     alert(123)
     })
//注意:连着写在一起的哦

还可以这么写
function aa()
  {
  alert(333)
  }
     $(“#btn”).bind(“click”,aa)  

重要知识点
function aa(p)  //假设这个函数有参数,怎么传过去呢
  {
  alert(p.data.name)
  }
 $(“#btn”).bind(“click”,{name:”shenyi”},aa)

简化写法
 $(“#btn”).click(function()  //等价于 bind
     {
        alert(3)
     })

简化写法(多次绑定)
 $(“#btn”).click(function()
     {
     alert(3)
     }).click(function(){
     alert(23)
     })
//注意:也是连着在一起的

函数赋值
  function aa()
   {
   alert(3)
   }
   $(“#btn”).click(aa)

函数赋值(带参数)
   function aa(a)
   {
   alert(a.data.name)
   }
     $(“#btn”).click({name:”shenyi”},aa)

本文共 1 个回复

  • 匿名 2016/09/20 16:31

    :mrgreen:

发表评论