搜索
您的当前位置:首页正文

js事件截取enter按键页面提交事件示例代码_javascript技巧

2023-12-04 来源:车融汽车网

假如你在一个文本框中按enter事件是让他执行一个js函数,但是不想提交表单,可以这样做:

function ysearch() //年文本框回车键后重新加载DataWindow{ validateInputText('yyyy');//想做的第一个js函数 if(event.keyCode==13) { changeym();//想做的第二个js函数,做完后把event给清空 event.returnValue=false;//把event事件给截取掉,表单就获取不到event.keyCode==13了 }}

runat="server" class="CRBT_input1">//提示,若在一个事件中,你想调用两个js函数,例如onkeydown事件中调用的validateInputText('yyyy'); 和changeym();函数,这时你可以把他们两个写在一个函数ysearch() 里,然后调用总函数 ysearch() 就好了

小编还为您整理了以下内容,可能对您也有帮助:

用js怎么写一个回车键盘事件

一、设计思路:设计一个简单的输入对话框,然后按下enter进行输入事件。

二、聊天输入框的代码如下:

三、此时的页面展示如下:

四:设计函数,使得输入文字时,按下按钮可以提交到聊天框。

五、此时在页面上测试,输入一段文字:

六、执行结果如下:

七、设计函数,使得按下enter跟按钮同样的功能:

八、刷新页面,测试:

用js怎么写一个回车键盘事件?

<script type="text/javascript" language=JavaScript charset="UTF-8">

document.onkeydown=function(event){

var e = event || window.event || arguments.callee.caller.arguments[0];

if(e && e.keyCode==27){ // 按 Esc

//要做的事情

}

if(e && e.keyCode==113){ // 按 F2

//要做的事情

}

if(e && e.keyCode==13){ // enter 键

//要做的事情

}

};

</script>

只要你定义了这些键的动作,你在浏览器里按下这些键就会响应,兼容目前所有浏览器。

我做了一个jsp页面,里面有个搜索的功能,搜索是一个放大镜模样的图片,我给了个链接去执行函数,具体代码是:<span onclick="_search();"><img src="images/search.gif"  border="0"> 现在用鼠标点这个搜索图片是没问题的

有搜索条件输入框不?

有的话就在输入框加上onkeypress="if (event.keyCode == 13) _search();"

没有的话就给body加上面这段

精品JS代码大全(JavaScript开发者的必备手册)

在现代Web开发中,JavaScript已经成为了不可或缺的一部分。它是一种高级的、解释型的编程语言,可以用于为网页添加交互性和动态性。为了帮助开发者更好地掌握JavaScript,本篇文章将介绍一些常用的精品JS代码,帮助你在开发过程中提高效率。

一、表单验证

表单验证是Web开发中常见的需求之一,下面是一个简单的表单验证代码示例:

```javascript

functionvalidateForm(){

varname=document.forms["myForm"]["name"].value;

varemail=document.forms["myForm"]["email"].value;

if(name==""){

alert("请输入姓名");

returnfalse;

}

if(email==""){

alert("请输入邮箱");

returnfalse;

}

}

```

在这个示例中,我们通过获取表单中的姓名和邮箱输入框的值,并进行非空判断。如果姓名或邮箱为空,则弹出相应的提示框,并返回false,阻止表单的提交。

二、数组操作

JavaScript中的数组是一种非常常用的数据结构,下面是一些常见的数组操作代码示例:

1.遍历数组

```javascript

varfruits=["apple","banana","orange"];

fruits.forEach(function(fruit){

console.log(fruit);

});

```

这段代码使用forEach方法遍历了一个水果数组,并将每个水果打印到控制台。

2.过滤数组

```javascript

varnumbers=[1,2,3,4,5];

varevenNumbers=numbers.filter(function(number){

returnnumber%2===0;

});

console.log(evenNumbers);?//[2,4]

```

这段代码使用filter方法过滤了一个数字数组,只保留了其中的偶数。

三、DOM操作

DOM(DocumentObjectModel)是JavaScript操作网页元素的重要接口,下面是一些常见的DOM操作代码示例:

1.获取元素

```javascript

varelement=document.getElementById("myElement");

```

这段代码通过元素的id获取了一个DOM元素。

2.添加元素

```javascript

varnewElement=document.createElement("div");

newElement.innerHTML="Hello,world!";

document.body.appendChild(newElement);

```

这段代码创建了一个新的div元素,并将其添加到页面的body元素中。

四、事件处理

JavaScript可以通过事件处理来响应用户的操作,下面是一个简单的事件处理代码示例:

```javascript

varbutton=document.getElementById("myButton");

button.addEventListener("click",function(){

console.log("按钮被点击了");

});

```

这段代码给一个按钮元素添加了一个点击事件处理函数,当按钮被点击时,会在控制台输出一条信息。

结尾

本文介绍了一些常用的精品JS代码,涵盖了表单验证、数组操作、DOM操作和事件处理等方面。希望这些代码能够帮助你在开发过程中提高效率,并更好地掌握JavaScript的使用。

以上就是精品JS代码大全(JavaScript开发者的必备手册)。希望本篇文章对你有所帮助,如果你对JavaScript开发有更多的需求和疑问,可以继续深入学习和探索。祝你在JavaScript的世界里取得更多的成就!

JavaScript给表单提交加上回车按钮,大侠请帮忙 答好我会在加分的 谢谢...

