时间:2021-05-26
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>这样的话点击挂事件:
移除事件的按钮:
<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同样适应于数组
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了jquery绑定事件bind和on的用法与区别。分享给大家供大家参考,具体如下:bind和on都是给元素绑定事件用的,其最大的区别就是事件冒泡事件
JQuery中的bind()和unbind(),提供了事件的绑定和取消机制,既可以绑定html默认支持的事件,也能够绑定自定义的事件。JQuery支持自定义事件
鉴于为某个事件(例如简单的单击事件)绑定处理程序极为常用,jQuery提供了一种简化事件操作的方法--简写事件方法,简写事件方法的原理与对应的.on()调用
(1)jquery绑定事件目前1.7以上,jquery的事件绑定已经用on替换了原来的bind;区别:(个人理解)bind是一次绑定事件到每一个子节点;on是只
jQuery中绑定事件的四种方法,他们可以同时绑定一个或多个事件bind()-------------------------版本号小于3.0(在Jquery3