jquery事件与绑定事件


Posted in Javascript onMarch 16, 2017

1.首先,我们来看一下经常使用的添加事件的方式:

<input type="button" id="btn" value="click me!" onclick="shao();" />
<script type="text/javascript">
 function shao() {
  alert("msg is showing!");
 }
</script>

我们最常用的是为元素添加onclick元素属性的方式来添加事件

这种方法的弊端是:

只能为一个事件处理函数,在事件处理函数方法中,获取事件对象的方式不同.

jQuery中的事件

ready事件:

当页面加载完成后,来执行function:

<script>
 $(document).ready(function(e){
  alert(document.getElementById("aa").innerHTML);
  //若是要写function方法,不可以在里面写
 })
 //要在外面写
</script>

这样写在哪里都可以调用到这个方法;

鼠标事件:

<script>
$("#aa").click(function(){
 alert("点击事件");
})
$("#aa").dblclick(function(){
 alert("双击事件");
})
$("#aa").mouseover(function(){
 alert("鼠标移上")
});
$("#aa").mouseout(function(){
 alert("鼠标离开");
})
$("#aa").mousemove(function(){
 alert("鼠标移动");
})
$("#aa").mouseup(function(){
 alert("鼠标抬起");
})
$("#aa").mousedown(function(){
 alert("鼠标按下");
})
键盘按键按下:给id加没有作用,需要给整个页面加所以用$(document)
$(document).KeyEvent(function(){
 alert("鼠标离开");
})
</script>

表单元素事件:

<script>
$("#shao").focus(function(){
 alert("获得焦点");
})
$("#shao").blur(function(){
 alert("失去焦点");
})
$("#shao").change(function(){
 alert("值发生变化,change事件");
})
$("#shao").keydown(function(){
 alert("键盘按下");
})
</script>

2.绑定事件(挂事件):

可以动态的改变按钮的事件;

什么是动态绑定?

动态绑定是指动态添加的DOM节点或者html元素,他们最开始时运行的时候是不存在的。如果要给这些动态加入的节点增加事件,就必须要用jquery的on方法来绑定事件。

bind()向匹配元素添加一个或多个事件处理器。

使用方式:

$(selector).bind(event,data,function)

注:bind()函数只能针对已经存在的元素进行事件的设置

代码:首先写两个按钮:

<body>
  <div id="aa" style="width: 100px; height: 100px; background-color: blueviolet;">hello</div>
  <!--<input type="text" id="shao" />-->
<input type="button" id="btn1" value="挂事件" />
<input type="button" id="btn2" value="移除事件" />
 </body>

首先操作点击挂上事件:

<script>
//挂事件,
$("#btn1").click(function(){
 //点击挂事件,给div绑定一个事件:
 $("#aa").bind("click",function(){
 //bind绑定事件
  alert("点击");
 });
 //括号里两个参数,第一个是事件类型(事件名称),第二个参数是要执行的代码
})
</script>

这样的话点击挂事件:

jquery事件与绑定事件

移除事件的按钮:

<script>
//移除事件;
$("#aa").click(function(){
 //点击移除事件;把div里面的事件移除掉
 $("#aa").unbind("click");
 //unbind移除绑定,填一个参数,要移除哪个事件
})
</script>

点击移除,取消aa得点击事件

3.事件数据

一般的事件包含事件源跟时间数据:

事件数据:出发这个时间,会传过来那些数据

js简化,可以不写事件源,因为可以取到

4.JSON语法:

JSON的结构:

json简单说就是javascript中的对象和数组,所以这两种结构就是对象和数组两种结构,通过这两种结构可以表示各种复杂的结构。

(1)对象:对象在js中表示为“{}”括起来的内容,数据结构为 {key:value,key:value,...}的键值对的结构,在面向对象的语言中,key为对象的属性,value为对应的属性值,所以很容易理解,取值方法为 对象.key 获取属性值,这个属性值的类型可以是 数字、字符串、数组、对象几种。

(2)数组:数组在js中是中括号“[]”括起来的内容,数据结构为 ["java","javascript","vb",...],取值方式和所有语言中一样,使用索引获取,字段值的类型可以是 数字、字符串、数组、对象几种。

经过对象、数组2种结构就可以组合成复杂的数据结构了。

json是一种轻量级的数据交换格式

全拼:

JavaScript Object Notation

定义语法:

var j = {
"one":"111111",
"two":"22222"
};

取值方式:

取索引:

//数组的取值方式:
alert(j["one"]);//直接取索引的方法

点语法:

//点语法:
alert(j.one);

JSON也可以寸二维数组:

var j = {
"one":"111111",
"two":"22222",
"three":{"aa":"33333"},
};
//数组的取值方式:
//alert(j["one"]);//直接取索引的方法
//点语法:
alert(j.one);
alert(j.three.aa);

遍历JSON数据:

//遍历
for(var v in j)
{
 //定义一个变量v,把j拿到v里面,关键字不是”as“了,是”in“,
 alert(v);
// 这样便利的是索引
 alert(j[v]);
// 这样是根据索引来取值
}

json不具有长度的属性,所以for循环不适应于json

但是for-in同样适应于数组

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jQuery对html元素取值与赋值的方法
Nov 20 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
Javascript 实现复制(Copy)动作方法大全
Jun 20 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
js实现超简单的展开、折叠目录代码
Aug 28 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
详解js根据百度地图提供经纬度计算两点距离
May 13 Javascript
vue实现二级导航栏效果
Oct 19 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 #Javascript
JSON与js对象序列化实例详解
Mar 16 #Javascript
JS对象的深度克隆方法示例
Mar 16 #Javascript
JS对象深度克隆实例分析
Mar 16 #Javascript
JS异步加载的三种实现方式
Mar 16 #Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 #Javascript
基于JavaScript实现滑动门效果
Mar 16 #Javascript
You might like
php cookis创建实现代码
2009/03/16 PHP
PHP实现的sqlite数据库连接类
2014/12/12 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
PHP设计模式之单例模式定义与用法分析
2019/03/26 PHP
JavaScript 无符号右移运算符
2009/04/17 Javascript
JQuery select标签操作代码段
2010/05/16 Javascript
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
Jquery之美中不足小结
2011/02/16 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
vue watch关于对象内的属性监听
2019/04/22 Javascript
vue-devtools的安装和使用步骤详解
2019/10/17 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
Django 2.0版本的新特性抢先看!
2018/01/05 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
python实现月食效果实例代码
2019/06/18 Python
python如何实现数据的线性拟合
2019/07/19 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
python实现与redis交互操作详解
2020/04/21 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
Linux如何压缩可执行文件
2014/03/27 面试题
音乐专业应届生教师求职信
2013/11/04 职场文书
小学毕业感言50字
2014/02/16 职场文书
竞选班干部演讲稿100字
2014/08/20 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
四风批评与自我批评发言稿
2014/10/14 职场文书
MySQL数据库10秒内插入百万条数据的实现
2021/11/01 MySQL