不知道你想要的效果是什么!
如果你是想在文本框中按回车的时候提交表单,那么你不需要什么js代码,因为浏览器默认的是在文本框中按下回车就会自动提交表单!
如果你是想取消浏览器的默认行为,即不要在文本框中按下回车就提交表单,那么下面的代码可以帮助你!

<html>
<body>
<form id="form1" name="form1" method="post" action="">
<label>
<input type="text" name="textfield" />
</label>
<label>
<input type="submit" name="Submit" value="提交" onkeypress="a();"/>
</label>
</form>
</body>
</html>
<script language="javascript" type="text/javascript" >
function a(){
var x =window.event.keyCode;
if(x == 13){
window.event.returnValue=false;
}
}
</script>
</html>
你的问题上面的代码就可以解决下面扩展的东西!!

用到的是window的event对象!

window.evet 说明 event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等。

event对象只在事件发生的过程中才有效。

event对象有诸多属性:

altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode,
offsetX, offsetY, propertyName, returnValue, screenX, screenY, shiftKey,
srcElement, srcFilter, toElement, type, x, y

event的某些属性只对特定的事件有意义。比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。

1.altKey
描述:
检查alt键的状态。

语法:
event.altKey

可能的值:
当alt键按下时,值为 TRUE ,否则为 FALSE 。只读。

2.button
描述:
检查按下的鼠标键。

语法:
event.button

可能的值:
0 没按键
1 按左键
2 按右键
3 按左右键
4 按中间键
5 按左键和中间键
6 按右键和中间键
7 按所有的键

这个属性仅用于onmousedown, onmouseup, 和 onmousemove 事件。对其他事件,不管鼠标状态如何,都返回 0(比如onclick)。

3.cancelBubble
描述:
检测是否接受上层元素的事件的控制。

语法:
event.cancelBubble[ = cancelBubble]

可能的值:
这是一个可读写的布尔值:

TRUE 不被上层原素的事件控制。
FALSE 允许被上层元素的事件控制。这是默认值。

例子:
下面的代码片断演示了当在图片上点击(onclick)时,如果同时shift键也被按下,就取消上层元素(body)上的事件onclick所引发的showSrc()函数。

<SCRIPT LANGUAGE="JScript">
function checkCancel() {
if (window.event.shiftKey)
window.event.cancelBubble = true;
}
function showSrc() {
if (window.event.srcElement.tagName == "IMG")
alert(window.event.srcElement.src);
}
</SCRIPT>
<BODY onclick="showSrc()">
<IMG onclick="checkCancel()" src="/sample.gif">

4.clientX
描述:
返回鼠标在窗口客户区域中的X坐标。

语法:
event.clientX

注释:
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

5.clientY
描述:
返回鼠标在窗口客户区域中的Y坐标。

语法:
event.clientY

注释:
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

6.ctrlKey
描述:
检查ctrl键的状态。

语法:
event.ctrlKey

可能的值:
当ctrl键按下时,值为 TRUE ,否则为 FALSE 。只读。

7.fromElement
描述:
检测 onmouseover 和 onmouseout 事件发生时,鼠标所离开的元素。 参考:18.toElement

语法:
event.fromElement

注释:
这是个只读属性。

8.keyCode
描述:
检测键盘事件相对应的内码。
这个属性用于 onkeydown, onkeyup, 和 onkeypress 事件。

语法:
event.keyCode[ = keyCode]

可能的值:
这是个可读写的值,可以是任何一个Unicode键盘内码。如果没有引发键盘事件,则该值为 0 。

9.offsetX
描述:
检查相对于触发事件的对象,鼠标位置的水平坐标

语法:
event.offsetX

10.offsetY
描述:
检查相对于触发事件的对象,鼠标位置的垂直坐标

语法:
event.offsetY

11.propertyName
描述:
设置或返回元素的变化了的属性的名称。

语法:
event.propertyName [ = sProperty ]

可能的值:
sProperty 是一个字符串,指定或返回触发事件的元素在事件中变化了的属性的名称。
这个属性是可读写的。无默认值。

注释:
你可以通过使用 onpropertychange 事件,得到 propertyName 的值。

例子:
下面的例子通过使用 onpropertychange 事件,弹出一个对话框,显示 propertyName 的值。

<HEAD>
<SCRIPT>
function changeProp()
{
btnProp.value = "This is the new VALUE";
}

function changeCSSProp()
{
btnStyleProp.style.backgroundColor = "aqua";
}
</SCRIPT>
</HEAD>
<BODY>
<P>The event object property propertyName is
used here to return which property has been
altered.</P>

<INPUT TYPE=button ID=btnProp onclick="changeProp()"
VALUE="Click to change the VALUE property of this button"
onpropertychange='alert(event.propertyName+" property has changed value")'>
<INPUT TYPE=button ID=btnStyleProp
onclick="changeCSSProp()"
VALUE="Click to change the CSS backgroundColor property of this button"
onpropertychange='alert(event.propertyName+" property has changed value")'>
</BODY>

12.returnValue
描述:
设置或检查从事件中返回的值

语法:
event.returnValue[ = Boolean]

可能的值:
true 事件中的值被返回
false 源对象上事件的默认操作被取消

例子见本文的开头。

13.screenX
描述:
检测鼠标相对于用户屏幕的水平位置

语法:
event.screenX

注释:
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

14.screenY
描述:
检测鼠标相对于用户屏幕的垂直位置

语法:
event.screenY

注释:
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

15.shiftKey
描述:
检查shift键的状态。

语法:
event.shiftKey

