当前位置:首页 > 生活百科

js给input赋值和取值(jquery实现ajax请求)

栏目:生活百科日期:2024-12-31浏览:0

早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类。

1、DOM事件模型。DOM事件模型分为两种:事件冒泡和事件捕获。事件冒泡最初是微软提出的DOM事件流的模型,顾名思义,就是值浏览器的事件流如同冒泡一样,从最低处到最高处。最低处对应的是DOM中最具体的元素,最高处则是最外层元素,最外层元素一般就是document元素。

a、事件冒泡模型:

如下图,当点击最底层的span元素时,在冒泡模型中触发的事件流为:span的click事件触发&—-&>父级元素p的click事件触发&—-&>顶层的document元素的click事件触发。

b、事件捕获模型:

如下图,当点击span元素时,在事件捕获模型中触发的事件流为:最顶层的document的click事件首先被触发&—-&>子容器p(同时也是span的父容器)的click事件被触发

&—-&>最底层的span元素的click事件触发。

可见,事件冒泡和事件捕获的事件触发流程是完全相反的。

2、DOM事件处理程序的分类。DOM事件处理程序分为三种:HTML事件处理程序、DOM 0级事件处理程序、DOM 2级事件处理程序(注意:、没有DOM1级事件处理程序)。

a、HTML事件处理程序:

指的是事件绑定直接写在HTML上,如:

1 &<input type="button' value="button" onclick="alert('button clicked!')" /&>

这里button的click事件的绑定直接写在HTML中,这种写法即是HTML事件处理程序。由于这种写法造成HTML和JavaScript的紧耦合,当需要调整JavaScript事件时,不得不调整HTML代码(就算不修改JavaScript函数名,只修改函数的内部实现,仍然不推荐使用这种语法绑定事件,会增加不必要的维护成本)。

b、DOM 0级事件处理程序:

指的是通过给JavaScript对象的事件参数属性赋值的模式,如:

1 &<input id="btn" type="button" value="button" /&>2 &<script&>3 var btn = document.getElementById("btn");4 btn.onclick = function(){5 alert("button clicked!");6 }7 &</script&>

这里通过直接给btnDOM对象的onclick属性赋值的形式来绑定click事件就是DOM 0级事件处理程序,赋值可以使用匿名函数的形式,也可以使用具名函数的形式,如下:

1 &<input id="btn" type="button" value="button" /&>2 &<script&>3 var btn = document.getElementById("btn");4 btn.onclick clickHandle;5 function clickHandle(){6 alert("something clicked!");7 }8 &</script&>

如需注销,只需将该属性设置为null即可,如下:

1 &<input id="btn" type="button" value="button" /&>2 &<script&>3 var btn = document.getElementById("btn");4 btn.onclick clickHandle;5 function clickHandle(){6 alert("something clicked!");7 }8 btn.onclick = null;9 &</script&>

注意:如果绑定使用的是匿名函数的形式,通过给事件属性赋值null仍然可以注销该事件。

c、DOM 2级事件处理程序:

指的是使用 addEventListener(&“eventName&”,&”eventHandle&”,false),其中eventName表示事件名称、eventHandle表示事件处理函数,false表示是否启用事件捕获模式,默认为false。使用addEventListener函数来给DOM元素绑定事件处理程序,如:

1 &<input id="btn" type="button" value="button" /&>2 &<script&>3 var btn = document.getElementById("btn");4 btn.addEventListener("click",function(){5 alert("something clicked!");6 },false);7 &</script&>

同样,这里既可以使用匿名函数的形式也可以使用具名函数的形式,如:

1 &<input id="btn" type="button" value="button" /&>2 &<script&>3 var btn = document.getElementById("btn");4 btn.addEventListener("click",clickHandle,false);5 function clickHandle(){6 alert("something clicked!");7 }8 &</script&>

注意:通过addEventListener绑定的事件只能通过removeEventListener来注销,不能使用DOM 0级中的方式注销事件处理程序,注销事件如下:

1 &<input id="btn" type="button" value="button" /&>2 &<script&>3 var btn = document.getElementById("btn");4 btn.addEventListener("click",clickHandle,false);5 function clickHandle(){6 alert("something clicked!");7 }8 btn.removeEventListener("click",clickHandle);9 &</script&>

如果绑定时使用的是匿名函数,则注销操作比较麻烦,可以通过事件参数的callee属性获取当前正在执行的函数,但必须使用在事件绑定的函数内,如:

 1 &<script&> 2 var dom=document.getElementById("content"); 3 var clickNum=0; 4 dom.addEventListener("click",function(e){ 5 clickNum++; 6 alert('你摸了我'+clickNum+'下了。最多摸2下哦'); 7 if(clickNum&>=2){ 8 dom.removeEventListener(e.type,arguments.callee,false); 9 console.log(this);10 }11 });12 &</script&>

