jquery事件绑定

事件绑定

1. jquery标准的绑定方式

jq对象.事件方法(回调函数);

• 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
• 表单对象.submit(); //让表单提交

2. on绑定事件/off解除绑定

jq对象.on("事件名称",回调函数)
jq对象.off("事件名称")

• 如果off方法不传递任何参数，则将组件上的所有事件全部解绑

3. 事件切换：toggle

jq对象.toggle(fn1,fn2...)

• 1.9版本后toggle方法被删除

• 当单击后jq对象对应的组建后，会执行fn1，第二次点击会执行fn2....
  
  

• 代码使用参考

$(function(){
  // 1.获取name对象，绑定click事件
  $("#name").click(function(){
    alert("我被点击了")
  })

  // 给name绑定鼠标移动到元素之上事件。绑定鼠标移除事件
  $("#name").mouseover(function(){
    alert("鼠标来了...")
  })

  $("#name").mouseout(function(){
    alert("鼠标走了...")
  })

  // 简化操作，链式编程
  $("#name").mouseover(function(){
    alert("鼠标来了")
  }).mouseout(function(){
    alert("鼠标走了...")
  })

  $("#name").focus();  // 不传回调函数，让文本输入框获得焦点
  // 表单对象.submit();   让表单提交
})

• 事件绑定

$(function(){
  // 1.使用on给按钮绑定单击事件 click
  $("#btn").on("click",function(){
    alert("我被点击了...")
  })

  // 2.使用off解除btn按钮的单击事件
  $("#btn2").on("click",function(){
    //解除btn按钮的单击事件
    // $("#btn").off("click");
    $("#btn").off();    // 将组件上的所有事件全部解绑
  })
})

• 事件切换

$(function(){
 //获取按钮，调用toggle方法
 // 1.9版本后toggle方法被删除
 $("#btn").toggle(function(){
   //改变div背景色backgroundColor 颜色为 green
   $("#myDiv").css("backgroundColor","green");
 },function(){
   //改变div背景色backgroundColor 颜色为 pink
   $("#myDiv").css("backgroundColor","pink");
 })
})

如有错误或建议欢迎大家指出与评论哈，希望这篇博文能帮助到大家，大家也可以分享给需要的人。

如需转载，请注明出处。https://www.jianshu.com/p/3798d68ccd98