可能的值:
当shift键按下时,值为 TRUE ,否则为 FALSE 。只读。

16.srcElement
描述:
返回触发事件的元素。只读。例子见本文开头。

语法:
event.srcElement

17.srcFilter
描述:
返回触发 onfilterchange 事件的滤镜。只读。

语法:
event.srcFilter

18.toElement
描述:
检测 onmouseover 和 onmouseout 事件发生时,鼠标所进入的元素。 参考:7.fromElement

语法:
event.toElement

注释:
这是个只读属性。

例子:下面的代码演示了当鼠标移到按钮上时,弹出一个对话框,显示“mouse arrived”

<SCRIPT>
function testMouse(oObject) {
if(oObject.contains(event.toElement)) {
alert("mouse arrived");
}
}
</SCRIPT>
:
<BUTTON ID=oButton onmouseover="testMouse(this)">Mouse Over This.</BUTTON>

19.type
描述:
返回事件名。

语法:
event.type

注释:
返回没有“on”作为前缀的事件名,比如,onclick事件返回的type是click
只读。

20. x
描述:
返回鼠标相对于css属性中有position属性的上级元素的x轴坐标。如果没有css属性中有position属性的上级元素,默认以BODY元素作为参考对象。

语法:
event.x

注释:
如果事件触发后,鼠标移出窗口外,则返回的值为 -1
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

21. y
描述:
返回鼠标相对于css属性中有position属性的上级元素的y轴坐标。如果没有css属性中有position属性的上级元素,默认以BODY元素作为参考对象。

语法:
event.y

注释:
如果事件触发后,鼠标移出窗口外,则返回的值为 -1
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。
----------------------------------------------------------------------------------------------------------------------------

IE,FireFox中的事件Event对象

event代表事件的状态,专门负责对事件的处理,它的属性和方法能帮助我们完成很多和用户交互的操作;

一、Event对象的主要属性和方法

1.type:事件的类型,就是HTML标签属性中,没有“on”前缀之后的字符串,例如“Click”就代表单击事件。

2.srcElement:事件源,就是发生事件的元素。比如<a onclick="check()"></a> a这个链接是事件发生的源头,也就是该事件的srcElement。(非IE中用target)

3.button:声明了被按下的鼠标键,是一个整数。0代表没有按键,1代表鼠标左键,2代表鼠标右键,4代表鼠标的中间键,如果按下了多个鼠标键,就把这些值加在一起,所以3就代表左右键同时按下。

4.clientX/clientY:是指事件发生的时候,鼠标的横、纵坐标,返回的是整数,它们的值是相对于包容窗口的左上角生成的。

5.offsetX/offsetY:鼠标指针相对于源元素的位置,可以确定单击Image对象的哪个象素。

6.altKey,ctrlKey,shiftKey:顾名思义,这些属性是指鼠标事件发生的时候,是否同时按住了Alt、Ctrl或者Shift键,返回的是一个布尔值。

7.keyCode:返回keydown和keyup事件发生的时候,按键的代码以及keypress事件的Unicode字符。比如event.keyCode=13代表按下了回车键;

8.fromElement、toElement前者是指代mouseover事件移动过的文档元素,后者指代mouseout事件中鼠标移动到的文档元素。

9.cancelBubble:一个布尔属性,把它设置为true的时候,将停止事件进一步起泡到包容层次的元素,它用于检测是否接受上层元素的事件的控制。true代表不被上层元素的事件控制,false代表允许被上层元素的事件控制。

10.returnValue:一个布尔值属性,设置为false的时候可以阻止浏览器执行默认的事件动作,相当于<a href=”#” onclick=”ProcessMethod();return false;” />。

11.attachEvent()和detachEvent()方法:为制定DOM对象事件类型注册多个事件处理函数的方法,它们有两个参数,第一个是事件类型,第二个是事件处理函数。在attachEvent()事件执行的时候,this关键字指向的是window对象,而不是发生事件的那个元素。

二、 IE Event对象的一些说明
Event对象是一个全局属性
在IE中,不能把Event对象作为参数传递给事件处理程序,只能用window.event或者event来引用Event对象。因为在IE中,Event是window的一个属性,也就是说event是一个全局变量,这个变量提供了事件的细节。

三、关于事件的起泡的概念

IE中事件的起泡:IE中事件可以沿着包容层次一点点起泡到上层,也就是说,下层的DOM节点定义的事件处理函数,到了上层的节点如果还有和下层相同事件类型的事件处理函数,那么上层的事件处理函数也会执行。例如,<div>标签包含了<a>,如果这两个标签都有 onclick事件的处理函数,那么执行的情况就是先执行<a>标签的onclick事件处理函数,再执行<div>的事件处理函数。如果希望<a>的事件处理函数执行完毕之后,不希望执行上层的<div>的onclick的事件处理函数了,那么就把 cancelBubble设置为false即可。

