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 相关文章推荐
js 通用javascript函数库整理
Aug 14 Javascript
javascript 中that的含义示例介绍
May 14 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
node.js+express制作网页计算器
Jan 17 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
Feb 03 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 Javascript
vue路由教程之静态路由
Sep 03 Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 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和ACCESS写聊天室(三)
2006/10/09 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
JS字符串处理实例代码
2013/08/05 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
2015/06/15 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
Bootstrap组合上、下拉框简单实现代码
2017/03/06 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
2017/10/26 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
2018/09/20 jQuery
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
在Vue项目中,防止页面被缩放和放大示例
2019/10/28 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
Python学习笔记之常用函数及说明
2014/05/23 Python
python实现单向链表详解
2018/02/08 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
Python实现直方图均衡基本原理解析
2019/08/08 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
css3发光搜索表单分享
2014/04/11 HTML / CSS
适合各种场合的美食礼品:Harry & David
2016/08/03 全球购物
Hotter Shoes美国官网:英国最受欢迎的舒适鞋
2018/08/02 全球购物
缓解脚、腿和背部疼痛:Z-CoiL鞋
2019/03/12 全球购物
技术负责人任命书
2014/06/05 职场文书
环保标语大全
2014/06/12 职场文书
通报表扬范文
2015/01/17 职场文书
关于倡议书的范文
2015/04/29 职场文书
导游词之河北滦平金山岭长城
2019/10/16 职场文书
redis实现共同好友的思路详解
2021/05/26 Redis
Redis三种集群模式详解
2021/10/05 Redis
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js