JS中event事件

JS事件基础

1.event对象

1)用来获取事件的详细信息:鼠标位置、键盘位置

document的本质:document.childNodes[0].tagName

 

 

例子:获取鼠标位置:clientX横坐标,clientY纵坐标

代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script>

window.onload=function()

{

document.onclick=function()

{

alert(event.clientX+‘,‘+event.clientY);

}

}

</script>

</head>

<body>

</body>

</html>

以上代码会有兼容问题

alert(event.clientX+‘,‘+event.clientY);大部分适合IE

把上面代码换成alert(ev.clientX+‘,‘+ev.clientY);适用于火狐,不支持IE

现在怎么解决兼容问题呢?代码如下

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script>

window.onload=function()

{

document.onclick=function(ev)

{

//alert(event.clientX+‘,‘+event.clientY);适用于IE

//alert(ev.clientX+‘,‘+ev.clientY);//适用于火狐

var oEvent=ev||event;//报错ev不存在

alert(oEvent.clientX+‘,‘+oEvent.clientY);

}

};

</script>

</head>

<body>

</body>

</html>

以上总结出解决event对象的兼容性方法就是

设置一个变量 var oEvent=en||event

2事件冒泡:   事件冒泡就是会把事件一直传递给父级,一直到document,小知识document是一个隐藏起来的最大父级

 

 

事件冒泡例子:代码如下

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

div{

padding:50px;

}

</style>

</head>

<body onclick="alert(‘aa‘)">

这个例子就是说明子级的事件会传递给父级,这就是事件冒泡

<div style="background:black;" onclick="alert(this.style.background)">

<div style="background:green;" onclick="alert(this.style.background)">

<div style="background:red; "onclick="alert(this.style.background)"></div>

</div>

</div>

</body>

</html>

执行上面代码点击一下最里面的红色就懂了

3.键盘事件

KeyCode:获取用户按下键盘的哪个按键

用法代码:

<script>

document.onkeydown=function(ev)

{

var oEvent=ev||event;

alert(oEvent.keyCode);

}

</script>

执行以上代码随便按下某个键就会报出数字,这个数字就对应这个按键

 

例子2:如何使用按键回车提交某个信息

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script>

window.onload=function()

{

var oBun1=document.getElementById(‘bu1‘);

var oBun3=document.getElementById(‘text1‘)

oBun1.onkeydown=function(ev)

{

var oEvent=ev||event;

if(event.keyCode==13)

{

oBun3.value=oBun3.value+oBun1.value;

oBun1.value=‘‘

}

}

}

</script>

</head>

<body>

<input id="bu1" type="text" />

<textarea id="text1" rows="10" cols="40"></textarea>

</body>

</html>

还有如何使用ctry+回车提交

只需要把如上代码if部分改为

if(event.keyCode==13 || oEvent.ctrlkey)

keyCode其他属性

ctrlKey、shiftKey、altKey

时间: 2024-10-07 18:52:01

JS中event事件的相关文章

js中的事件,内置对象,正则表达式

[JS中的事件分类] 1.鼠标事件: click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup 2.键盘事件: keydown: 键盘按下去触发 keypress: 键盘按下并松开的瞬间触发 keyup: 键盘抬起时触发 [注意事项:(了解)] ① 执行顺序: keydown--keypress--keyup ② 长按时,会循环不断的执行keydown-keypress ③ 有keydown事件,不一定有keyup事件(事件触发过程

js中鼠标事件总结

js中鼠标事件主要有onclick,onmousedown,onmouseup,oncontextmenu,ondblclick,所有的这些事件都包含有一个事件对象event,当然在IE低版本下,event对象是挂在window底下的.这个我们另行讨论. 1.通过html添加事件 <input type="button" click="alert(1)"/> 2.通过DOM0级方式添加事件 <input type="button"

看懂此文,不再困惑于 JS 中的事件设计

看懂此文,不再困惑于 JS 中的事件设计 今天刚在关注的微信公众号看到的文章,关于JS事件的,写的很详细也很容易理解,相关的知识点都有总结到,看完就有种很舒畅的感觉,该串起来的知识点都串起来了.反正一字节:爽. 作者:aitangyong 链接:blog.csdn.net/aitangyong/article/details/43231111 抽空学习了下javascript和jquery的事件设计,收获颇大,总结此贴,和大家分享. (一)事件绑定的几种方式 javascript给DOM绑定事件

JS之Event事件

<script> function ff(event) { var e = window.event||event;//Event对象:发生当前事件的状态 // var src = e.srcElement||e.target;//获得事件中的value值 var c = e.keycode||e.charCode;//获得键盘输入的值的编码 // alert(e); // alert(src.value); alert(c); } /** var e; if(window.event){ e

从零开始的JS生活(二)——BOM、DOM与JS中的事件

上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举起了火把--BOM简介 BOM(Browser Object Model) 是指浏览器对象模型,在JS中BOM是个不折不扣的花心大萝卜,因为它有很多个对象,其中代表浏览器窗口的Window对象是BOM的"正室".也就是最重要的,其他对象都是正室的下手.或者叫侧室也不足为过. 2.细数BOM

JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

   前   言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学,经过初步的学习,会对这一门语言有了一定深入的了解,也会感受到这一门语言的强大之处.希望各位同学通过一定的学习,会得到等大的收获. 因为是最后一篇所以内容可能有点多,希望各位同学能够慢慢看,细细看,让我们一起学习,一起进步,一起感受JS的魅力. 一函数 函数的声明及调用 1.函数的声明格式: func

JS中的事件以及DOM 操作

[DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document.getElementById("div1")  通过ID获取唯一的节点  多个同名ID只会取到第一个 2 getElmentsName   通过Name取到一个数组,包含1到多个节点   使用方式   通过循环,取到每一个节点  循环次数从0开始,<数组 length [查看和设置属

DOM 以及JS中的事件

[DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document.getElementById("div1")  通过ID获取唯一的节点  多个同名ID只会取到第一个 2 getElmentsName   通过Name取到一个数组,包含1到多个节点   使用方式   通过循环,取到每一个节点  循环次数从0开始,<数组 length [查看和设置属

JS学习五(js中的事件)

[JS中的事件分类] 1.鼠标事件 click/bdlclick/onmouseover/onmouseout 2. HTML事件 onload/onscroll/onsubmit/onchange/onfocus 3. 键盘事件 keydown:键盘按下时触发 keypress:键盘按下并松开时的瞬间触发 keyup:键盘抬起时触发 [注意事项] ①执行顺序:keydown-->keypress-->keyup ②当长按时,会循环执行keydown-->keypress ③有keydo