四、W3C DOM标准中的Event
和IE不同的是,W3C DOM中的Event对象并不是window全局对象下面的属性,换句话说,event不是全局变量。通常在DOM二级标准中,event作为发生事件的文档对象的属性。Event含有两个子接口,分别是UIEvent和MutationEvent,这两个子接口实现了Event的所有方法和属性,而 MouseEvent接口又是UIEvent的子接口,所以实现了UIEvent和Event的所有方法和属性。下面,我们就看看Event、 UIEvent和MouseEvent的主要属性和方法。
1.Event
type:事件类型,和IE类似,但是没有“on”前缀,例如单击事件只是“click”。
target:发生事件的节点。
currentTarget:发生当前正在处理的事件的节点,可能是Target属性所指向的节点,也可能由于捕捉或者起泡,指向Target所指节点的父节点。
eventPhase:指定了事件传播的阶段。是一个数字。
timeStamp:事件发生的时间。
bubbles:指明该事件是否起泡。
cancelable:指明该事件是否可以用preventDefault()方法来取消默认的动作。
preventDefault()方法:取消事件的默认动作;
stopPropagation()方法:停止事件传播。
2.UIEvent
view:发生事件的window对象。
detail:提供事件的额外信息,对于单击事件、mousedown和mouseup事件都代表的是点击次数。
3.MouseEvent
button:一个数字,指明在mousedown、mouseup和单击事件中,鼠标键的状态,和IE中的button属性类似,但是数字代表的意义不一样,0代表左键,1代表中间键,2代表右键。
altKey、ctrlKey、shiftKey、metaKey:和IE相同,但是IE没有最后一个。
clientX、 clientY:和IE的含义相同,但是在DOM标准中,这两个属性值都不考虑文档的滚动情况,也就是说,无论文档滚动到哪里,只要事件发生在窗口左上角,clientX和clientY都是0,所以在IE中,要想得到事件发生的坐标相对于文档开头的位置,要加上 document.body.scrollLeft和document.body.scrollTop。
screenX、screenY:鼠标指针相对于显示器左上角的位置,如果你想打开新的窗口,这两个属性很重要。
relatedTarget:和IE中的fromElement、toElement类似,除了对于mouseover和mouseout有意义外,其他的事件没什么意义。
-----------------------------------------------------------------------------------------------------------------------
只能输入数字的文本框:

<script>
function JHshNumberText()
{
if ( !(((window.event.keyCode >= 48) && (window.event.keyCode <= 57))
|| (window.event.keyCode == 13) || (window.event.keyCode == 46)
|| (window.event.keyCode == 45)))
{
window.event.keyCode = 0 ;
}
}
</script>

只能输入汉字的文本框:

<SCRIPT language="javascript">
function onlychinese()
{
if ((window.event.keyCode >=32) && (window.event.keyCode <= 126))
{
window.event.keyCode = 0 ;
}
}
</SCRIPT>

只能输入0-9和T-Z之间的字符的输入框

<script>
function JHshNumberText()
{
if ( !(((window.event.keyCode >= 48) && (window.event.keyCode <= 57))
|| (window.event.keyCode == 13) || (window.event.keyCode == 46)
|| (window.event.keyCode == 45) || ((window.event.keyCode >= 84)
&& (window.event.keyCode <= 90))))
{
window.event.keyCode = 0 ;
alert("请输入0-9和T-Z之间的字符。。。");
}
}
</script>

JavaScript给表单提交加上回车按钮,大侠请帮忙 答好我会在加分的 谢谢...

不知道你想要的效果是什么!
如果你是想在文本框中按回车的时候提交表单,那么你不需要什么js代码,因为浏览器默认的是在文本框中按下回车就会自动提交表单!
如果你是想取消浏览器的默认行为,即不要在文本框中按下回车就提交表单,那么下面的代码可以帮助你!

<html>
<body>
<form id="form1" name="form1" method="post" action="">
<label>
<input type="text" name="textfield" />
</label>
<label>
<input type="submit" name="Submit" value="提交" onkeypress="a();"/>
</label>
</form>
</body>
</html>
<script language="javascript" type="text/javascript" >
function a(){
var x =window.event.keyCode;
if(x == 13){
window.event.returnValue=false;
}
}
</script>
</html>
你的问题上面的代码就可以解决下面扩展的东西!!

用到的是window的event对象!

window.evet 说明 event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等。

event对象只在事件发生的过程中才有效。

event对象有诸多属性:

altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode,
offsetX, offsetY, propertyName, returnValue, screenX, screenY, shiftKey,
srcElement, srcFilter, toElement, type, x, y

event的某些属性只对特定的事件有意义。比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。

1.altKey
描述:
检查alt键的状态。

语法:
event.altKey

可能的值:
当alt键按下时,值为 TRUE ,否则为 FALSE 。只读。

2.button
描述:
检查按下的鼠标键。

语法:
event.button

可能的值:
0 没按键
1 按左键
2 按右键
3 按左右键
4 按中间键
5 按左键和中间键
6 按右键和中间键
7 按所有的键

这个属性仅用于onmousedown, onmouseup, 和 onmousemove 事件。对其他事件,不管鼠标状态如何,都返回 0(比如onclick)。

3.cancelBubble
描述:
检测是否接受上层元素的事件的控制。

语法:
event.cancelBubble[ = cancelBubble]

可能的值:
这是一个可读写的布尔值:

TRUE 不被上层原素的事件控制。
FALSE 允许被上层元素的事件控制。这是默认值。

例子:
下面的代码片断演示了当在图片上点击(onclick)时,如果同时shift键也被按下,就取消上层元素(body)上的事件onclick所引发的showSrc()函数。

<SCRIPT LANGUAGE="JScript">
function checkCancel() {
if (window.event.shiftKey)
window.event.cancelBubble = true;
}
function showSrc() {
if (window.event.srcElement.tagName == "IMG")
alert(window.event.srcElement.src);
}
</SCRIPT>
<BODY onclick="showSrc()">
<IMG onclick="checkCancel()" src="/sample.gif">

