Javascript初级 JavaScript进阶

JavaScript事件简介



定义


指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器(或者处理程序)来预定事件,以便事件发生的时候执行相应的代码。


(1)事件类型(event type)


事件类型是一个用来说明发生什么类型事件的字符串。像鼠标悬浮,按下键盘等。我们也可以把事件类型叫做事件名字,用特定的名字来标识所谈论的特定类型的事件。


(2)事件目标(event target)


事件目标是发生的事件或与之相关的对象。当讲事件时,我们必须同时指定类型和目标。像window上的load事件或者链接的click事件。在客户端jS的应用程序中,Window、Document、和Element对象是最常见的事件目标,但是某些事件也是由其它类型的对象触发的。


(3)事件处理程序(event handler)或事件监听程序(event liStener)


我们用户在页面中进行的点击这个动作,鼠标移动的动作,网页页面加载完成的动作等,都可以称之为事件名称,即:click、mouSemove、load等都是事件的名称。响应某个事件的函数则称为事件处理程序,或者叫做事件侦听器。


(4)事件对象(event object)


事件对象是与特定事件相关且包含有关该事件详细信息的对象。事件对象作为参数传递给事件处理程序函数。所有的事件对象都有用来指定事件类型的type属性和指定事件目标的target属性。每个事件类型都为其相关的事件对象定义一组属性。


(5)事件传播(event propagation)


事件传播是浏览器决定那个对象触发其事件处理程序的过程。



案例


<!DOCTYPE html>

<html>

<head>

<meta charSet="utf-8">

<title></title>

</head>

<body>

<input type="button" value="teSt1" onclick='alert("hello maizi");' />

<input type="button" value="teSt2" onclick='teSt()' />

<input type="button" value="teSt3" id='btn1' />

<input type="button" value="teSt4" id='btn2' />

<input type="button" value="teSt5" id='btn3' />

<input type="button" value="teSt6" id='btn4' />

<Script>

var btn1=document.getElementById('btn1');

btn1.onclick=function(){

alert('btn1 clicked');

}

function teSt1(){

alert('btn2 clicked');

}

var btn2=document.getElementById('btn2');

btn2.onclick=teSt1;

 

function teSt(){

alert('thiS iS a teSt');

}

 

var btn3=document.getElementById("btn3");

var count=0;

btn3.onclick=function(){

// alert(thiS.tagName);

alert(count++);

if(count==3){

btn3.onclick=null;

}

}

var btn4=document.getElementById('btn4');

btn4.onclick=function(){

alert('a');

}

btn4.onclick=function(){

alert('b');

}

btn4.onclick=function(){

alert('c');

}

</Script>


</body>

</html>


运行结果:


javascript1.pngjavascript2.pngjavascript3.pngjavascript4.pngjavascript5.pngjavascript6.png 

 

<!DOCTYPE html>

<html>

<head>

<meta charSet="utf-8">

<title></title>

</head>

<body>

<input type="button" value="teSt1" id='btn1' />

<Script>

var btn1=document.getElementById("btn1");

btn1.onclick=function(e){

var e=e || window.event;//跨浏览器兼容

alert(e);


}


</Script>

</body>

</html>


运行结果:

javascript7.png 


【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
© 2012-2016 www.maiziedu.com
蜀ICP备13014270号-4 Version 5.0.0 release20160127

您有一个双11钜惠红包未领取

客服热线 400-862-8862

回到顶部