d、IE中DOM 2级事件处理程序的是通过attachevent来绑定的,语法与addEventListener完全一致。

e、DOM 0级和DOM 2级事件处理程序的主要区别:

DOM 2级事件处理程序可以给元素的事件绑定多个处理程序,如:

 1 &<input id="btn" type="button" value="button" /&> 2 &<script&> 3 var btn = document.getElementById("btn"); 4 btn.addEventListener("click",clickHandle1,false); 5 btn.addEventListener("click",clickHandle2,false); 6 function clickHandle1(){ 7 alert("something clicked!"); 8 } 9 function clickHandle2(){10 alert("something clicked again!");11 }12 &</script&>

此时,点击btn时将会依次触发clickHandle1、clickHandle2,注销事件处理程序也需要针对每个事件处理程序使用removeEventListener。

DOM 0级事件处理程序如果以这种形式绑定事件,则后写的方法会覆盖掉之前的方法,即:

 1 &<input id="btn" type="button" value="button" /&> 2 &<script&> 3 var btn = document.getElementById("btn"); 4 btn.onclick = clickHandle1(); 5 btn.onclick = clickHandle2(); 6 function clickHandle1(){ 7 alert("something clicked!"); 8 } 9 function clickHandle2(){10 alert("something clicked again!");11 }12 &</script&>

这里实际只会绑定clickHandle2方法,clickHandle1被后面的clickHandle2覆盖掉。

开发过程中推荐使用DOM 0级事件处理程序或者DOM 2级事件处理程序,如果只有一个事件处理程序DOM 0级就足够了,当然,如需绑定多个事件处理程序,则需使用DOM 2级事件处理程序。

为了屏蔽各浏览器之间的实现差异,推荐使用一些JavaScript库来辅助完成事件绑定。推荐使用jQuery,针对不同的浏览器,可以使用统一的接口来完成这一过程。

“js给input赋值和取值(jquery实现ajax请求)” 的相关文章

php获取时间函数(数据库设置日期类型分析)

首先介绍一个PHP的函数microtime()##microtime函数mixedmicrotime([bool$get_as_float=false])这个函...

华为荣耀手环5使用体验(无论是外观还是功能都值得入手)

7月23日,荣耀手环5在西安正式发布,我们也拿到了评测样机。相比上一代手环,新一代的荣耀手环5在slogan上就有明显的变化,从触控大彩屏心率手环到幻彩屏健康运...

07版的excel工具在哪里(2007办公软件安装教程)

MicrosoftOfficeExcel2007较之前版本的优势在哪里呢?面对MicrosoftOfficeExcel2007全新的用户界面,如何发掘其强大的功...

一般车险买哪几种,车辆必买的五个险种

防患于未然,是从小教材里面就教给我们的道理。人们会给自己的家人购买健康险、意外险等,还会给车辆买上合适的车险。不过如果不了解车险行情,就有可能多花冤枉钱。下面车...

ipad按键按不动了怎么修理(平板电脑键盘失灵解决方法)

Home键是iPad使用最频繁的按键,ipad返回主界面的时候都要按home键,使用的时间长了就很容易出现损坏和接触不良的问题。如果按键彻底凹进去了,没有弹性,...

互联网创业计划书,教你怎样利用互联网创业

网络时代,有很多鲜有人知的赚钱方式,研究生代大学生写毕业论文的案例你一定听得很多了,不过代写一篇创业计划书就能收入3万的赚钱方式你或许听都没听过。如果创业项目不...

aso优化效果注明提升(aso优化方案)

酒香也怕巷子深。在产品数量以百万计的手游市场,曝光率成为了所有游戏公司最为头疼的问题之一,再加上买量成本的飙升,ASO(即AppStoreOptimizatio...

cs6序列号在哪个文件夹(photoshop cs6安装教程)

许多朋友想学习作图,但又苦于找不到适合的PS软件。自己找的软件要么不兼容最新的Windows系统,要么就是功能不全,或者是一运行就有这样那样的问题。今天,就来教...

微信卖东西的宣传语周末(教你宣传语写法及其技巧)

为什么现在微信朋友圈卖货越来越难?实体店激烈竞争,百度竞价太贵,其他销售方式又不会,因此主站场很多人都转化在微信、微博、抖音成了新渠道。有一些QQ群,微信群,一...

凡科建站登录入口,凡科建站收费价目表

现在随着技术的发展,自助建站系统越来越人性化,国内也涌现一批功能强大,扩展灵活的建站系统,无论是功能还是优化方面都已经非常强大。这一次,铁哥来跟你聊聊一个优秀的...