4.clientX
描述:
返回鼠标在窗口客户区域中的X坐标。

语法:
event.clientX

注释:
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

5.clientY
描述:
返回鼠标在窗口客户区域中的Y坐标。

语法:
event.clientY

注释:
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

6.ctrlKey
描述:
检查ctrl键的状态。

语法:
event.ctrlKey

可能的值:
当ctrl键按下时,值为 TRUE ,否则为 FALSE 。只读。

7.fromElement
描述:
检测 onmouseover 和 onmouseout 事件发生时,鼠标所离开的元素。 参考:18.toElement

语法:
event.fromElement

注释:
这是个只读属性。

8.keyCode
描述:
检测键盘事件相对应的内码。
这个属性用于 onkeydown, onkeyup, 和 onkeypress 事件。

语法:
event.keyCode[ = keyCode]

可能的值:
这是个可读写的值,可以是任何一个Unicode键盘内码。如果没有引发键盘事件,则该值为 0 。

9.offsetX
描述:
检查相对于触发事件的对象,鼠标位置的水平坐标

语法:
event.offsetX

10.offsetY
描述:
检查相对于触发事件的对象,鼠标位置的垂直坐标

语法:
event.offsetY

11.propertyName
描述:
设置或返回元素的变化了的属性的名称。

语法:
event.propertyName [ = sProperty ]

可能的值:
sProperty 是一个字符串,指定或返回触发事件的元素在事件中变化了的属性的名称。
这个属性是可读写的。无默认值。

注释:
你可以通过使用 onpropertychange 事件,得到 propertyName 的值。

例子:
下面的例子通过使用 onpropertychange 事件,弹出一个对话框,显示 propertyName 的值。

<HEAD>
<SCRIPT>
function changeProp()
{
btnProp.value = "This is the new VALUE";
}

function changeCSSProp()
{
btnStyleProp.style.backgroundColor = "aqua";
}
</SCRIPT>
</HEAD>
<BODY>
<P>The event object property propertyName is
used here to return which property has been
altered.</P>

<INPUT TYPE=button ID=btnProp onclick="changeProp()"
VALUE="Click to change the VALUE property of this button"
onpropertychange='alert(event.propertyName+" property has changed value")'>
<INPUT TYPE=button ID=btnStyleProp
onclick="changeCSSProp()"
VALUE="Click to change the CSS backgroundColor property of this button"
onpropertychange='alert(event.propertyName+" property has changed value")'>
</BODY>

12.returnValue
描述:
设置或检查从事件中返回的值

语法:
event.returnValue[ = Boolean]

可能的值:
true 事件中的值被返回
false 源对象上事件的默认操作被取消

例子见本文的开头。

13.screenX
描述:
检测鼠标相对于用户屏幕的水平位置

语法:
event.screenX

注释:
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

14.screenY
描述:
检测鼠标相对于用户屏幕的垂直位置

语法:
event.screenY

注释:
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

15.shiftKey
描述:
检查shift键的状态。

语法:
event.shiftKey

可能的值:
当shift键按下时,值为 TRUE ,否则为 FALSE 。只读。

16.srcElement
描述:
返回触发事件的元素。只读。例子见本文开头。

语法:
event.srcElement

17.srcFilter
描述:
返回触发 onfilterchange 事件的滤镜。只读。

语法:
event.srcFilter

18.toElement
描述:
检测 onmouseover 和 onmouseout 事件发生时,鼠标所进入的元素。 参考:7.fromElement

语法:
event.toElement

注释:
这是个只读属性。

例子:下面的代码演示了当鼠标移到按钮上时,弹出一个对话框,显示“mouse arrived”

<SCRIPT>
function testMouse(oObject) {
if(oObject.contains(event.toElement)) {
alert("mouse arrived");
}
}
</SCRIPT>
:
<BUTTON ID=oButton onmouseover="testMouse(this)">Mouse Over This.</BUTTON>

19.type
描述:
返回事件名。

语法:
event.type

注释:
返回没有“on”作为前缀的事件名,比如,onclick事件返回的type是click
只读。

20. x
描述:
返回鼠标相对于css属性中有position属性的上级元素的x轴坐标。如果没有css属性中有position属性的上级元素,默认以BODY元素作为参考对象。

语法:
event.x

注释:
如果事件触发后,鼠标移出窗口外,则返回的值为 -1
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

21. y
描述:
返回鼠标相对于css属性中有position属性的上级元素的y轴坐标。如果没有css属性中有position属性的上级元素,默认以BODY元素作为参考对象。

语法:
event.y

注释:
如果事件触发后,鼠标移出窗口外,则返回的值为 -1
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。
----------------------------------------------------------------------------------------------------------------------------

IE,FireFox中的事件Event对象

event代表事件的状态,专门负责对事件的处理,它的属性和方法能帮助我们完成很多和用户交互的操作;

一、Event对象的主要属性和方法

1.type:事件的类型,就是HTML标签属性中,没有“on”前缀之后的字符串,例如“Click”就代表单击事件。

2.srcElement:事件源,就是发生事件的元素。比如<a onclick="check()"></a> a这个链接是事件发生的源头,也就是该事件的srcElement。(非IE中用target)

3.button:声明了被按下的鼠标键,是一个整数。0代表没有按键,1代表鼠标左键,2代表鼠标右键,4代表鼠标的中间键,如果按下了多个鼠标键,就把这些值加在一起,所以3就代表左右键同时按下。

