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 相关文章推荐
javascript中substr,substring,slice.splice的区别说明
Nov 25 Javascript
详解JavaScript中undefined与null的区别
Mar 29 Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 Javascript
js中跨域方法原理详解
Jul 19 Javascript
AngularJS手动表单验证
Feb 01 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
js实现百度搜索提示框
Feb 05 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 Javascript
js实现图片无缝循环轮播
Oct 28 Javascript
微信小程序利用云函数获取手机号码
Dec 17 Javascript
vue-element-admin项目导入和导出的实现
May 21 Vue.js
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
thinkPHP实现将excel导入到数据库中的方法
2016/04/22 PHP
php metaphone()函数及php localeconv() 函数实例解析
2016/05/15 PHP
PHP操作Postgresql封装类与应用完整实例
2018/04/24 PHP
Laravel 队列使用的实现
2019/01/08 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
轻松学习Javascript闭包
2017/03/01 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
VSCode配置react开发环境的步骤
2017/12/27 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
详解Vue中的自定义指令
2020/12/07 Vue.js
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
2016/12/03 HTML / CSS
台湾母婴用品购物网站:Infant婴之房
2018/06/15 全球购物
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸
新学期红领巾广播稿
2014/10/04 职场文书
Go语言读取txt文档的操作方法
2022/01/22 Golang
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL