首页 > 代码库 > Js中的事件

Js中的事件

事件

事件源

事件行为

1、js中常用的事件

onclick 鼠标点击某个对象

onchange 用户改变域的内容

Code:省市联动

<body>

<select id="city">

<option value="http://www.mamicode.com/bj">北京</option>

<option value="http://www.mamicode.com/tj">天津</option>

<option value="http://www.mamicode.com/sh">上海</option>

</select>

<select id="area">

<option>海淀</option>

<option>朝阳</option>

<option>东城</option>

</select>

</body>

<script type="text/javascript">

var select = document.getElementById("city");

select.onchange = function(){

var optionVal = select.value;

switch(optionVal){

case ‘bj‘:

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

area.innerHTML = "<option>海淀</option><option>朝阳</option><option>东城</option>";

break;

case ‘tj‘:

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

area.innerHTML = "<option>南开</option><option>西青</option><option>河西</option>";

break;

case ‘sh‘:

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

area.innerHTML = "<option>浦东</option><option>杨浦</option>";

break;

default:

alert("error");

}

};

</script>

   

onfocus 元素获得焦点

onblur 元素失去焦点

Code:当获得焦点的时候,提示输入的内容格式,

当失去焦点的时候,提示输入有误

<body>

   

<label for="txt">name</label>

<input id="txt" type="text" /><span id="action"></span>

   

</body>

   

   

<script type="text/javascript">

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

txt.onfocus = function(){

//友好提示

var span = document.getElementById("action");

span.innerHTML = "用户名格式最小8位";

span.style.color = "green";

};

txt.onblur = function(){

//错误提示

var span = document.getElementById("action");

span.innerHTML = "对不起 格式不正确";

span.style.color = "red";

};

</script>

onmouseover 鼠标被移到某元素之上

onmouseup 某个鼠标按键被松开

Code:div元素 鼠标移入变为绿色 移出恢复原色

<style type="text/css">

#d1{background-color: red;width:200px;height: 200px;}

</style>

</head>

<body>

<div id="d1"></div>

</body>

<script type="text/javascript">

var div = document.getElementById("d1");

div.onmouseover = function(){

this.style.backgroundColor = "green";

};

div.onmouseout = function(){

this.style.backgroundColor = "red";

};

</script>

onload 某个页面或图像被完成加载

Code:等到页面加载完毕在执行onload事件所指向的函数

<script type="text/javascript">

window.onload = function(){

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

//alert(span);

span.innerHTML = "hello js";

};

</script>

</head>

<body>

<span id="span"></span>

</body>

2、事件的绑定方式

(1)将事件和响应行为都内嵌到html标签中

Code:

<input type="button" value="http://www.mamicode.com/button" onclick="alert(‘xxx‘)"/>

(2)将事件内嵌到html中而响应行为用函数进行封装

Code:

<input type="button" value="http://www.mamicode.com/button" onclick="fn()" />

<script type="text/javascript">

function fn(){

alert("yyy");

}

</script>

(3)将事件和响应行为 与html标签完全分离

Code:

<input id="btn" type="button" value="http://www.mamicode.com/button"/>

<script type="text/javascript">

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

btn.onclick = function(){

alert("zzz");

};

</script>

this关键字

this经过事件的函数进行传递的是html标签对象

Code:

<body>

<input id="btn" name="mybtn" type="button" value="http://www.mamicode.com/button123" onclick="fn(this)"/>

</body>

   

   

<script type="text/javascript">

function fn(obj){

alert(obj.name);

}

</script>

阻止事件的默认行为

IE:window.event.returnValue = http://www.mamicode.com/false;

W3c: 传递过来的事件对象.stopPropagation();

Code:

<body>

<a href="http://www.mamicode.com/demo11.html" onclick="fn(event)">点击我吧</a>

<a href="http://www.mamicode.com/demo11.html" onclick="return false">点击我吧</a>

</body>

<script type="text/javascript">

   

function fn(e){

//iewindow.event.returnValue = http://www.mamicode.com/false;

//W3c:传递过来的事件对象.preventDefault();

//W3c标准

if(e&&e.preventDefault){

alert("w3c");

e.preventDefault();

//IE标签

}else{

alert("ie");

window.event.returnValue = http://www.mamicode.com/false;

}

}

</script>

阻止事件的传播

IE:window.event.cancelBubble = true;

W3c: 传递过来的事件对象.stopPropagation();

Code:

<body>

<div onclick="fn1()" style="width:100px;height:100px;background-color: green;padding: 50px;">

<div onclick="fn2(event)" style="width:100px;height:100px;background-color: red;">xxxx</div>

</div>

</body>

<script type="text/javascript">

function fn1(){

alert("fn1");

}

function fn2(e){

alert("fn2");

//阻止事件的传播

if(e&&e.stopPropagation){

alert("w3c");

e.stopPropagation();

//IE标签

}else{

alert("ie");

window.event.cancelBubble = true;

}

}

</script>

   

Js中的事件