4.clientX/clientY:是指事件发生的时候,鼠标的横、纵坐标,返回的是整数,它们的值是相对于包容窗口的左上角生成的。

5.offsetX/offsetY:鼠标指针相对于源元素的位置,可以确定单击Image对象的哪个象素。

6.altKey,ctrlKey,shiftKey:顾名思义,这些属性是指鼠标事件发生的时候,是否同时按住了Alt、Ctrl或者Shift键,返回的是一个布尔值。

7.keyCode:返回keydown和keyup事件发生的时候,按键的代码以及keypress事件的Unicode字符。比如event.keyCode=13代表按下了回车键;

8.fromElement、toElement前者是指代mouseover事件移动过的文档元素,后者指代mouseout事件中鼠标移动到的文档元素。

9.cancelBubble:一个布尔属性,把它设置为true的时候,将停止事件进一步起泡到包容层次的元素,它用于检测是否接受上层元素的事件的控制。true代表不被上层元素的事件控制,false代表允许被上层元素的事件控制。

10.returnValue:一个布尔值属性,设置为false的时候可以阻止浏览器执行默认的事件动作,相当于<a href=”#” onclick=”ProcessMethod();return false;” />。

11.attachEvent()和detachEvent()方法:为制定DOM对象事件类型注册多个事件处理函数的方法,它们有两个参数,第一个是事件类型,第二个是事件处理函数。在attachEvent()事件执行的时候,this关键字指向的是window对象,而不是发生事件的那个元素。

二、 IE Event对象的一些说明
Event对象是一个全局属性
在IE中,不能把Event对象作为参数传递给事件处理程序,只能用window.event或者event来引用Event对象。因为在IE中,Event是window的一个属性,也就是说event是一个全局变量,这个变量提供了事件的细节。

三、关于事件的起泡的概念

IE中事件的起泡:IE中事件可以沿着包容层次一点点起泡到上层,也就是说,下层的DOM节点定义的事件处理函数,到了上层的节点如果还有和下层相同事件类型的事件处理函数,那么上层的事件处理函数也会执行。例如,<div>标签包含了<a>,如果这两个标签都有 onclick事件的处理函数,那么执行的情况就是先执行<a>标签的onclick事件处理函数,再执行<div>的事件处理函数。如果希望<a>的事件处理函数执行完毕之后,不希望执行上层的<div>的onclick的事件处理函数了,那么就把 cancelBubble设置为false即可。

四、W3C DOM标准中的Event
和IE不同的是,W3C DOM中的Event对象并不是window全局对象下面的属性,换句话说,event不是全局变量。通常在DOM二级标准中,event作为发生事件的文档对象的属性。Event含有两个子接口,分别是UIEvent和MutationEvent,这两个子接口实现了Event的所有方法和属性,而 MouseEvent接口又是UIEvent的子接口,所以实现了UIEvent和Event的所有方法和属性。下面,我们就看看Event、 UIEvent和MouseEvent的主要属性和方法。
1.Event
type:事件类型,和IE类似,但是没有“on”前缀,例如单击事件只是“click”。
target:发生事件的节点。
currentTarget:发生当前正在处理的事件的节点,可能是Target属性所指向的节点,也可能由于捕捉或者起泡,指向Target所指节点的父节点。
eventPhase:指定了事件传播的阶段。是一个数字。
timeStamp:事件发生的时间。
bubbles:指明该事件是否起泡。
cancelable:指明该事件是否可以用preventDefault()方法来取消默认的动作。
preventDefault()方法:取消事件的默认动作;
stopPropagation()方法:停止事件传播。
2.UIEvent
view:发生事件的window对象。
detail:提供事件的额外信息,对于单击事件、mousedown和mouseup事件都代表的是点击次数。
3.MouseEvent
button:一个数字,指明在mousedown、mouseup和单击事件中,鼠标键的状态,和IE中的button属性类似,但是数字代表的意义不一样,0代表左键,1代表中间键,2代表右键。
altKey、ctrlKey、shiftKey、metaKey:和IE相同,但是IE没有最后一个。
clientX、 clientY:和IE的含义相同,但是在DOM标准中,这两个属性值都不考虑文档的滚动情况,也就是说,无论文档滚动到哪里,只要事件发生在窗口左上角,clientX和clientY都是0,所以在IE中,要想得到事件发生的坐标相对于文档开头的位置,要加上 document.body.scrollLeft和document.body.scrollTop。
screenX、screenY:鼠标指针相对于显示器左上角的位置,如果你想打开新的窗口,这两个属性很重要。
relatedTarget:和IE中的fromElement、toElement类似,除了对于mouseover和mouseout有意义外,其他的事件没什么意义。
-----------------------------------------------------------------------------------------------------------------------
只能输入数字的文本框:

<script>
function JHshNumberText()
{
if ( !(((window.event.keyCode >= 48) && (window.event.keyCode <= 57))
|| (window.event.keyCode == 13) || (window.event.keyCode == 46)
|| (window.event.keyCode == 45)))
{
window.event.keyCode = 0 ;
}
}
</script>

只能输入汉字的文本框:

<SCRIPT language="javascript">
function onlychinese()
{
if ((window.event.keyCode >=32) && (window.event.keyCode <= 126))
{
window.event.keyCode = 0 ;
}
}
</SCRIPT>

只能输入0-9和T-Z之间的字符的输入框

