JS与JQ绑定事件的几种方式.
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绑定事件的几种方式.的更多相关文章
- jq绑定事件的4种方式
jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都有哪 ...
- 为input标签绑定事件的几种方式
为input标签绑定事件的几种方式 1.JavaScript原生态的方式,直接复制下面的代码就会有相应的效果 <!DOCTYPE html><html><head> ...
- Android_安卓为按钮控件绑定事件的五种方式
一.写在最前面 本次,来介绍一下安卓中为控件--Button绑定事件的五种方式. 二.具体的实现 第一种:直接绑定在Button控件上: 步骤1.在Button控件上设置android:onClick ...
- jQuery绑定事件的四种方式:bind、live、delegate、on
1.jQuery操作DOM元素的绑定事件的四种方式 jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undele ...
- GIS-ArcGIS JS API FeatureLayer图层绑定事件的几种方式
一.以下四种方式均可以 importantProvinceLayer.on("click", DoIdentify); dojo.connect(importantProvince ...
- jQuery绑定事件的四种方式
jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都 ...
- jQuery绑定事件的四种方式区别
jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off.在开始看他们之前 一:bind(t ...
- Javascript绑定事件的两种方式的区别
命名函数 <input type="button" onclick="check()" id="btn"/> <scrip ...
- jQuery绑定事件的四種方式
这篇文章主要介绍的是jQuery绑定事件的四种方式相关内容,下面我们就与大家一起分享. jQuery绑定事件的四种方式 jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点 ...
随机推荐
- 利用PHP判断iPhone、iPad、Android、PC设备
首页那张大图确实是一个比较头疼的问题 在PC上显示是没问题的,可是到手机上就会超出页面一大截,如果做自适应,图片会被强制压缩 无奈只能用wp_is_mobile()函数在手机上隐藏了这张图,可是这函数 ...
- MySQL优化之——触发器
转载请注明出处:http://blog.csdn.net/l1028386804/article/details/46763665 触发器是一个特殊的存储过程,不同的是存储过程要用CALL来调用,而触 ...
- 0mq
- bzoj3136: [Baltic2013]brunhilda
这个题为什么会放在数据结构啊 首先因为有决策包容性,对于一个n每次必然选择一个n%p最大的p,令n减n%p 设fi表示i变成0的步数的话,同样我们可以知道f是有单调性的 假如fd能转移到fk,首先d一 ...
- HDU1241 Oil Deposits —— DFS求连通块
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1241 Oil Deposits Time Limit: 2000/1000 MS (Java/Othe ...
- YTU 2444: C++习题 对象转换
2444: C++习题 对象转换 时间限制: 1 Sec 内存限制: 128 MB 提交: 914 解决: 581 题目描述 定义一个Teacher(教师)类(教师号,姓名,性别,薪金)和一个St ...
- MYSQL进阶学习笔记三:MySQL流程控制语句!(视频序号:进阶_7-10)
知识点四:MySQL流程控制语句(7-10) 选择语句: (IF ELSE ELSE IF CASE 分支)IFNULL函数 IF语法: 语法规则: IF search_condition THEN ...
- 目录操作(PHP)
1.创建目录(文件夹)mkdir("./test");2.删除目录(文件夹)只能删除空的文件夹rmdir("./test");3.移动目录(文件夹)rename ...
- 后台while收发过程
fuse_loop_mt.c 中fuse_do_work函数使用while循环在后台不断运行,每一个while循环中,主要有两个操作. 1. fuse_session_receive_buf(mt-& ...
- classname.this 和 this的使用场景
今天在写代码时,发现在写了一个内部类,而在内部类中需要调用外部类的实例方法,直接使用this调用发现调用的不是外部类而是内部类,于是查找资料原来需要使用外部类的classname.this这样的调用, ...