JS与JQ绑定事件的几种方式

JS绑定事件的三种方式

直接在DOM中进行绑定

<button onclick="alert('success')" type="button" id="btn">测试按钮</button>

DOM中绑定函数名

  <button onclick="testFun" type="button" id="btn">测试按钮</button>
<script>
function testFun() {
alert('sucess')
}
</script>

使用on+事件名绑定

    var btn = document.getElementById('btn')
btn.onclick = function () {
alert('成功')
}

使用事件监听绑定

  • 此方法需要考虑兼容性.
  • 非IE: element.addEventListener(type, handler, false)
  • IE: element.attachEvent('on' + type, handler)
  <script>
var btn = document.getElementById('btn')
if (btn.addEventListener) {
btn.addEventListener('click', function () {
alert('成功')
}, false)
} else {
btn.attachEvent('onclick', function () {
alert('成功')
})
}
</script>

区别

  • 前两种就不再说了, 感觉现在Vue框架事件绑定方式类似于第二种
  • 事件监听的方式的优势在于, 可以为同一个事件绑定多个方法.
  • 如果是第一个进行绑定多个方法的话, 会把函数替换掉, 没有办法绑定多次.

jQuery的几种事件绑定方式

  • jQuery提供了四种绑定方式: bind、live、delegate、on
  • 对应接触事件的四种方式: unbind、die、undelegate、off

bind:

  • 使用频率较高的一种, 作用是在选择到的元素上绑定特定事件类型的监听函数.
element.bind(types, data, fn)
  • 参数含义:

    • type: 事件类型, 如: click、change、mouseover
    • data: [可选],传入监听函数的参数, 通过event.data取到.
    • fn: 监听函数. 可以传入event对象, 但是这里的event对象是jq封装的对象, 与原生有区别
// bind源码
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
}
  • bind的特点是吧监听器绑定到目标元素上, 但无法形成动态绑定, 需要再次bind
  • live可以对目标元素形成动态绑定.
  • 如果有再次添加的元素, 需要再次使用bind进行添加.

live

  • 并没有把事件绑定到自己身上, 而是绑定到了顶级的父元素document上.
// 源码
live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
}
  • 通常情况下, 这个context指的是document
  • 但在这种情况下document会变得非常重.

delegate

  • 将事件绑定在就近的元素上
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
}
  • delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
// button 是在div中的一个标签.
$("div").delegate("button","click",function(){
$("p").slideToggle();
});

on

  • 其实所有的方法都是调用的on这个方法.
on(type, [selector], [data], fn)
  • 使用on绑定可以极大的节省效率.
  • 使用on可以完成所有方法的绑定.
  • on里面的代码量很大.
  • 最后一个参数 one 没有搞明白.

JS与JQ绑定事件的几种方式.的更多相关文章

  1. jq绑定事件的4种方式

    jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都有哪 ...

  2. 为input标签绑定事件的几种方式

    为input标签绑定事件的几种方式 1.JavaScript原生态的方式,直接复制下面的代码就会有相应的效果 <!DOCTYPE html><html><head> ...

  3. Android_安卓为按钮控件绑定事件的五种方式

    一.写在最前面 本次,来介绍一下安卓中为控件--Button绑定事件的五种方式. 二.具体的实现 第一种:直接绑定在Button控件上: 步骤1.在Button控件上设置android:onClick ...

  4. jQuery绑定事件的四种方式:bind、live、delegate、on

    1.jQuery操作DOM元素的绑定事件的四种方式 jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undele ...

  5. GIS-ArcGIS JS API FeatureLayer图层绑定事件的几种方式

    一.以下四种方式均可以 importantProvinceLayer.on("click", DoIdentify); dojo.connect(importantProvince ...

  6. jQuery绑定事件的四种方式

      jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都 ...

  7. jQuery绑定事件的四种方式区别

    jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off.在开始看他们之前 一:bind(t ...

  8. Javascript绑定事件的两种方式的区别

    命名函数 <input type="button" onclick="check()" id="btn"/> <scrip ...

  9. jQuery绑定事件的四種方式

    这篇文章主要介绍的是jQuery绑定事件的四种方式相关内容,下面我们就与大家一起分享. jQuery绑定事件的四种方式 jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点 ...

随机推荐

  1. 利用PHP判断iPhone、iPad、Android、PC设备

    首页那张大图确实是一个比较头疼的问题 在PC上显示是没问题的,可是到手机上就会超出页面一大截,如果做自适应,图片会被强制压缩 无奈只能用wp_is_mobile()函数在手机上隐藏了这张图,可是这函数 ...

  2. MySQL优化之——触发器

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/46763665 触发器是一个特殊的存储过程,不同的是存储过程要用CALL来调用,而触 ...

  3. 0mq

  4. bzoj3136: [Baltic2013]brunhilda

    这个题为什么会放在数据结构啊 首先因为有决策包容性,对于一个n每次必然选择一个n%p最大的p,令n减n%p 设fi表示i变成0的步数的话,同样我们可以知道f是有单调性的 假如fd能转移到fk,首先d一 ...

  5. HDU1241 Oil Deposits —— DFS求连通块

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1241 Oil Deposits Time Limit: 2000/1000 MS (Java/Othe ...

  6. YTU 2444: C++习题 对象转换

    2444: C++习题 对象转换 时间限制: 1 Sec  内存限制: 128 MB 提交: 914  解决: 581 题目描述 定义一个Teacher(教师)类(教师号,姓名,性别,薪金)和一个St ...

  7. MYSQL进阶学习笔记三:MySQL流程控制语句!(视频序号:进阶_7-10)

    知识点四:MySQL流程控制语句(7-10) 选择语句: (IF ELSE ELSE IF CASE 分支)IFNULL函数 IF语法: 语法规则: IF search_condition THEN ...

  8. 目录操作(PHP)

    1.创建目录(文件夹)mkdir("./test");2.删除目录(文件夹)只能删除空的文件夹rmdir("./test");3.移动目录(文件夹)rename ...

  9. 后台while收发过程

    fuse_loop_mt.c 中fuse_do_work函数使用while循环在后台不断运行,每一个while循环中,主要有两个操作. 1. fuse_session_receive_buf(mt-& ...

  10. classname.this 和 this的使用场景

    今天在写代码时,发现在写了一个内部类,而在内部类中需要调用外部类的实例方法,直接使用this调用发现调用的不是外部类而是内部类,于是查找资料原来需要使用外部类的classname.this这样的调用, ...