<script>
function JHshNumberText()
{
if ( !(((window.event.keyCode >= 48) && (window.event.keyCode <= 57))
|| (window.event.keyCode == 13) || (window.event.keyCode == 46)
|| (window.event.keyCode == 45) || ((window.event.keyCode >= 84)
&& (window.event.keyCode <= 90))))
{
window.event.keyCode = 0 ;
alert("请输入0-9和T-Z之间的字符。。。");
}
}
</script>

javascript相关事件的几个概念_javascript技巧

客户端javascript程序采用了异步事件驱动编程模型。

相关事件的几个概念:

事件类型(event type):用来说明发生什么类型事件的字符串;

事件目标(event target):发生事件的对象;

事件处理程序(event handler):处理或响应事件的函数;

事件对象(event object):与特定事件相关且包含有关该事件详细信息的对象;

事件传播(event propagation):浏览器决定哪个对象出发其事件处理程序的过程;

注册事件处理程序:

1、设置javascript对象属性;

2、设置html标签属性

3、addEventListener或attachEvent(后者为IE的)

事件传播的三个阶段:

1、发生在目标处理函数之前,称为‘捕获'阶段;

2、对象本身的处理事件的调用;

3、事件的冒泡阶段;

在javascript中,可以为某个元素指定事件,指定的方式有以下三种:

1、在html中,使用onclick属性

2、在javascript中,使用onclick属性

3、在javascipt中,使用addEvenListener()方法

三种方法的比较

(1)在第二、三种方法中,可以向函数传入一个event对象,并读取其相应属性,而方法一不可以。

(2)首选第二、三种,第一种不利于将内容与事件分离,也不能使用event对象的相关内容。

一些语法细节

(1)在第一种方法中,onclick大小写无关,但在第二种方法中,必须使用小写。因为HMTL对大小写不敏感,而JS则会区分大小写。

(2)在第二、三种方法中,指定函数名时没有双引号,而第一种作为一个HTML属性,需要双引号。

(3)第一种方法需要括号,第二、三种不需要。

完整代码:

JavaScript中利用jQuery绑定事件的几种方式小结_jquery


开发过程中经常要给DOM元素添加一些事件,下面介绍几种方式:

先写几个好看的button

//引入JQuery
效果如下:




1、直接在btn1使用onclick,这种方式称为内联事件,简单粗暴,好处是可以清晰地看到button绑定了click事件;这种方式等同于:(element).onclick;

这种方式的缺点,一个元素只能指定一个内联事件,添加了这段代码之后会发现onclick="alert('hello btn1');"被覆盖了:

2、使用原生JS给多个元素绑定事件,在 IE 9 之前的版本中,需要使用 attachEvent替代addEventListener

3、第二种方式逻辑比较简单,*格会高一点,但是代码量比较多,而且还需要考虑IE的兼容性问题,由于我们的项目一般都会使用到JQuery,所以就可以这样写了:

上面使用到的on和bind方法效果是一样的;

4、使用on,给多个元素绑定一个或多个事件:

这是我现在在开发中最常用的一种方法,有个好处,举个栗子:

这样动态添加元素的时候可以自动添加click事件,比如我们经常使用AJAX加载一些数据动态添加到页面上,这样就简单多了。

另外:使用原生JS利用事件委托实现也比较简单,


JavaScript中利用jQuery绑定事件的几种方式小结_jquery


开发过程中经常要给DOM元素添加一些事件,下面介绍几种方式:

先写几个好看的button

//引入JQuery
效果如下:




1、直接在btn1使用onclick,这种方式称为内联事件,简单粗暴,好处是可以清晰地看到button绑定了click事件;这种方式等同于:(element).onclick;

这种方式的缺点,一个元素只能指定一个内联事件,添加了这段代码之后会发现onclick="alert('hello btn1');"被覆盖了:

2、使用原生JS给多个元素绑定事件,在 IE 9 之前的版本中,需要使用 attachEvent替代addEventListener

3、第二种方式逻辑比较简单,*格会高一点,但是代码量比较多,而且还需要考虑IE的兼容性问题,由于我们的项目一般都会使用到JQuery,所以就可以这样写了:

上面使用到的on和bind方法效果是一样的;

4、使用on,给多个元素绑定一个或多个事件:

这是我现在在开发中最常用的一种方法,有个好处,举个栗子:

这样动态添加元素的时候可以自动添加click事件,比如我们经常使用AJAX加载一些数据动态添加到页面上,这样就简单多了。

另外:使用原生JS利用事件委托实现也比较简单,


ajax如何实现页面局部跳转与结果返回_javascript技巧

通过代码示例分析给大家介绍ajax实现页面局部跳转与结果返回,具体内容如下:

1、带有结果返回的提交过程

这里用一个提交按钮来演示,HTML代码为:

点击提报按钮后,通过ajax来实现跳转到action中处理,JavaScript代码为:

action处理完成后,将返回的结果放到result中,在页面弹出提示信息;当然这里的action跳转是需要配置xml的。

后台Java类处理过程为:

这里是通过一个sql语句对数据进行处理,返回一个message,并将信息打印到页面;

这里做的操作的结果是反映到response对应的位置,于是拿到属于response的流,而不是new一个出来。

也就是说我从那里跳转过来的,我这个信息就会返回到那里去。所以在js中就可以用result进行接收这个返回结果,并且用alert提示。

使用AJAX如何实现页面跳转

示例代码如下:

项目当中采用了ajaxAnywhere框架来实现ajax,效果不错,并且容易实现,但现在问题是即使页面实现了效果,业务上还需要提交表单,在这种情况下,即使点击提交后,它仍然会刷新你定义好的zone区域,这个时候,如果单纯的提交表单就不够了,我采取的方案是:

利用js这个强大的BS项目开发工具,自定义一个函数来解决上述问题:

JS命令用法?

使用<script>标签在HTML网页中,JavaScript代码。注意,<script>标签要成对出现,并把JavaScript代码写在<script></script>之间。

<scripttype="text/javascript">表示在<script></script>之间的是文本类型(text),javascript是为了告诉浏览器里面的文本是属于JavaScript语言。

二、引用JS外部文件:

标签在HTML文件中添加JavaScript代码,HTML文件和JS代码可以分开,HTML文件和JS代码分开,并单独创建一个JavaScript文件(简称JS文件),其文件后缀通常为.js,然后将JS代码直接写在JS文件中。

三、JS在页面中的位置:

将JavaScript代码放在html文件中任何位置,javascript作为一种脚本语言可以放在html页面中任何位置,但是浏览器解释html时是按先后顺序的,所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面,因为初始化都要求提前进行(如给页面body设置css等);而如果是通过事件调用执行的function那么对位置没什么要求的。

四、JavaScript-注释很重要

注释的作用是提高代码的可读性,注释分为两种:

单行注释,在注释内容前加符号“//”。多行注释以“/”开始,以“/”结束。

五、看定义变量使用关键字var,语法如下:

var变量名

变量名可以任意取名,但要遵循命名规则:

1.变量必须使用字母、下划线(_)或者美元符($)开始。

2.然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。

3.不能使用JavaScript关键词与JavaScript保留字。

注意:

1.在JS中区分大小写,如变量mychar与myChar是不一样的,表示是两个变量。

2.变量虽然也可以不声明,直接使用,但不规范,需要先声明,后使用。

六、什么是函数

函数是完成某一个特定功能的一组语句。基本语法如下:

function函数名(){

函数代码;

}

说明:

1.function定义函数的关键字。

2."函数名"你为函数取的名字。

3."函数代码"替换为完成特定功能的代码。

函数调用:

函数定义好后,是不能自动执行的,所以需调用它,只需直接在需要的位置写函数就ok了,

七、JavaScript输出内容:使用document.write()

八、JavaScript-alert消息对话框,alert弹出消息对话框(包含一个确定按钮)。

九javaScript--确认(confirm消息对话框)

车融汽车网还为您提供以下相关内容希望对您有帮助:

用js怎么写一个回车键盘事件?

document.onkeydown=function(event){var e = event || window.event || arguments.callee.caller.arguments[0];if(e &amp;&amp; e.keyCode==27){ // 按 Esc//要做的事情}if(e &amp;&amp; e.keyCode==113){ // 按 F2//要...

用js怎么写一个回车键盘事件

一、设计思路:设计一个简单的输入对话框,然后按下enter进行输入事件。二、聊天输入框的代码如下:三、此时的页面展示如下:四:设计函数,使得输入文字时,按下按钮可以提交到聊天框。五、此时在页面上测试,输入一段文字:...

js怎样截获ctrl+enter快捷键?

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt; New Document &lt;/TITLE&gt; &lt;SCRIPT LANGUAGE="JavaScript"&gt; &lt;!-- function CHECKKEY(){ if (event.keyCode == 13 &amp;&amp; e...

JS实现文本框回车提交

event keyCode= ; //Tab的键值为 Enter的键值为 最后一个文本框(验证码 txtSN)输入后 按Enter提交表单 function getEnter(){ if(event keyCode == &amp;&amp; event srcElement type!= submit ){ event returnValue=fals...

javascript相关事件的几个概念_javascript技巧

事件传播(event propagation):浏览器决定哪个对象出发其事件处理程序的过程;注册事件处理程序:1、设置javascript对象属性;2、设置html标签属性3、addEventListener或attachEvent(后者为IE的) 事件传播的三个阶段:1、发生在...

JavaScript中如何捕获一个键盘输入,如当按回车后,焦点移动到下一个...

焦点事件 function change(){ if(window.event.keyCode==13){ var text = document.getElementById("2");text.focus();} } function init(){ var text = document.getElementById("1");text.focus();} ...

精品JS代码大全(JavaScript开发者的必备手册)

JavaScript可以通过事件处理来响应用户的操作,下面是一个简单的事件处理代码示例:```javascript varbutton=document.getElementById("myButton");button.addEventListener("click",function(){ console.log("按钮被点击了");})...

JavaScript给表单提交加上回车按钮,大侠请帮忙 答好我会在加分的 谢谢...

如果你是想在文本框中按回车的时候提交表单,那么你不需要什么js代码,因为浏览器默认的是在文本框中按下回车就会自动提交表单!如果你是想取消浏览器的默认行为,即不要在文本框中按下回车就提交表单,那么下面的代码可以帮助你!

求JS 截取字串包括回车或换行的代码,我有一段代码,回车后就不能用了...

//把str里包含的回车换行替换为空格然后在截取不就可以了吗?function csubstr(str,len){ str=str.replace(/(\n|\r\n)+/g," ");//回车换行替换为空格 if(str.length&gt;len){ return str.substring(0,len)+"......

求C# winform中点击按钮执行网页JS提交表单代码实现~~!

win.execScript("CheckAndLogin()", "javascript");或者执行按钮事件 webBrowser1.Document.GetElementById("card_number").InnerText = Account;webBrowser1.Document.GetElementById("card_password").InnerText = textBox2...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

热门图文

Top